聊一聊微信公众号分享以及打开app的经验

一、 分享

公众号文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#111
第一步：当然是将js接口安全域名放到公众平台( https://mp.weixin.qq.com)里面；
第二部：引入微信人家自己封装的js方法(里面包括分享、支付等等...);

1. 如果你是使用uniapp最好使用npm方式引入，uniapp官方插件链接：https://ask.dcloud.net.cn/article/35380
   需要在根目录中走一下 npm init -y，这一步是将package.json安装到项目中
   然后进行安装 npm install jweixin-module --save
   然后你会在package.json中看到这个插件已安装；
   
   image.png

ok前提条件已经配置完毕！
接下来就开始对接，对接的过程中是需要后端配合的，因为微信官方的一些安全策略，需要将某些接口必须放到后台来执行，然后在返给前端；

针对下面方法个人总结注意事项：

1. jsApiList:[] 里面必须要注入你所使用的的api；
2. shareData 里面的参数是后台返给你的且必须是后台返回；
3. 分享时候的图片也一定要放到配置的安全域名下；

// 下面是使用方法，最好是创建一个公共的js文件 如 wxShare.js 
import wx from 'weixin-js-sdk'; // 引用
const APPID = 'xxx'; // 这里是你公众号的appid
const wxShare = (shareData) => {
    wx.config({
        debug: false, 
        appId: APPID, 
        timestamp: shareData.timestamp, 
        nonceStr: shareData.nonceStr, 
        signature: shareData.signature,
        // 这里一定要将你所使用到的api提前注入进来
        jsApiList: [
            'updateAppMessageShareData',
            'updateTimelineShareData',
            'onMenuShareAppMessage',
            'chooseWXPay',
        ]
    });
    wx.checkJsApi({
        // 这里来检查你注入的api是否能正常使用(需要提前开启debug：true)
        jsApiList: [
            'chooseImage',
            'updateAppMessageShareData',
            'onMenuShareAppMessage',
            'chooseWXPay',
        ],
        success: function(res) {
            console.log(res, 'checkJsApi');
        },
    });
    wx.ready(function() {
        //分享到朋友圈”及“分享到QQ空间”
        wx.updateTimelineShareData({
            title: '', // 分享标题
            link:'', // 分享链接 
            imgUrl: '', // 分享图标
            success: function(res) {
                // 设置成功
                console.log('分享朋友圈成功返回的信息为:', res);
            },
        });
        //“分享给朋友”及“分享到QQ”
        wx.updateAppMessageShareData({
            title: '',  // 分享标题
            desc:'',// 分享描述
            link: '', // 分享链接 
            imgUrl: '', // 分享图标
            success: function(res) {
                console.log('分享朋友成功返回的信息为:', res);
            },
        });
    });
    wx.error(function(res) {
        console.log('验证失败返回的信息:', res);
    });
};

export const share = () =>{
    let broser = window.navigator.userAgent.toLowerCase(); // 判断是否在微信中打开
    if (broser.match(/MicroMessenger/i) == 'micromessenger') {
        // 在微信中打开的
        try {
        // 要获取分享时候的参数，就要将当前页面#前面的域名入参给到后端，后端再根据你给的参数去调用微信的api
            let url = encodeURIComponent(window.location.href.split('#')[0]);
            getSignature({ // getSignature 这个接口就是你与后端协商好的接口，里面包含分享时候 所用到的参数
                url: url,
            }).then(res => {
                wxShare(res); // 在这里调用 上面定义好的方法
            });
        } catch (error) {
            console.log(error);
        }
    } else {
        // 不在微信中 给出相应的提示
        uni.showToast({
            title: '请使用微信浏览器打开',
            icon: 'none',
        });
    }
}



// ----------------分割线---------------

// 在页面中去使用 如 index.vue 中