微信内H5跳转小程序

官方文档：developers.weixin.qq.com/doc/offiacc…

1. 绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

2. 引入JS

在需要调用JS接口的页面引入如下JS文件：res.wx.qq.com/open/js/jwe… （支持https）如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：res2.wx.qq.com/open/js/jwe… （支持https）

3. HTML

<wx-open-launch-weapp id="launch-btn" username="小程序原始ID" path="跳转的小程序页面，需要加上.html">
  <script type="text/wxtag-template">
    <style>.wx-btn {display: block;width: 188px;height: 42px;}</style>
    <button class="wx-btn">跳转小程序</button>
  </script>
</wx-open-launch-weapp>

Note：这里记几个坑

<template></template>标签在react里面识别不了，需要改成<script type="text/wxtag-template"></script>标签
样式在这里不起作用，需要在标签内定义
直接添加在页面中可能不起显示，可以通过渲染的方式添加
标签在浏览器中不显示，需要通过微信打开，微信的浏览器才会显示

4. Config

wx.config({
  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  appId: '', // 必填，公众号Id
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名，https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
  jsApiList: ['chooseImage'], // 必填，需要使用的JS接口列表，不能写[]
  openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

Note：这里记一个坑

jsApiList: ['']，一开始这样写，iOS可以正常显示，但是Android一直报错：invalid url domain，这个错很有误导性，一直以为是域名或者页面url的问题，怎么改都不行，后来改成jsApiList: ['chooseImage']就好了，神坑，也怪自己省事，自找麻烦

5. 签名

获取access_token

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

获取jsapi_ticket

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

生成签名

签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。即signature=sha1(string1)。

jsapi_ticket=jsapi_ticket&noncestr=noncestr&timestamp=timestamp&url=url

注意事项:

签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。

签名用的url必须是调用JS接口页面的完整URL。

出于安全考虑，开发者必须在服务器端实现签名的逻辑。

Nodejs签名代码

/**
 * 获取签名
 * @returns:
 * 1. appId 必填，公众号的唯一标识
 * 2. timestamp 必填，生成签名的时间戳
 * 3. nonceStr 必填，生成签名的随机串
 * 4. signature 必填，签名
 */
const crypto = require('crypto');

// sha1加密
function sha1(str) {
  let shasum = crypto.createHash("sha1");
  shasum.update(str);
  str = shasum.digest("hex");
  return str;
}

/**
 * 对参数对象进行字典排序
 */
function raw(args) {
  let keys = Object.keys(args);
  keys = keys.sort();
  const newArgs = {};
  keys.forEach(function(key) {
    newArgs[key.toLowerCase()] = args[key];
  });

  let string = '';
  for (let k in newArgs) {
    string += '&' + k + '=' + newArgs[k];
  }
  string = string.substr(1);
  return string;
}


function getSign(params) {

  /**
   * 签名算法
   * 签名生成规则如下：
   * 参与签名的字段包括noncestr（ 随机字符串）,
   * 有效的jsapi_ticket, timestamp（ 时间戳）,
   * url（ 当前网页的URL， 不包含# 及其后面部分）。
   * 对所有待签名参数按照字段名的ASCII 码从小到大排序（ 字典序） 后，
   *  使用URL键值对的格式（ 即key1 = value1 & key2 = value2…） 拼接成字符串string1。
   * 这里需要注意的是所有参数名均为小写字符。 对string1作sha1加密， 字段名和字段值都采用原始值， 不进行URL 转义。
   */
  const ret = {
    jsapi_ticket: params.ticket,
    nonceStr: Math.random().toString(36).substr(2, 15),
    timestamp: new Date().getTime(),
    url: params.url
  };
  const string = raw(ret);
  ret.signature = sha1(string);
  ret.appId = params.appId;
  return ret;
};