微信小程序开发笔记

最新推荐文章于 2024-06-15 20:00:00 发布

Kal-J

最新推荐文章于 2024-06-15 20:00:00 发布

阅读量2k

点赞数 9

文章标签：微信小程序笔记小程序

本文链接：https://blog.csdn.net/weixin_44649793/article/details/137612245

版权

微信小程序开发过程中的一些记录，包括最基本的unionId的获取以及在小程序内嵌的h5中使用微信jssdk的方法等。

1.获取unionId

1.1 unionId和openId说明

在小程序中，openID是小程序的普通用户的一个唯一的标识，只针对当前的小程序有效。公众号同理。
同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 UnionID 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的。

1.2 代码实现

前端通过wx.login() 获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台账号下的唯一标识（unionid，若当前小程序已绑定到微信开放平台账号）及本次登录的会话密钥（session_key）等。

wx.login({
      success: res => {
        //发送 res.code 到后台换取 openId, sessionKey, unionId
        wx.request({
          url: config.host + "/auth/login",
          data: {
            'code':res.code
          },
          method: 'POST',
          header: {
            'content-type': 'application/json' // 默认值
          },
          success:(result) => {
   			//成功
            wx.setStorageSync("loginFlag", true);
          },
          fail: (result) => {
            //失败
          }
        })
      }
    })

向服务器发送请求，并将code一起发送过去。

服务端调用code2Session接口

GET https://api.weixin.qq.com/sns/jscode2session?appid=XXX&secret=XXX&js_code=code&grant_type=authorization_code

返回参数

属性	类型	说明
session_key	string	会话密钥
unionid	string	用户在开放平台的唯一标识符，若当前小程序已绑定到微信开放平台账号下会返回，详见 UnionID 机制说明。
errmsg	string	错误信息
openid	string	用户唯一标识
errcode	int32	错误码

2.accessToken

access_token 是小程序全局唯一后台接口调用凭据，调用绝大多数后台接口时都需使用。开发者可以通过 getAccessToken 接口获取并进行妥善保存。

为了 access_token 的安全性，后端 API 不能直接在小程序内通过 wx.request 调用，即 api.weixin.qq.com 不能被配置为服务器域名。开发者应在后端服务器使用getAccessToken获取 access_token

GET https://api.weixin.qq.com/cgi-bin/token

3.h5引入微信jssdk

3.1 前端

1.引入jssdk

安装

npm install weixin-js-sdk --save

导入

import wx from 'weixin-js-sdk';

2.调用后端接口获取配置信息

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用。(同一个url仅需调用一次) 调用后端接口上送页面url。

async initWechatConfig() {
  try {
    let url = encodeURIComponent(window.location.href.split('#')[0]);
    let data = {
      url: url
    };
    const res = await this.$apis.initWechatConfig(data);
    if (res.code === 200) {
      this.wxTimestamp = res.data.timestamp;
      this.wxSignature = res.data.signature;
      this.wxNonceStr = res.data.nonceStr;
      this.wxAppId = res.data.appId;
    } else {
      this.$modal.alert({
        content: res.message
      });
    }
  } catch (e) {
    //ignore
  }
},

3.通过config接口注入权限验证配置

config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

wx.config({
  debug: false, // true是开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: this.wxAppId, // 必填，公众号的唯一标识
  timestamp: this.wxTimestamp, // 必填，签名的时间戳，后台生成的
  nonceStr: this.wxNonceStr, // 必填，签名的随机串，后台生成的
  signature: this.wxSignature, // 必填，签名，后台生成的
  jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表，scanQRCode是调用扫一扫二维码
});
wx.error(function(res) {
  this.locFailed = true;
});
wx.ready(function() {
  wx.getLocation({
    type: 'wgs84',
    success(res) {
      this.reverseGeo(res.longitude + ',' + res.latitude);
    },
    fail(err) {
      this.locFailed = true;
    },
    cancel(...args) {
      this.locFailed = true;
    }
  });
});

3.2 后端

1.获取jsapi_ticket

jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。

获取方式：

参考以下文档获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

2.生成签名

String url = HttpUtils.urlDecode(url); //3.1-2步骤中前端上送的url
String ticket = jsApiTicket; //3.2-1步骤中获取到的jsapi_ticket
String timestamp = Long.toString(System.currentTimeMillis() / 1000); //时间戳
String nonceStr = UUID.randomUUID().toString(); //随机字符串
String params = "jsapi_ticket=" + ticket + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url=" + url;
String signature;
try {
    MessageDigest crypt = MessageDigest.getInstance("SHA-1");
    crypt.reset();
    crypt.update(params.getBytes(StandardCharsets.UTF_8));
    Formatter formatter = new Formatter();
    for (byte b: crypt.digest()) {
        formatter.format("%02x", b);
    }
    signature = formatter.toString();
    formatter.close();
} catch (NoSuchAlgorithmException e) {
    signature = "";
}
//返回前端signature、timestamp、nonceStr、appId