wjeymiantan 2019-11-07
开发微信小程序时,基本上都要接入微信的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()
方法封装的分享模板中。
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 } }) }
希望这篇文章可以让你少踩点坑,码字不易,如果喜欢,就给个❤❤吧。感谢你的支持。