Vue项目引入js-sdk，实现微信自定义分享

H5微信分享，就是在微信浏览器页面，点击右上角的三个小点点，底部弹窗选择分享方式。
默认的分享 标题是当前页面的标题，图标是默认图标，描述信息是当前页的链接地址

10101.png 0101.png

功能立项

假期结束之后，把功能实现跟产品详细解释了一番..嗯，挺复杂，那就暂时搁置吧，等有时间再弄...
7月份，炎炎三伏天悄悄来临，大家手头上的工作，似乎都有了那么一些轻松，时间多了一丝空空，自定义分享，安排起来。
官方文档，瞄起来，头疼头疼疼
微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

使用基本就是下面几个步骤

1111.png

前期准备

运维操作公众号后台，绑定安全域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
项目背景：创建两个项目，发布3个网站，
A是统一登录入口，单独的项目，单独的站点 xxx.aaa.com。
B和C是通用商城，共用同一个项目，根据不同的商城地址，动态配置商城的api请求地址等。
B是荣荣商城 ，发布单独站点 xxx.bbb.com，C是爱爱商城，发布单独站点 xxx.ccc.com。
A登录 通过后台对账号的匹配，返回相应的网站地址 xxx.bbb.com 或者 xxx.ccc.com，拼接登录返回的token，然后通过window.href链接到新网站地址，在通用商城项目中，区分商城，获取商城匹配，截取token拿到用户信息。
重点0：配置安全域名时 三个网站的域名都需要配置 ： xxx.aaa.com，xxx.bbb.com，xxx.ccc.com
重点1：公众号后台大概需要有两个地方配置域名，运维自己看着办

vue项目编码接入js-sdk，接口联调

引入js-sdk，有三种方式

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。
备注：支持使用 AMD/CMD 标准模块加载方法加载
前两个方式引入 在index.html文件中通过script标签引入
方式1：直接通过script 引用官网提供的链接地址

 <script
      type="text/javascript"
      src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"
    ></script>

方式2：把js-sdk下载，保存到本地 static目录中，然后引用本地js
保存js文件的步骤：打开js-sdk 提供的js链接地址，把内容copy到本地新建的js文件中，weixin-1.6.0.js

 <script type="text/javascript" src="./static/js/weixin-1.6.0.js"></script>

方式3：通过npm 安装js-sdk

npm install weixin-js-sdk
在需要分享的页面中引入
import wx from 'weixin-js-sdk'

在每个需要使用JS-SDK的页面通过config注入权限验证配置

注意：是每个页面都要配置config。因为vue单页面SPA应用，当每次url变化的时候，也需要进行调用配置config

具体实现代码

后端定义接口，前端传递当前路径的URL地址，给后端进行加密，后端返回初始化配置需要的相关参数
tips：因为vue-router默认使用的hash模式，所以链接地址中包含#，在传递给后端进行加密的url路径地址，需要对# 进行截取
url: location.href.split('#')[0]

项目入口js文件中，导入WeiXinUtils，初始化微信js-sdk配置

const Vue = require('vue')
import App from './App'
import store from './store'
import router from './router'
const Vuex = require('vuex')
import VueLazyLoad from 'vue-lazyload'
import wxutil from './utils/WeiXinUtils'


//注册到vue原型上
Vue.use(VueLazyLoad)


// 微信分享配置初始化
wxutil.init();

Vue.use(Vuex)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

WeiXinUtils.js 封装微信分享，利用router全局后置钩子函数afterEach，保证每个URL切换时都能执行接口调用 ，配置config 注入配置，在回调函数wx.ready中 配置分享参数

import userApi from "../js/api/users"
import router from '../router'


//判断是否是 微信浏览器
function isWxBrowser() {
  var ua = navigator.userAgent.toLowerCase();
  let isWx = ua.match(/MicroMessenger/i) == "micromessenger";
  if (!isWx) {
    return false;
  } else {
    let isWxWork = ua.match(/WxWork/i) == "wxwork";
    if (isWxWork) {
      return false;
    } else {
      return true;
    }
  }
}


const wxutil = { 
  init(){
    router.afterEach((to, from) => {//router全局后置钩子函数
      if (isWxBrowser()) {//是微信浏览器
        userApi.getWechatShare({ //调用后端接口
          url: location.href.split('#')[0]
        }).then(res => {
  
          if (res.resCode == 0) {
            let data = res.resData;
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: data.appId, // 必填，公众号的唯一标识
              timestamp: data.timestamp, // 必填，生成签名的时间戳
              nonceStr: data.nonceStr, // 必填，生成签名的随机串
              signature: data.signature,// 必填，签名
              jsApiList: ['checkJsApi','updateAppMessageShareData','updateTimelineShareData'] // 必填，需要使用的JS接口列表，目前只用到分享
            });
  
            wx.ready(function () {   //需在用户可能点击分享按钮前就先调用  
              // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
              wx.updateAppMessageShareData({ 
                title: data.titile, // 分享标题
                desc: data.description, // 分享描述
                link: data.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致    http://test-logon.51czt.com
                imgUrl: data.logoPath, // 分享图标
                success: function () {
  
                }
              });
  
              wx.updateTimelineShareData({ 
                title: data.titile, // 分享标题
                link: data.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: data.logoPath, // 分享图标
                success: function () {
                  
                }
              });
              
            });
  
            wx.error(function(res){
              // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
              console.log("错误：" + res);
            });
  
          }
  
        }).catch(e => {
  
        });

      }
    })

  },
}; 
export default wxutil;

最终实现效果

可以自定义分享标题，分享描述信息，分享图标。图标的大小有限制，似乎是最大32k

2222.png

感悟

遇到问题不要怕，先保证安全域名配置正确，然后保证后台签名加密正确
前后端调不通，一般都是参数的问题，尽量从后台找问题，签名 加密等
签名的时效是有限制的，一段时间会过期