Vue中使用微信JSSDK进行分享

时间 2019-12-08

标签 vue 使用微信 jssdk 进行分享繁體版

原文原文链接

要在vue里使用微信分享须要先后端一块儿配合来作，大体分为如下几步，在开发以前须要在登陆公众号作一些绑定域名等一系列的操做，这个是大前提我会按照
(1)公众号配置
(2)后端准备工做及开发（本人是前端开发，只简单介绍后端与微信的大体接入过程以及在与后端交互的时候出现的问题，代码就不细说了）
(3)前端准备工做及开发
这个顺序来进行书写，省得看上去很乱，由于在配置完公众号后，前端的不少工做须要后端跟微信请求完获取到参数提供给前端，前端才能开始作，话很少说，开整

1.登陆公众号进行域名绑定
mp.weixin.qq.com/ 进入后台绑定域名，这个域名必须是你在微信打开的连接的host，这是必须的如图配置：

下载微信官方的代码示例，里面有具体的对接代码连接： demo.open.weixin.qq.com/jssdk/sampl…
微信官方提醒：连接中包含php、java、nodejs以及python的示例代码供第三方参考，第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制
步骤：
(1) 写一个接收前端传递url参数的方法(这个url就是前端须要分享的url)
(2) 按照官方代码示例进行签名，注意后台签名时候这里参数名必须所有小写，且必须有序，当时就是由于粗心这里有一个参数nonce_str里面的S大写了，一直报错
我跟后端交互大概就这两步，若是不全后面我再补充

1.引入微信官方的jssdk
两种方式：
(1) 在须要调用JS接口的页面引入以下JS文件,(支持https)：
http://res.wx.qq.com/open/js/jweixin-1.4.0.js
如需进一步提高服务稳定性，当上述资源不可访问时，可改访问：
http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https） (2)npm install --save-dev weixin-js-sdk
2.建立一个公共的js，用来初始化微信分享的一些操做，个人js名字为wxapi.js，按照大家习惯本身起名字

import {getBaseUrl} from './api'
    const wxApi = {
      /**
      * [wxRegister 微信Api初始化]
      * @param  {Function} callback [ready回调函数]
      */
      wxRegister (url,sys) {
        if(sys == "ios"){
          url = window.entryUrl;
        }
        getBaseUrl('/wechatshare?url='+url).then(res=>{
            wx.config({
                //在测试的时候必定要开启这个 debug: true 只要有报错就必定会弹出来，
                debug: false, // 开启调试模式
                appId: res.appId, // 必填，公众号的惟一标识
                timestamp: res.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.nonceStr, // 必填，生成签名的随机串
                signature: res.signature, // 必填，签名，见附录1
                jsApiList: [
                  'checkJsApi',//必填，检测api是否有权限
                  //自定义“分享给朋友”及“分享到QQ”按钮的分享内容
                  'updateAppMessageShareData',
                  //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
                  'updateTimelineShareData'
                ] // 必填，须要使用的JS接口列表，全部JS接口列表见附录2
            })
        }),
        wx.ready(() => {
            //必定要保证分享的url和传递给后端url是一致的，若是路由发生了变化必定要获取当前的路由
          let links = location.href.split('#')[0];
          let optionApp = {
            title: '***', // 分享标题, 请自行替换
            desc:'***',
            link: links, 
            imgUrl: 'logo.png', // 分享图标, 请自行替换，须要绝对路径
          }
          let optionTimeline = {
            title: '***', // 分享标题, 请自行替换
            link: links, // 分享连接，根据自身项目决定是否须要split
            imgUrl: 'logo.png', // 分享图标, 请自行替换，须要绝对路径
            desc:'***'
          }
          // 微信分享给朋友
          wx.updateAppMessageShareData({
            title: optionApp.title, // 分享标题
            link: optionApp.link, // 分享连接
            imgUrl: optionApp.imgUrl, // 分享图标
            desc: optionApp.desc, // 分享图标
            success () {
            },
            cancel () {
              // 用户取消分享后执行的回调函数
            },fail(){
              // alert("分享失败！"+JSON.stringify(s));
            }
          }),
          // 微信分享到朋友圈
          wx.updateTimelineShareData({
            title: optionTimeline.title, // 分享标题
            link: optionTimeline.link, // 分享连接
            imgUrl: optionTimeline.imgUrl, // 分享图标
            desc:optionTimeline.desc,
            success () {
              // 用户成功分享后执行的回调函数
              
            },
            cancel () {
              // 用户取消分享后执行的回调函数
            },fail(){
              // alert(JSON.stringify(msg));
            }
          })
        })
        wx.error(function(){
          // alert(JSON.stringify(e)+'--------error')
            // config信息验证失败会执行error函数，如签名过时致使验证失败，具体错误信息能够打开config的debug模式查看，也能够在返回的res参数中查看，对于SPA能够在这里更新签名。
          });
      },
    }
    export default wxApi
复制代码

3.在须要分享的界面引入

import wxapi from '../request/wxapi'
    //在method定义一个方法里进行验证，在mounted里面调用
        methods: {
            //分享前的验证签名，由于Android和IOS在进入微信后路由变化的逻辑是不一样的，因此要判断一下，IOS只能分享第一次进来时候的路由地址（IOS待验证，后面来填坑）
            checkSign(){
                // window.__wxjs_is_wkwebview为true 时 为 IOS 设备 false时 为 安卓 设备
                if (window.__wxjs_is_wkwebview) {  // IOS
                if (window.entryUrl == '' || window.entryUrl == undefined) {
                    var url = location.href.split('#')[0]
                    window.entryUrl = url    // 将后面的参数去除
                }
                    wxapi.wxRegister(location.href.split('#')[0],'ios');
                }else {       // 安卓
                setTimeout(function () {
                    wxapi.wxRegister(location.href.split('#')[0],'android');
                }, 500);
                }
            },
        },
        mounted() {
            //听说Android手机端会有延时，就加了500的延时，看状况大家加不加均可以
            setTimeout(()=>{
                this.checkSign();
            },500)
        }
复制代码

其实到这里基本就完事儿了，能够根据微信提供的debug来进行跟踪我出现过两种错误
(1) invaild singatrue，这个错误是因为后端签名的时候把noncestr 里面的S写成大写了，通常invaild singatrue错误要不就是后端签名错误，要不就是你给后端的url与你当前的路由不匹配
使用微信自带的调试工具能够很好的解决url与你当前的路由不匹配的问题
签名错误可使用微信提供的在线签名工具生成看跟后端返回的是否匹配
(2) config:ok 可是没法调起微信的分享界面，其实最终提示config:ok的时候就说明你已经分享成功了，若是提示config:ok的话，你认为还没调起微信的分享界面的时候看下下面的话，但愿对你有所帮助！php

另，在开发过程当中一直觉得是本身加一个按钮来调起微信的分享，其实上面作的这么多操做最终只是重写微信webview里右上角三个点，本身重写的不能调起微信的分享界面，谨记！