wepy+vant 微信小程序開發(fā)總結(jié)
前言
本次小程序開發(fā)選擇使用 wepy作為小程序第三方框架国拇，在UI組件庫方面選擇的是有贊的移動(dòng)端組件庫Vant去快速搭建小程序應(yīng)用。這次小程序功能需求并不是特別復(fù)雜，目前親測(cè)功能基本滿足。這段時(shí)間剛好工作空閑期，決定將這次開發(fā)的坑以及重要點(diǎn)記錄下來荚板，以備今后查閱。（另外巍糯，與小程序同期還有用vue做的H5 app開發(fā)啸驯，下面會(huì)在部分情況比較二者的區(qū)別！）
wepy準(zhǔn)備工作
全局安裝wePy模塊包
npm install wepy-cli -g
代碼編輯用的一直還是VsCode祟峦，在VsCode編輯器里開發(fā)罚斗，然后通過開啟wepy實(shí)時(shí)編譯，用微信原生開發(fā)者工具實(shí)時(shí)預(yù)覽與調(diào)試宅楞！
wepy build --watch
微信原生開發(fā)者工具使用注意事項(xiàng)
- 在項(xiàng)目設(shè)置中针姿，關(guān)閉
ES6轉(zhuǎn)ES5,上傳代碼時(shí)樣式自動(dòng)補(bǔ)全,開啟不校驗(yàn)合法域名、web-view（業(yè)務(wù)域名）厌衙、TLS 版本以及 HTTPS 證書距淫。 注意：官網(wǎng)說，應(yīng)當(dāng)關(guān)閉上傳代碼時(shí)自動(dòng)壓縮混淆,否則會(huì)導(dǎo)致部分功能不能正常使用婶希，但我因?yàn)樵?strong>真機(jī)調(diào)試或者預(yù)覽的時(shí)候榕暇，編譯打包失敗超出大小限制還是勾上了,以保證手機(jī)可以正常預(yù)覽調(diào)試。 - 使用微信原生開發(fā)者工具實(shí)時(shí)預(yù)覽時(shí)，只需導(dǎo)入wepy build 后生成的build目錄即可彤枢！
wepy 基本常見用法總結(jié)
-
事件綁定
原生的
bindtap="click"變成@tap="click"狰晚，catchtap="click"變成@tap.stop="click" -
事件傳參
原來通過自定義data-param變量 ：bindtap="click" data-index={{index}}傳參優(yōu)化成：@tap="click('{{index}}')"吃（注：傳遞變量需要加' ' 包裹）傳遞多個(gè)變量：
@tap="checkedChange('{{item.id}}', '{{index}}')" -
wepy使用單文件模式，將原生的page頁面的4個(gè)文件
page.js,page.json,page.wxml,page.wxss匯總成一個(gè)page.wpy;app頁面一樣缴啡。以page頁面為例壁晒，簡(jiǎn)述wepy優(yōu)化后的頁面代碼結(jié)構(gòu)：
<template> <view> ... 我是html部分 <view> </template> <script> import wepy from 'wepy'; import HomoloStep from '../../components/HomoloStep'; export default class PayResult extends wepy.page { config = { navigationBarBackgroundColor: '#447BC9', // 此處設(shè)置相當(dāng)于page.json內(nèi)容，定義頁頭 navigationBarTitleText: '支付結(jié)果', navigationBarTextStyle: 'white', usingComponents: { // 引入的第三方UI組件庫vant 'van-button': '../../components/van/button/index' } }; // 此處注冊(cè)自己封裝的公共組件 components = { 'HomoloStep': HomoloStep } data = { show: false, ... }; // methods 里面只負(fù)責(zé)寫頁面交互相關(guān)的方法业栅，比如：@tap... methods = { ... }; // 無交互的事件秒咐，自己寫的一些初始方法挪出methos，保持于methods同級(jí)碘裕！ getNotaryOffices () { } // 初始化生命周期携取，加載頁面數(shù)據(jù) onLoad () { this.getNotaryOffices() } } </script> <style lang='less' scoped> ... </style> -
數(shù)據(jù)更新
原生使用
this.setData({title: 'this is title'});的形式更新數(shù)據(jù)，wepy優(yōu)化為：this.title = 'this is title'娘汞。注意：在異步更新數(shù)據(jù)歹茶，接口返回?cái)?shù)據(jù)前端對(duì)數(shù)據(jù)做復(fù)雜forEach操作夕玩，或者比如刪除操作成功很久了你弦，視圖才減少掉等等...各種數(shù)據(jù)更新，頁面沒有更新的情況燎孟，都可以使用
this.$apply()方法禽作，觸發(fā)臟數(shù)據(jù)檢查，使頁面強(qiáng)制更新揩页！ -
img屬性綁定區(qū)別
這里沒有為什么旷偿，就想特別記錄一下
image標(biāo)簽的src綁定區(qū)別：用vue 寫的h5 APP時(shí)是這樣的：
<img :src="environment.restServiceUrl +'tk.File/' +unUploadItem.fileId +'/view'">并且：vue這邊，要想在data數(shù)據(jù)里面直接寫入img的src本地圖片路徑爆侣，需要使用
requie('../../bg.png')defaultOfficeBg: require("@/assets/images/office-default.png")微信小程序是這樣的...
<image src="{{item.img}}" />注： 小程序無法在樣式style中萍程，直接使用
background-image去加載本地圖片，只能用網(wǎng)絡(luò)url或者base64的形式 兔仰；要想使用本地圖片要用image標(biāo)簽才行茫负。 -
動(dòng)態(tài)樣式
// 寫法一： <ul class="search-history {{isShowMore ? 'search-history-more' : ''}} {{...}}"></ul> // 寫法二： <view class="m-select-group-item" :class="{'m-select-group-item--active': activeIdx === index}"></view> -
數(shù)據(jù)循環(huán) , 條件判斷
小程序這邊數(shù)據(jù)循環(huán)，我因?yàn)閷懛ǖ拇笠夂醺埃攘艘粋€(gè)坑忍法，這邊特別記錄一下：
// 特別設(shè)置key,item 屬性的時(shí)候，注意沒有{{}}榕吼，并且 wx:key就可以啦饿序，沒有for-前綴 <view wx:for="{{offices}}" wx:key="item.id" wx:for-item="item"> {{item.name}} ... </view>// 小程序條件判斷 <view wx:if="{{ident.result === '同一人'}}">...</view> <view wx:elif="{{ident.result === '非同一人'}}">...</view> <view wx:else>...</view> // vue 這邊是直接 v-if... v-else 即可 -
組件封裝使用
組件引用：父組件
script中，先import引用子組件羹蚣，然后在components對(duì)象中給組件聲明唯一的組件ID原探，接著在template中，用聲明的組件ID所命名的自定義標(biāo)簽插入組件。<template> <!-- 以`<script>`腳本部分中所聲明的組件ID為名命名自定義標(biāo)簽咽弦，從而在`<template>`模板部分中插入組件 --> <child></child> </template> <script> import wepy from 'wepy'; //引入組件文件 import Child from '../components/child'; export default class Index extends wepy.page { //為兩個(gè)相同組件的不同實(shí)例分配不同的組件ID告匠，從而避免數(shù)據(jù)同步變化的問題 components = { child: Child, anotherchild: Child }; } </script>props 父子組件傳值：與vue一樣，包括
靜態(tài)傳值與動(dòng)態(tài)傳值离唬。靜態(tài)傳值：父組件給子組件傳遞常量數(shù)據(jù) String類型（不需要加:）<homolo-select-translate placeholder="請(qǐng)選擇翻譯語種"></homolo-select-translate>動(dòng)態(tài)傳值：父組件向子組件傳遞動(dòng)態(tài)數(shù)據(jù)（需要加：:）后专，可以通過使用.sync修飾符達(dá)到父組件數(shù)據(jù)綁定至子組件，也可以通過設(shè)置twoWay:true達(dá)到子組件數(shù)據(jù)綁定至父組件的效果输莺。兩者同時(shí)使用戚哎，可以實(shí)現(xiàn)雙向綁定。<homolo-select-translate :list.sync="translateLists" :id.sync="translateId"></homolo-select-translate>export default class HomoloSelect extends wepy.component { props = { list: { // 父組件向子組件單向傳值嫂用，有.sync修飾符的props屬性值型凳，當(dāng)在父組件中改變時(shí)，會(huì)同時(shí)改變子組件對(duì)應(yīng)的值 type: Array, default: [] }, id: { type: String, default: undefined, twoWay: true // 子組件props中的屬性值改變時(shí)嘱函，會(huì)同時(shí)改變父組件對(duì)應(yīng)的值 }, placeholder: String // 靜態(tài)傳值 } };組件通信交互
$emit：子組件向父組件通信交互 甘畅。（暫時(shí)只用過這種...）$broadcast: 父組件向所有子組件通信。$invoke: 是一個(gè)頁面或組件對(duì)另一個(gè)組件中的方法的直接調(diào)用往弓，通過傳入組件路徑找到相應(yīng)的組件疏唾，然后再調(diào)用其方法。 -
請(qǐng)求封裝
wepy框架
wepy.request()默認(rèn)對(duì)所有的小程序提供的API進(jìn)行了promise處理函似。支持promise槐脏，但是需要手動(dòng)開啟promise的支持。wxRequest.js頁面：
import wepy from 'wepy'; const request = (url, config = {}) => { return wepy.request({ url: url, data: Object.assign({}, config.data, wepy.$instance.globalData.tokenId ? {personId: wepy.$instance.globalData.tokenId} : {}) || {}, // 每次請(qǐng)求data中攜帶固定的參數(shù) method: config.method || 'GET', dataType: config.dataType || 'json', header: config.header || { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': wepy.$instance.globalData.CSRF_TOKEN, // 自定義js文件獲取globalData的全局變量 } }) } export default { request }
小程序授權(quán)撇寞，登陸流程
暫時(shí)項(xiàng)目進(jìn)度顿天，還沒有特別完善的登陸流程。后續(xù)蔑担，看情況再更新牌废。。啤握。暫時(shí)記錄一下鸟缕，關(guān)于授權(quán)，登陸的注意點(diǎn)：
-
授權(quán)方面：
如果想通過
wx.getUserInfo()獲取用戶信息恨统，需要先走授權(quán)叁扫。可以使用 wx.getSetting 獲取用戶當(dāng)前的授權(quán)狀態(tài)畜埋。向用戶發(fā)起授權(quán)窗口請(qǐng)使用：
<button open-type="getUserInfo"><button open-type="getUserInfo" bindgetuserinfo="onGotUserInfo">獲取用戶信息</button> <script> onGotUserInfo(e) { console.log(e.detail.userInfo) wx.getSetting({ success (res) { if (res.authSetting['scope.userInfo']) { wx.redirectTo({url: './login-register/login'}) } else { ... } } }) }, </script> -
登陸流程
menu.saveimg.savepath20190329134012.jpg
