vue 微信分享代码封装及Spa分享ios坑总结

大概是2月份那会项目的中需求吧。分享商品详情以及拼团成功后需要分享商品链接。

大概流程是这样的

1. 引入微信的 weixin-js-sdk (可以直接npm安装也可以直接引入js链接)
   import wx from 'weixin-js-sdk';
2. 通过sdk的config接口 注入权限验证配置(里头的appid,时间戳，随机串和签名需要后台处理后返回)

                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: item.AppId, // 必填，公众号的唯一标识
                        timestamp: item.Timestamp, // 必填，生成签名的时间戳   
                        nonceStr: item.NonceStr, // 必填，生成签名的随机串
                        signature: item.Signature, // 必填，签名，见附录1
                        jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

                    });

3. config验证成功后,通过sdk的ready函数里调用onMenuShareTimeline(朋友圈)和onMenuShareAppMessage（微信好友）
   参考下面的_initShare方法。参数分别是分享标题、分享链接、图片、描述

  //设置分享
        _initShare(shareTitle, url, shareImg, shareDesc) {
            wx.ready(() => {
                wx.onMenuShareTimeline({
                    title: shareTitle, // 分享标题
                    link: url.timeline, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: shareImg, // 分享图标
                    success: function () {
                        // 用户确认分享后执行的回调函数
                        Toast('分享成功！！！');
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                        Toast('取消分享！！！');
                    }
                });

                wx.onMenuShareAppMessage({
                    title: shareTitle, // 分享标题
                    desc: shareDesc, // 分享描述
                    link: url.friend, 
                    imgUrl: shareImg, // 分享图标
                    type: "", // 分享类型,music、video或link，不填默认为link
                    dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
                    success: function () {
                        // 用户确认分享后执行的回调函数
                        Toast('分享成功！！！');
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                        Toast('取消分享！！！');
                    }
                });
            })


        }

注：上面代码只贴了核心的，有的变量啊什么的没贴全，自己稍微修改下就行了。思路对了就ok~

---

这里有个关于spa项目页面链接带‘#’的ios微信分享深坑～
先贴下来自官方的文档说明

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）

原来，SPA中，微信只记录了一开始进应用的第一个链接，并用它去参与生成签名，而不是用当前的URL（这个解释了为什么使用location.href首次进入页面是报错的，而换成第一个URL却是对的）；
而刷新一次，当前列表页面的链接发生了改变，变成了重定向之后的链接，结果就是对的了。

这个坑爹的问题在小程序开发工具里头一直测不出来，安卓也没问题，唯独ios.

后来就是参考网上的在首页和子页面的mounted里加上
!window.initUrl && (window.initUrl = window.location.href)
即可，即 将当前URL挂载在全局变量中

在微信初始化config请求接口的时候，所传的url参数就用window.initUrl来初始化，安卓的话还是用location.href

---

就这样啦～做个记录，以后有需要就能想起来。也供大家参考。之前还看到过在路由的beforeEach里头路径初始化时做处理，但是没弄成功，如果有更方便的方法，可以分享一波哈。
路过的顺便点个赞吧;-）
欢迎加微信交流(记得写备注哦)
benny.png