vue 中使用微信分享接口（简单实用）

前言

开发微信小程序时，基本上都要接入微信的SDK，而微信也提供了非常多的接口供我们去完成我们想要的功能。微信分享功能常常是我们在开发中常见的需求之一，本文将围绕微信分享接口使用展开，给自己以后碰到需求是查阅的同时，也希望对需要的朋友提供帮组。

封装微信分享接口

开始之前大家可以先读一读官方微信公众号的接入文档，毕竟官方的才是最权威的。

安装

 npm install weixin-js-sdk --save

引入

一般我会在src/common/js目录下新建weixinSDK.js(可凭个人习惯自行创建到相应位置)。weixinSDK.js用来封装我们的分享接口。

import {httpGet} from 'api/api' // 引入axios的http请求
import address from '../../api/apiAdd.js' // 引入请求的url路径
import wx from 'weixin-js-sdk' // 引入微信SDK
import {commFunc} from "./util";引入工具函数

权限验证

接入微信接口的最主要也是最重要一步步就是填写下面这些信息，填完这些信息之后，基本就好了。

/**
 * @param {data} 后端返回的基本配置数据
 * @param {param} 页面传过来的数据
 */
function initAPIs(data,param) {
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: data.appId, // 必填，公众号的唯一标识
    timestamp: data.timestamp, // 必填，生成签名的时间戳
    nonceStr: data.nonceStr, // 必填，生成签名的随机串
    signature: data.signature,// 必填，签名
    jsApiList: param.APIs // 必填，需要使用的JS接口列表
  })
  ...
}

上面这些信息通常是通过后端接口来获取的，向后端请求数据的方法如下。

注意address.weChatSignCheck是封装在apiAdd.js中的url, httpGet是api.js中的axios封装。

/**
 * @param {param} 页面传过来的数据
 */
function sign(param) {
  var pageUrl = window.location.href
  httpGet(address.weChatSignCheck + '?pageUrl=' +pageUrl).then((res) => {
  param.downloadUrl = res.data.downloadUrl
  initAPIs(res.data,param)
  })
}

这里要注意的就是url的问题，如果url没有正确传递，后端也会返回信息，但是签名信息会是错误的。完整url指的是：'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。可以通过location.href来获取。

注意： 如果你的vue项目，路由没有开启history模式,也就是你的url上面包含“#”，这个时候要从后端正确获取签名，就需要去掉url上#后面的字符。（url去掉'#'hash部分，可用location.href.split('#')[0]）

处理验证结果

这里通过ready接口处理成功验证。当然error接口是处理失败验证，这里可以不做处理，因为我在配置时候将debug设为false。

/**
 * @param {data} 后端返回的基本配置数据
 * @param {param} 页面传过来的数据
 */
function initAPIs(data,param) {
... 
 wx.ready(function () {
   if (commFunc.isNotEmpty(param.callback)) {
    share(param.callback)
   }
  })
}

上面代码中commFunc.isNotEmpty()方法主要用来判断前台页面参数param.callback是否为空，如果部位空，则将参数传进使用share()方法封装的分享模板中。

判断指定JS接口

checkJsApi接口是客户端6.0.2新引入的一个预留接口，主要同来判断当前客户端版本是否支持指定JS接口。

/**
 * @param {data} 后端返回的基本配置数据
 * @param {param} 页面传过来的数据
 */
function initAPIs(data,param) {
... 
wx.checkJsApi({
    jsApiList:param.APIs,
    success: function (res) {
      return res
    }
  })
}

分享内容封装

将要分享的内容分装成tempParam对象，然后传入分享方法里。

/**
 * @param {param} 页面传过来的数据
 */
export function share(param) {
  var title = param.title
  var imgUrl = param.imgUrl
  var description =param.description
  var url=param.url
  var successMethod = param.successMethod
  var tempParam = {
    'title': title, // 分享标题
    'desc': description, // 分享描述
    'link': url, // 分享链接
    'imgUrl': imgUrl, // 分享图标
    success: successMethod // 设置成功信息
  };

分享方法调用

根据要分享到具体哪里，调用不同的方法。

//分享给朋友
wx.onMenuShareAppMessage(tempParam);
//分享给朋友圈
wx.onMenuShareTimeline(tempParam);

需要注意的是，原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage接口，即将废弃。请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、wx.updateTimelineShareData接口。

//分享给朋友
wx.updateAppMessageShareData(tempParam);
//分享给朋友圈
wx.updateTimelineShareData(tempParam);

具体使用方法

/**
 * @param {param} 页面传过来的数据
 */
export function init(param) {
  if (!param) {
    return
  }
  sign(param)
}

这里使用init方法给页面调用分享功能。

页面调用方法

<template>
    ...
</template>
<script>
import { init } from 'common/js/weiXinSDK'
import wx from 'weixin-js-sdk'
let origin = window.location.origin
export default {
    mode: 'history',
    data() {
      return {
        imgUrl: '../../common/image/axa-logo.png'
      }
    },
    created() {
      init({
        APIs: ['hideOptionMenu', 'hideAllNonBaseMenuItem', 'showMenuItems', 'hideMenuItems', 'onMenuShareTimeline', 'onMenuShareAppMessage'],
        callback: {
          'title': '微信分享',
          'imgUrl': this.imgUrl,
          'description': '分享',
          'url': origin + '/#/produtList?isShare=1&openId=' + this.$store.state.openId,
          successMethod: ''
        }
      })
<script>

上面代码APIs根据自己的实际场景自行配置。

分享接口基本完成，分享接口的完整代码

weixinSDK.js完整代码奉上：

import {httpGet} from 'api/api'
import address from '../../api/apiAdd.js'
import wx from 'weixin-js-sdk'
import {commFunc} from "./util";

// 分享内容填充和调用分享方法
export function share(param) {
  var title = param.title
  var imgUrl = param.imgUrl
  var description =param.description
  var url=param.url
  var successMethod = param.successMethod
  var tempParam = {
    'title': title,
    'desc': description,
    'link': url,
    'imgUrl': imgUrl,
    success: successMethod
  };
  //分享给朋友
  wx.onMenuShareAppMessage(tempParam);
  //分享给朋友圈
  wx.onMenuShareTimeline(tempParam);
}

// 页面调用分享功能的方法
export function init(param) {
  if (!param) {
    return
  }
  sign(param)
}

// 向后端请求权限验证配置的基本数据
function sign(param) {
  var pageUrl = window.location.href
  httpGet(address.weChatSignCheck + '?pageUrl=' +pageUrl).then((res) => {
  param.downloadUrl = res.data.downloadUrl
  initAPIs(res.data,param)
  })
}
// 权限验证数据填充
function initAPIs(data,param) {
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: data.appId,
    timestamp: data.timestamp,
    nonceStr: data.nonceStr,
    signature: data.signature,
    jsApiList: param.APIs
  })
  // 验证成功后执行的方法
  wx.ready(function () {
   if (commFunc.isNotEmpty(param.callback)) {
     console.log(param.callback)
    share(param.callback)
   }
  })
  // 判断客户端是否支持指定js的接口
  wx.checkJsApi({
    jsApiList:param.APIs,
    success: function (res) {
      return res
    }
  })
}

结语

希望这篇文章可以让你少踩点坑，码字不易，如果喜欢，就给个❤❤吧。感谢你的支持。