Краткое изложение разработки мини-программы WeChat

внешний интерфейс Апплет WeChat

Запишите некоторые проблемы, возникшие при разработке Мини-программы, и их решения.

Оригинальная ссылка

1. Версия для разработчиков WeChat 1.0.0

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

Решение

Сеть компании является общедоступной, и WeChat следует запретить.

Настройки -----> Настройки прокси -----> Не применять прокси, проверьте прямую сеть

2. Соответствующий сертификат сервера недействителен. Консольный ввод showRequestInfo() может получить более подробную информацию

Решение

Запрос данных апплета должен бытьhttps, Если нет сертификата для отладки, вы можете сначала выбрать не проверять имя домена безопасности в настройках проекта,TLSверсия иHTTPSСертификат

3. Установить класс по условию

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

// index == activeIndex classw为 "home-title active" 否则为 "home-title "

4. Вложение циклов

// 普通的单次循环
<text wx:for="{{titles}}" wx:key="{{index}}">{{item.name}}</text>

//循环嵌套时使用 wx:for-item="XXX" 
<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>

5. Передача параметров перехода на маршрутизатор и получение параметров

//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;

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

//classify 页面 获取参数
onLoad: function (opts) {
  console.log(opts.id)
  console.log(this.options.id)
}

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="{{!isloading}}">
    <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="{{isloading}}"></template>

8. Получите уникальный ID и openid пользователя

UniqueIDтак же какopenidПолучение конфиденциальной информации, связанной с пользователем, возвращаемые данныеencryptedDataЭто зашифрованные данные. Чтобы извлечь информацию, данные необходимо расшифровать.

Официальный сайт предоставляет алгоритм расшифровки, просто возьмите версию nodejs и немного ее модифицируйте.

  • скачатьcryptojsПоместите его в каталог utils проекта
  • Создайте новый в каталоге utilsdecode.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
  • Добавьте decode.js в app.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 на открытой платформе WeChat, необходимо пройти аутентификацию квалификации разработчика, в противном случае расшифрованные данные будут недоступны.UniqueIDполе

Расшифрованные данные

解密后数据
Расшифрованные данные

Потому что требования компании к версии 1.0 относительно просты. От разработки до запуска прошло два дня, и проверка апплета прошла на удивление быстро. Он был одобрен менее чем через два часа после отправки. Сильно сомневаюсь, что не проверяли.

Категории