VUE2.0 如何实现微信网页的分享

跟微信开发环境集成真是个苦差事，今天实现了网页的微信分享机制，坑比较多，写一写，大家方便避坑：

【1】先声明一点，微信认证之后才能开启这个功能，不管你接口显示是否已获得，没通过微信认证肯定分享不了

 【2】网页引入sdk包，可以动态引入，也可以直接写在index.html中，按自己需要来

【3】实现JS-SDK签名，这里有2个服务器缓存机制，一是token缓存，一是jsapi_ticket缓存，这里封装好一个服务器API，开放给前端调用即可，我这里实现的函数是initWXJSSDKConfigInfo，可以根据我的url返回签名。

我的例子里，用了appId做入参，不安全，可以用其它替换机制，这个函数返回完整的认证信息：

 微信开发环境提供了验证包，如果有问题，请先确保这里的签名是正确的。

【4】接下来是挂设函数锚点，包括wx.config、wx.ready、以及updateAppMessageShareData（转发给朋友）等函数，注意这里有个调用顺序，实现时务必注意:

wx.config拿签名信息去注册，成功后会调用wx.read的函数链，大致格式如下：

wx.ready(function() {


            const {title,desc,link,imgUrl} = wxShareConfig;

            wx.ready(function () {   //需在用户可能点击分享按钮前就先调用

                wx.updateAppMessageShareData({

                  title, // 分享标题

                  desc, // 分享描述

                  link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

                  imgUrl, // 分享图标

                  success: function () {

             
                  }

                })

              });

             

             

              wx.ready(function () {      //需在用户可能点击分享按钮前就先调用

                wx.updateTimelineShareData({

                  title, // 分享标题

                  link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

                  imgUrl, // 分享图标

                  success: function () {

                    // 设置成功

                  }

                })

              });

        });

详情可参见我的链接VUE 2.0 微信网页共享组件

【5】挂载和使用

 

【6】常见问题

1- 网上教程里有对authUrl做encodeUriComponent处理的，在我的这个例子里出错了，大家这个问题注意一下

2- 涉及到微信网页调试，微信调试环境大家可以用微信开发工具

 

希望能提供一些参考，大家少走弯路。