jssdk使用注意事项onMenuShareAppMessage分享无效为例

jssdk使用注意事项onMenuShareAppMessage分享无效为例

jssdk用起来是很容易的微信都已经封装好了直接拿过来用就可以，如果不出问题怎么用都好用一旦出了问题找起来很麻烦。

最近做项目页面分享刷新的时候无效找了好长时间才发现犯了一个低级错误，决定整理下jssdk需要注意的地方。

对于微信jssdk 做过单页面应用的同学可能了解更深一些，前后端混合开发很有可能后台的朋友就代替写了，看了本篇文章你会理解jssdk的基本应用。

1 、html页面配置

页面上的配置分为几步

载入js-->配置config->通过ready应用具有的微信接口

载入js

一般都是用cdn（稳定，快速）

载入config

wx.config({
        debug: true,
        //调试模式开启后微信环境运行会以alert的形式汇报信息
        appId: '{$jssdk.appId}',
        //微信公众号的appid
        timestamp: {$jssdk.timestamp},
        //时间戳
        nonceStr: '{$jssdk.nonceStr}',
        //随机字符串
        signature: '{$jssdk.signature}',
        //签名  这个相对来说复杂一些 jsapiTicket + noncestr + timestamp + url
        //生成的jsapiTicket 又是通过accessToken去微信接口换取的
        //其实上面这些都不用太在意只是简易的注释下让小伙伴们了解下是什么东西，这些参数都是后台同学去生成好给过来
        jsApiList: [
        "onMenuShareTimeline",
        "onMenuShareAppMessage",
       //需要哪个接口就添加哪个接口
    ]
    });

这里需要注意一点就是url 单页面应用每次路由变化需要重新生成这些签名给到前端，安卓没有问题，ios每次切换路由但是页面的链接没有变化，这里的处理方式是页面打开后存储当前url到一个全局变量判断环境是ios后每次生成参数时传递给后台都用这个全局变量。

具体代码就不写了这个网上有很多而且也比较容易检查出来。

载入通过ready应用具有的微信接口

wx.ready(function () {
        wx.onMenuShareAppMessage({
            title: share_title,
            desc: share_desc,
            link: share_link,
            imgUrl: share_imgUrl,
            success: function (res) { sharkAdd(res) }
        });
        wx.onMenuShareTimeline({
            title: share_title,
            link: share_link,
            imgUrl: share_imgUrl,
            success: function (res) { sharkAdd(res) }
        });
    });

这里没啥要注意的，有些页面分享的title 是异步请求回来的，异步回调后直接重新这一堆代码就行简单粗暴

具体用法就是上面这些，如果不出意外那基本已经可以实现功能了，其他的微信接口也非常简单而且文档中描述的也很明白

2 、配置公众号

如果一些分享之类的接口不可用需要检测公众号上配置是否正确

image.png

业务域名：这个不是很重要 如果没有填写，在页面中一些输入框会提示安全信息，
js接口安全域名：这个很重要如果填写不正确页面中的jssdk无法使用例如你页面是 www.jsysuo.com/index.html那么安全域名要填写www.jsysuo.com
网页授权域名：这个也很重要没有这个 不能使用微信登录

 

image.png

 

ip白名单这个也需要配置一下 服务器 获取 access_token 时需要

如果这些都做了基本上可以使用了

3 、升级https

有时开发时是http 正式环境是https 发布后你会发现页面报了好多错误不能正常运行
简单的很
http://res.wx.qq.com/open/js/jweixin-1.0.0.js 换成https://res.wx.qq.com/open/js/jweixin-1.0.0.js
有可能这一步你就搞定了所有

但你页面如果有微信支付 记得告诉后台同学或是运维同学要去微信商户后台的支付授权目录改一下，那里的配置要和项目链接相同包括协议

4 、wx.ready运行了但是内部的注册接口没有运行

有的时候就是这样很奇妙，没有问题一直都好好的忽然出现问题找起来很麻烦。
我碰到的问题是使用微信分享onMenuShareAppMessage 参数都配好了就是不可以 debug也没有报错
找了好一会才发现的
onMenuShareAppMessage中link 参数要完整
例如 你的网站 www.jsysuo.com 要写完整 http://www.jsysuo.com/
总之写代码要细心老铁们