Record some problems and solutions encountered in the process of small program development

The original link

1. Wechat developer version 1.0.0

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

The solution

The company’s network is over the wall network, wechat should be banned

Set —–> Proxy Settings —–> Do not apply to any proxy and check direct network

2. The server certificate is invalid. The console type showRequestInfo() for more details

The solution

The applets data request must be HTTPS. If no certificate is configured for debugging, you can choose not to verify the secure domain name, TLS version, and HTTPS certificate in the project Settings

3. Set the class by condition

<text wx:for="{{titles}}" wx:key="{{item}}" class="home-title {{index == activeIndex ? 'active' : ''}}" bindtap='changeClassify'> {{item.name}} </text> // index == activeIndex classw is "home-title active" otherwise "home-title "Copy the code

4. Loop nesting

/ / ordinary single cycle < text wx: for = "{{titles}}" wx: key = "{{index}}" > {{item. The name}} < / text > / / a nested loop using wx: the for - item = "XXX" < the view wx:for="{{hotArr}}"> <view class="classify-title" bindtap="goClassifyPage"> <text>{{item.name}}</text> </view> <view class="classify-items"> <view class="classify-item" wx:for="{{item.data}}" wx:for-item="cell" wx:key="index"> <view> <text class="classify-item_name">{{cell.name}}</text> </view> </view> </view> </view>Copy the code

5. Router forward parameters and obtain parameters

//wxml <text wx:for="{{titles}}" wx:key="{{index}}" bindtap='changeClassify' data-id="{{index}}">{{item.name}}</text> //js function changeClassify(e) { // let id = e.currentTarget.dataset.id; Wx. NavigateTo ({url: '.. /classify/classify? OnLoad: function (opts) {console.log(opts.id) console.log(this.opts.id)}Copy the code

6. Pull up to load more, pull down to refresh

  • Use the native method directlyonReachBottom 、 onPullDownRefresh
  • If you are usingscroll-viewComponents can also listenbindscrolltoupper 、 bindscrolltolower

// Pull up to load more
onReachBottom: function() {
  if (this.data.next ! =null) {
    this.setData({ isHideLoadMore: false })
    this.getNextPage()
  }
}

// Drop refresh
onPullDownRefresh: function() {
  this.refreshData()
}Copy the code

7. ModulartemplateThe use of

You can extract a template for a generic component

/** * 1. Set name to template * 2. The value passed by the component can be used directly with hidden="{{! isloading}}" */ <template name="loading"> <view class="weui-loadmore" hidden="{{! Isloading}}"> <view class="weui-loading"></view> <view class="weui-loadmore__tips"> Loading </view> </view> </template> // /** * use the generic template * 1. {{isloading}} ="{isloading}}" <import SRC =".. /template/loading.wxml"/> <template is="loading" data="{{isloading}}"></template>Copy the code

8. Obtain the UniqueID and openid of the user

UniqueID and OpenID are used to obtain sensitive user information. The returned data is encryptedData. To extract the information, the data needs to be decrypted

The official website provides the decryption algorithm, take the NodeJS version and modify it slightly

  • Download the Cryptojs and place it in the utils directory of your project
  • Create it in the utils directorydecode.jsWrite the following
//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: used CryptoJS Crypto. Util. Base64ToBytes base64 decoding ()
  var encryptedData = Crypto.util.base64ToBytes(encryptedData)
  var key = Crypto.util.base64ToBytes(this.sessionKey);
  var iv = Crypto.util.base64ToBytes(iv);

  // the algorithm for symmetric decryption is aes-128-cbc, and the data is filled with PKCS#7
  var mode = new Crypto.mode.CBC(Crypto.pad.pkcs7);

  try {
    / / decryption
    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 = WXBizDataCryptCopy the code
  • Decode. Js is introduced in app.js to decrypt the data

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

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

//app.js
App({
  onLaunch: function () {
    // Invoke the login interface
      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('Decrypted data:', data)
                }
              })
            },
            fail: function(res) {}})}})Copy the code

Note: The UniqueID of the wechat open platform account must have completed the developer qualification certification, otherwise the decrypted data does not have the UniqueID field

Decrypted data

Decrypted data

Because the company’s 1.0 requirements are relatively simple. It took two days from development to launch, and the review of small programs was surprisingly fast. Submitted in the afternoon less than two hours passed the audit. Seriously doubt they didn’t test 😂.