小程序開發經驗總結

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

開發前準備

本文首先假定開發者已經粗略閱讀過微信小程序的開發文檔，因此註冊小程序的流程就不介紹了。不過須要注意，小程序如今只容許企業用戶註冊，因此認證須要企業營業執照複印件和加蓋公章的小程序申請公函。若是是選擇對公帳戶認證，則不須要公函。另外，若是須要使用微信支付接口，則須要另外進行一次微信認證，這個就必須使用300塊的方式了，感受靠給微信認證的公司就掙錢很多。。。

開發工具介紹

我使用的開發工具就是微信官方提供的IDE，如今也有了不少第三方的IDE或者插件，可是用起來感受整合度不如官方版，索性不換了。新建項目須要輸入註冊小程序時獲取的AppId。須要注意的是設置頁面：其中有一項是開發環境不校驗請求域名以及TLS版本。這一項須要勾選上，由於微信只支持HTTPS的協議並且必須是指定域名，這讓開發者使用localhost調試變的很麻煩，勾選此項以後就沒有這種限制了。但只有在開發環境才能夠。

功能設計

如圖：

開發過程

首先是目錄結構：

• 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，因此圖片需使用雲存儲連接獲取

以上小程序開發的經驗總結，歡迎你們留言交流，給我點贊吧！