前言

开发微信小程序时，基本上都要接入微信的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方法给页面调用分享功能。

页面调用方法

...

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: ''

}

})

上面代码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

}

})

}

结语

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