經歷了一段繁忙的工作期，還有2天就要過年了。在這裡總結一下最新開發微信小程式的心得和體會，算是一個總結，也算溫故而知新，如果還能對讀者有所幫助，那就更好了。

開發前準備

本文首先假定開發者已經粗略閱讀過微信小程式的開發文件，所以註冊小程式的流程就不介紹了。不過需要注意，小程式現在只允許企業使用者註冊，所以認證需要企業營業執照影印件和加蓋公章的小程式申請公函。如果是選擇對公賬戶認證，則不需要公函。另外，如果需要使用微信支付介面，則需要另外進行一次微信認證，這個就必須使用300塊的方式了，感覺靠給微信認證的公司就掙錢不少。。。

開發工具介紹

我使用的開發工具就是微信官方提供的IDE，現在也有了很多第三方的IDE或者外掛，但是用起來感覺整合度不如官方版，索性不換了。新建專案需要輸入註冊小程式時獲取的AppId

功能設計

如圖：

開發過程

首先是目錄結構：

• pages：用於存放會員卡、個人資訊和註冊三個頁面的檔案
• utils：放置公共js檔案
• app.js：程式入口
• app.json:小程式頁面配置檔案
• app.wxss:小程式全域性樣式檔案

app.js

var request = require('utils/requestfun.js');//封裝了ajax的實現

App({

data: { //app.js中使用的data

},

globalData: { //全域性使用的data

REQUEST_BASE_URL: '',//後臺伺服器域名

GET_VIP_BR_CODE: '',//請求條形碼介面

GET_VIP_QR_CODE: '',//請求二維碼介面

channelid: '',

vipcode: null,//初始設定會員卡號為null

wxuserkey: ''//後臺返回的解密後資訊

},

//獲取會員資訊

getVipInfo: function (cb) {

var that = this;

if (!that.globalData.vipcode) {

//呼叫登入介面

wx.login({//微信提供的login介面，可以獲得openid及code

success: function (res) {

var code = res.code;

wx.getUserInfo({//微信提供的介面，使用code獲取使用者資訊，包括unionid

success: function (res) {

var params = {

'channelid': that.globalData.channelid,

'code': code,

'res': res

}

request.mnsrequest(that.globalData.REQUEST_BASE_URL + 'weixin/miniappgetvipinfo.action', params, function (mnsres) {//請求專案後臺伺服器返回會員資訊

if (mnsres.data) {

if (mnsres.data.returndata.isregistered) {

var vipcode = mnsres.data.returndata.vipcode;

that.globalData.vipcode = vipcode;

typeof cb == "function" && cb();

} else {

that.globalData.wxuserkey = mnsres.data.returndata.wxuserkey;//此處為後臺返回的會員微信資訊key，通過此key與後臺通訊

wx.redirectTo({//微信提供的路由介面，重定向。

url: '/pages/reg/reg'

})

}

} else {

return mnsres.errMsg;

}

})

}

})

}

})

} else {

typeof cb == "function" && cb();

}

}

})
 

這裡強調幾點：

• 微信路由介面有三個，分別是wx.redirectTo、wx.navigateTo和wx.switchTab
• wx.navigateTo全域性最多呼叫5次
• 如果某頁面設定為tab頁，則只支援wx.switchTab，不支援其他兩種路由方式訪問

app.json

app.json是全域性配置檔案。

{

"pages": [//所有頁面都需要在這裡註冊後才能使用

"pages/index/index",

"pages/vipinfo/vipinfo",

"pages/reg/reg"

],

"window": {//設定小程式窗體樣式及顯示文字

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "會員卡",

"navigationBarTextStyle": "black"

},

"tabBar": {//設定Tab頁樣式

"list": [//設定Tab頁列表，最大支援5個

{

"pagePath": "pages/index/index",

"text": "會員卡",

"iconPath": "pages/img/vip.png",

"selectedIconPath": "pages/img/vip2.png"

},

{

"pagePath": "pages/vipinfo/vipinfo",

"text": "個人資訊",

"iconPath": "pages/img/info.png",

"selectedIconPath": "pages/img/info2.png"

}

],

"borderStyle":"white"

},

"networkTimeout": {

"request": 10000,

"downloadFile": 10000

},

"debug": true

}
 

app.wxss

app.wxss控制全域性樣式。

/**app.wxss**/

page{//需要設定page高度，才能正常讓空間高度顯示為100%

height: 100%;

}

.container {

font-family: 'Franklin Gothic Medium', 'Arial Narrow';

/*border: 1px solid black;*/

background-color: #48c23d;

width: 100%;

height: 100%;

display: flex;//小程式推薦使用flex佈局

flex-direction: column;

align-items: center;

justify-content: flex-end;

box-sizing: border-box;

overflow: hidden;

padding: 50rpx;

}

.reg_container{

font-family: 'Franklin Gothic Medium', 'Arial Narrow';

width: 100%;

height: 100%;

display: flex;

flex-direction: column;

align-items: flex-start;

justify-content: flex-start;

box-sizing: border-box;

overflow: hidden;

padding: 50rpx;

}

.info_container{

font-family: 'Franklin Gothic Medium', 'Arial Narrow';

font-size: 30rpx;

width: 100%;

height: 100%;

display: flex;

flex-direction: column;

align-items: flex-start;

justify-content: flex-start;

box-sizing: border-box;

overflow: hidden;

padding: 50rpx;//小程式推薦的自適應長度單位

}

reg.wxml

wxml為微信創造的xml標記語言。

<view class="reg_container">//view可以簡單理解為html中的塊狀元素

<view class="phone_container">

手機號：

<input class='phone' type="number" placeholder="請輸入手機號" maxlength="11" focus bindinput="bindKeyInput" />//使用bind繫結事件

</view>

<view class="vertify_container">

驗證碼：

<input class='vertify' type="number" placeholder="請輸入驗證碼" maxlength="4" bindinput="bindKeyInput2" />

<button class="vertify_btn" size="default" type="primary" bindtap="getVertifycode" disabled='{{vertical.disabled}}'>{{vertical.value}}</button>//使用雙大括號語法進行資料繫結，但只支援單向繫結，若要實現雙向繫結，需要藉助事件

</view>

<view class="regbtn_container">

<button class="reg_btn" size="default" type="primary" bindtap="regist">註冊</button>

</view>

</view>

加密解密

關於加密解密，推薦大家閱讀小程式基礎篇之資料解密，詳細且正確。

提交稽核

按照官方操作說明進行即可。參照下圖：

總結

1. 有其他MVVM開發經驗的話，小程式上手很快，可以將其理解為簡化版VUE.js
2. 微信資料解密是難點，必須嚴格按照微信提供的解密流程，java需要引入新jar包
3. 設定頁面高度時，必須設定page的height為100%，否則高度設定無效
4. 重定向路徑寫法：“/pages/index/index”
5. 若同一頁面中兩個input都設定了“focus”屬性，則會導致小程式閃退
6. 在tab中註冊的頁面，不可使用重定向及新頁面介面，只可使用tab切換
7. 微信規定，整體程式碼大小不得超過1M，所以圖片需使用雲端儲存連結獲取