url转码

官方文档描述: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

确认 url 是页面完整的 url(请在当前页面alert(location.href.split('#')[0]) 确认)，包括 'http(s)????/' 部分，以及 ’？’ 后面的 GET 参数部分, 但不包括 '#'hash 后面的部分

即获取 url 完成地址的方法为

let url = window.location.href.split('#')[0];

如果链接带有中文字符或者特殊符号, 前端需要使用 encodeURIComponent 编码, 同时后端需要配合解码

let url = encodeURIComponent(window.location.href.split('#')[0]);

config注入

官网文档描述: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#4

同一个 url 仅需调用一次，对于变化 url 的SPA的 web app 可在每次 url 变化时进行调用,

注意, 每次使用 jssdk 方法前都要先注入配置信息, 并且, 每使用一次, 就要注入 config 一次.

在 vue 里, 可以写在每次路由变化时

router.beforeEach((to, from, next) => {// 获取权限验证配置(签名) 后端返回 getConfig,  注意返回字段的大小写!
    let res
    // 注入配置信息
    wx.config({
      debug: false, // 调试开关
      appId: res.appId, // 必填，公众号的唯一标识
      timestamp:res.timestamp , // 必填，生成签名的时间戳
      nonceStr: res.nonceStr, // 必填，生成签名的随机串
      signature: res.signature,// 必填，签名
      jsApiList: ["updateAppMessageShareData","updateTimelineShareData"] // 必填，需要使用的 JS 接口列表
    });
    wx.ready(() => {// doSoming});
})

安全域名

一定要再三确认安全域名等微信公众号配置信息, 如分享链接 link 字段

很多时候的错误并不是前端方法或者 sdk 等问题, 而是后台有没有设置正确的安全域名和白名单等.

 wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
    imgUrl: '', // 分享图标
    success: function () {// 设置成功}
  })

常见错误

参考微信官网文档 - 附录5

地址: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

在开发过程遇到

• invalid signature
• the permission value is offline verifying
• permission denied

先参考文档, 排除基本因素, 还是不行, 再查找搜索引擎的答案.