微信开发手册

一 微信扫码H5页面播放视频/音频

首先，微信是不支持视频自动播放的。

H5页面通过微信访问时，当播放H5页面的视频/音频时，只有在微信jssdk加载完毕之后在再去监听onplay/onloadedmetadata/onend等事件才会生效，加载完再前不生效。
所以你有音视频的事件监听并且想支持微信内打开页面，写代码时就需要注意：

• 引入微信jssdk
• 在jssdk加载完毕之后在处理事件

二 微信自定义分享形式

当你把一个页面地址分享给微信好友或者群聊的时候，可以自定义在微信聊天显示的内容，比如我们常见的卡片形式而不是一个链接文本。

官方文档： https://developers.weixin.qq....

准备

1. 需要一个企业微信公众号。个人公众号上很多功能不开放。
2. 设置 JS 接口安全域名：在该域名下调用微信sdk接口

3. 需要用到微信提供的JS-SDK：微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

正式开始

1. 引入jssdk:

   // index.html
   <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

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

// 引入jssdk之后，全局变量中会有wx
// wx sdk 权限验证配置
wx.config({
    // 开启调试模式,调用的所有api的返回值会在客户端alert出来
    debug: false, 
    // 必填，公众号的唯一标识
    appId: wxdata.appid, 
    // 必填，生成签名的时间戳
    timestamp: wxdata.timestamp, 
    // 必填，生成签名的随机串
    nonceStr: wxdata.noncestr, 
    // 必填，签名，见附录1
    signature: wxdata.signature, 
    // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    jsApiList: [
        "onMenuShareTimeline",
        "onMenuShareAppMessage",
        "updateAppMessageShareData",
        "updateTimelineShareData",
    ] 
});
// sdk 权限验证配置成功回调
wx.ready(function() {
    console.log('wx.ready success');
})
// sdk 权限验证配置失败回调
wx.error(function(res) {
    console.log('wx.error', res);
});

3. 服务端生成签名（为了安全起见，需要在服务端生成）,获取步骤2中的wxdata数据:

const sha1 = require('sha1'); 

async function getWXConfig() {
    let [appid, appsecret] = ['your appid', 'your appsecret']; // 公众号平台获取此信息
    // 获取 access_token
    const accessTokenUrl = 
  `https://api.weixin.qq.com/cgi-bin/token?grant_type=${'client_credential'}&appid=${appid}&secret=${appsecret}`;
    const r = await axios.get(accessTokenUrl);
    const access_token = r.data;

    // 获取 jsapi_ticket
    const ticketUrl =
        `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi`;
    const res = await axios.get(ticketUrl);
    let { errcode, ticket, expires_in } = res.data;

    const LINK = 'xx.xx.com'; 
  // 在上面设置 JS 接口安全域名时的参数 //当然也可以在前端定义此参数进行传递
    const timestamp = +new Date(); // 签名的时间戳
    const noncestr = time + 's'; // 签名的随机串
    const url = LINK;

    const encodeStr = 
  `jsapi_ticket=${ticket}&noncestr=${noncestr}&timestamp=${timestamp}&url=${url}`;
    // 生成签名
    const signature = sha1(encodeStr);

    return {
        appid,
        signature,
        noncestr,
        timestamp,
        url,
    }
}

4. 调用微信 sdk 能力 (这里主要用到了 分享给朋友、分享到朋友圈等接口)

参考

• 手把手教你如何自定义微信分享卡片内容

三 生成微信小程序二维码

介绍

调用微信API生成小程序二维码。支持定向到特定页面和传入参数。但是这个接口应该在服务端调用，目前调用返回的数据前端还无法处理！
官方介绍>>

使用方式

文档

调用方式：

POST https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN

下面是从官方文档复制而来，具体以官方为准。

属性	类型	默认值	必填	说明
access_token	string		是	接口调用凭证
scene	string		是	最大32个可见字符，只支持数字，大小写英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~，其它字符请自行编码为合法字符（因不支持%，中文无法使用 urlencode 处理，请使用其他编码方式）
page	string	主页	否	必须是已经发布的小程序存在的页面（否则报错），例如 pages/index/index, 根路径前不要填加 /,不能携带参数（参数请放在scene字段里），如果不填写这个字段，默认跳主页面
width	number	430	否	二维码的宽度，单位 px，最小 280px，最大 1280px
auto_color	boolean	false	否	自动配置线条颜色，如果颜色依然是黑色，则说明不建议配置主色调，默认 false
line_color	Object	{"r":0,"g":0,"b":0}	否	auto_color 为 false 时生效，使用 rgb 设置颜色 例如 {"r":"xxx","g":"xxx","b":"xxx"} 十进制表示
is_hyaline	boolean	false	否	是否需要透明底色，为 true 时，生成透明底色的小程序

注意事项

• 通常我们只需要关注 access_token、page、scene
• scene 用于传递参数，我们平时用到的自字符一般不需要自行编码，微信API会进行编码。格式：u=123&m=456 相当于 pages/xxx/index?scene=(encodeURLComponent(u=123&m=456)) 。

• scene 有长度限制,为了避免超出长度限制，建议压缩参数内容： 

  • 使用位置标记代替kv, 比如： userId=${userId}&missionId=${missionId}&idSign=${idSign(32位)} 变成 ${userId}_${missionId} _${idSign(6位)}
  • 传入一个凭证，到达小程序之后通过这个凭证再把写一个接口参数查询出来
• page: 小程序页面路径，根路径前不要填加 /,不能携带参数

Buffer文件处理

由于小程序返回的是buffer文件，所以想要拿到前端可用的图片文件还需要额外处理。
下面是在node中的处理：上传buffer文件，拿到文件地址。

const bufferArrary = [137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,1,0,0,0,1,1,3,0,0,0,37,219,86,202,0,0,0,6,80,76,84,69,0,0,255,128,128,128,76,108,191,213,0,0,0,9,112,72,89,115,0,0,14,196,0,0,14,196,1,149,43,14,27,0,0,0,10,73,68,65,84,8,153,99,96,0,0,0,2,0,1,244,113,100,166,0,0,0,0,73,69,78,68,174,66,96,130];
const array = Uint8Array.from(bufferArrary);
const blob = new Blob([array], {type: 'image/png'});
const form = new FormData();
form.append('file', blob, '1.png');
axios.post('http://localhost:7787/files', form);

小程序端使用

小程序端想要拿到参数需要解析query里面的scene。

参数接收

解析storeNo：

onLoad(options) {
  const scene = decodeURIComponent(options.scene);
  const storeNo = scene.split('=')[1]
  if (storeNo) {
    console.log(storeNo); 
  } else {
    console.error('生成二维码出现问题');
  }
},

多条参数

const scene = decodeURIComponent(options.scene)
scene.split('&').forEach((item) => {
  const key = item.split("=")[0]
  this.setData({
    [key]: item.split('=')[1]
  })
})

工具

微信内置浏览器清除缓存

安卓

一、随便打开一个聊天窗口，输入 debugx5.qq.com 并发送。
二、点击自己发送的地址，打开 debug 调试页面。

在这里插入图片描述
拉到调试页面的最底端，勾选上所有的缓存项目，点击清除。

苹果

打开【设置】 →【通用】,→【清理微信缓存】，最后【退出登录】账号，完成。