記錄下小程序開發過程中遇到的一些問題以及解決方案

原文鏈接

1. 微信開發者 1.0.0 版本

GET 1351598279.appservice.open.weixin.qq.com/appservice net::ERR_NAME_NOT_RESOLVED

解決辦法

公司的網絡是翻墻網絡，微信應該是給禁掉了

設置-----> 代理設置 -----> 不適用任何代理，勾選直聯網絡

2. 對應的服務器證書無效。控制臺輸入 showRequestInfo() 可以獲取更詳細信息

解決辦法

小程序數據請求必須是 https , 沒配證書用于調試可以先在項目設置中選擇不校驗安全域名、TLS 版本以及 HTTPS 證書

3. 按條件設置class

<text wx:for="{% raw %}{{titles}}{% endraw %}" 
  wx:key="{% raw %}{{item}}{% endraw %}" 
  class="home-title {% raw %}{{index == activeIndex ? 'active' : ''}}{% endraw %}" 
  bindtap='changeClassify'>
  {% raw %}{{item.name}}{% endraw %}
</text>

// index == activeIndex classw為 "home-title active" 否則為 "home-title "

4.循環嵌套

// 普通的單次循環
<text wx:for="{% raw %}{{titles}}{% endraw %}" wx:key="{% raw %}{{index}}{% endraw %}">{% raw %}{{item.name}}{% endraw %}</text>

//循環嵌套時使用 wx:for-item="XXX" 
<view wx:for="{% raw %}{{hotArr}}{% endraw %}">
  <view class="classify-title" bindtap="goClassifyPage">
    <text>{% raw %}{{item.name}}{% endraw %}</text>
  </view>

  <view class="classify-items">
    <view class="classify-item" wx:for=">{% raw %}{{item.data}}{% endraw %}"  wx:for-item="cell" wx:key="index">
      <view>
        <text class="classify-item_name">{% raw %}{{cell.name}}{% endraw %}</text>
      </view>
    </view>
  </view>
</view>

5. router 跳轉傳參及參數獲取

//wxml
<text wx:for="{% raw %}{{titles}}{% endraw %}" wx:key="{% raw %}{{index}}{% endraw %}" bindtap='changeClassify' data-id="{% raw %}{{index}}{% endraw %}">{% raw %}{{item.name}}{% endraw %}</text>

//js
function changeClassify(e) {
  //
  let id = e.currentTarget.dataset.id;

  //跳轉到classify 頁面
  wx.navigateTo({
    url: '../classify/classify?id=' + id
  })
}

//classify 頁面 獲取參數
onLoad: function (opts) {
  console.log(opts.id)
  console.log(this.options.id)
}
// index == activeIndex classw為 "home-title active" 否則為 "home-title "

6. 上拉加載更多, 下拉刷新

• 直接使用小城程序自帶方法 onReachBottom 、 onPullDownRefresh
• 如果使用 scroll-view 組件還可以監聽 bindscrolltoupper 、 bindscrolltolower

// 上拉加載更多
onReachBottom: function() {
  if (this.data.next != null) {
    this.setData({ isHideLoadMore: false })
    this.getNextPage()
  }
}

// 下拉刷新
onPullDownRefresh: function() {
  this.refreshData()
}

7. 組件化 template 的使用

對于通用的組件可以抽出一個 template

/**
* 1. 給template 設置name
* 2. 組件傳過來的值可以直接使用  hidden="{{!isloading}}"
*/
<template name="loading">
  <view class="weui-loadmore" hidden="{% raw %}{{!isloading}}{% endraw %}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">正在加載</view>
  </view> 
</template>

// 
/** 
* 使用通用的template 
* 1. 按路徑引入
* 2. 設置 is 等于 template的name data="{{isloading}}" 給template的數據
*/
<import src="../template/loading.wxml"/>

<template is="loading" data="{% raw %}{{isloading}}{% endraw %}"></template>

8. 獲取用戶的UniqueID 以及 openid

UniqueID 以及 openid 的獲取涉及到用戶的敏感信息，返回的數據 encryptedData 是加密后的數據要提取信息需要對數據進行解密

官網提供了解密的算法，將nodejs的版本拿過來稍作修改即可

• 下載 cryptojs 放到項目的utils目錄下
• 在utils 目錄下新建 decode.js 寫入以下內容

//utils/decode.js
var Crypto = require('./cryptojs/cryptojs.js').Crypto;

function WXBizDataCrypt(appId, sessionKey) {
  this.appId = appId
  this.sessionKey = sessionKey
}

WXBizDataCrypt.prototype.decryptData = function (encryptedData, iv) {
  // base64 decode ：使用 CryptoJS 中 Crypto.util.base64ToBytes()進行 base64解碼
  var encryptedData = Crypto.util.base64ToBytes(encryptedData)
  var key = Crypto.util.base64ToBytes(this.sessionKey);
  var iv = Crypto.util.base64ToBytes(iv);

  // 對稱解密使用的算法為 AES-128-CBC，數據采用PKCS#7填充
  var mode = new Crypto.mode.CBC(Crypto.pad.pkcs7);

  try {
    // 解密
    var bytes = Crypto.AES.decrypt(encryptedData, key, {
      asBpytes: true,
      iv: iv,
      mode: mode
    });

    var decryptResult = JSON.parse(bytes);

  } catch (err) {
    console.log(err)
  }

  if (decryptResult.watermark.appid !== this.appId) {
    console.log(err)
  }

  return decryptResult
}

module.exports = WXBizDataCrypt

• 在app.js 引入decode.js 對數據進行解密

var WXBizDataCrypt = require('utils/decode.js');

var AppId = 'XXXXXX'  
var AppSecret = 'XXXXXXXXX'

//app.js
App({
  onLaunch: function () {
    //調用登錄接口
      wx.login({
        success: function (res) {
          wx.request({
            url: 'https://api.weixin.qq.com/sns/jscode2session',
            data: {
              appid: AppId,
              secret: AppSecret,
              js_code: res.code,
              grant_type: 'authorization_code'
            },
            header: {
              "Content-Type": "application/x-www-form-urlencoded"
            },
            method: 'GET',
            success: function(res) {
              var pc = new WXBizDataCrypt(AppId, res.data.session_key)
              wx.getUserInfo({
                success: function (res) {
                  var data = pc.decryptData(res.encryptedData, res.iv)
                  console.log('解密后 data: ', data)
                }
              })
            },
            fail: function(res) {
            }
          })
        }
      })
  }
})

注意：UniqueID 的獲取微信開放平臺帳號必須已完成開發者資質認證，否則解密后的數據沒有UniqueID 字段

解密后數據

由于公司1.0 版本要求比較簡單。 從開發到上線一共用了兩天時間，小程序的審核也是出奇的快。下午提交不到兩小時就審核通過了。嚴重懷疑他們沒測:joy:。