【从零开始搭建uniapp开发框架】（十二）—— 微信H5自定义分享和扫码功能封装
框架开源地址：https://gitee.com/yunhaotian/uniapp_mobileFrame
实现微信公众号自定义分享和扫码功能需要引入微信JSSDK
npm安装微信JS-SDK
npm install jweixin-module --save
通过网址下载：
https://unpkg.com/browse/jweixin-module@1.6.0/lib/index.js
安装完后在 node_modules 文件夹下会出现 jweixin-module 文件夹
需要用到微信JSSDK页面，引入微信JSSDK
//微信js-sdk引入
var jweixin = require('jweixin-module')
页面内调用微信扫码功能示例：
html代码：
<view @click="scan()">扫一扫</view>
JS代码：
scan(){
let that=this; //如果要把扫码结果赋值给页面定义变量，要使用that.变量名
jweixin.scanQRCode({
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
if(res.resultStr.indexOf(',') > 0){
//条形码时返回的格式类似为【code128,123456789】
var dealserialNumber=res.resultStr.split(',')[1];
dealserialNumber = dealserialNumber.replace(/[^a-z\d]/ig, "");//处理条形码扫描的字符
alert(dealserialNumber);
//location.href='接收结果页面='+dealserialNumber;//扫描结果传递到的处理页面
}
else{
//二维码时
alert(res.resultStr);
//location.href='接收结果页面='+res.resultStr;//扫描结果传递到的处理页面
}
}
});
},
接下来封装微信JSSDK调用方法：
在common文件夹下新增一个 sju.weixin.js 文件
sju.weixin.js源码：
import ajax from '@/common/sju.ajax.js'
//微信js-sdk引入
var jweixin = require('jweixin-module')
let weixin = {
apiUrl: ajax.apiUrl,
/**
* @description 获取微信jsconfig参数
* <br/>success回调方法的参数就是返回的原始数据
* @param {string} title 分享标题
* @param {string} linkUrl 分享页面路径
* @param {string} imgUrl 图片路径
* @param {string} desc 分享描述
* @param {function} success 成功后回调的方法
*/
weixinJSConfig: function(title, linkUrl, imgUrl,desc) {
var url = window.location.href; //H5当前页面路径
console.info('------------url--------------');
console.info(url);
uni.request({
url: weixin.apiUrl + '/home/getWeixinJSConfig', //请求后台接口获取权限验证配置参数
data: {
url: url
},
method: 'POST',
timeout: 600000,
success: (res) => {
console.info('----------------------------jsconfig--------------------------');
console.info(res.data);
//微信分享权限验证配置参数构造
var config = {
debug: false, //是否启用调试
appId: res.data.appId, //微信公众号appID
timestamp: res.data.timestamp, //时间戳
nonceStr: res.data.nonceStr, //签名的随机串
signature: res.data.signature, //签名
jsApiList: [ //需要使用的JS接口列表
'checkJsApi',
'updateTimelineShareData',
'updateAppMessageShareData',
'hideMenuItems'
]
};
console.info('--------------------------jsconfig Value---------------');
console.info(config);
//微信注入权限验证配置
jweixin.config(config);
//需在用户可能点击分享按钮前就先调用
jweixin.ready(function() {
jweixin.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:originPage','menuItem:openWithSafari','menuItem:openWithQQBrowser','menuItem:editTag','menuItem:copyUrl','menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone','menuItem:openWithSafari']
});
//分享到朋友圈
jweixin.updateTimelineShareData({
title: title, // 分享标题
link: ajax.appUrl + linkUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
success: function() {
// alert("updateTimelineShareData");
}
})
//分享给朋友
jweixin.updateAppMessageShareData({
title: title, // 分享标题
desc: desc, // 分享描述
link: ajax.appUrl + linkUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
success: function() {
// alert("updateAppMessageShareData");
}
})
});
}
});
},
// 微信H5扫码功能
scanQRCode: function() {
var url = window.location.href; //H5当前页面路径
uni.request({
url: weixin.apiUrl + '/home/getWeixinJSConfig', //后台接口
data: {
url: url
},
method: 'POST',
timeout: 600000,
success: (res) => {
// console.info('----------------------------jsconfig--------------------------');
var config = {
debug: false,
appId: res.data.appId,
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
jsApiList: [
'checkJsApi',
'updateTimelineShareData',
'updateAppMessageShareData',
'hideMenuItems',
'scanQRCode' //扫码权限
]
};
// console.info('--------------------------jsconfig Value---------------');
// console.info(config);
//微信注入权限验证配置
jweixin.config(config);
jweixin.scanQRCode({
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
if(res.resultStr.indexOf(',') > 0){
//条形码时返回的格式类似为【code128,123456789】
var dealserialNumber=res.resultStr.split(',')[1];
dealserialNumber = dealserialNumber.replace(/[^a-z\d]/ig, "");//处理条形码扫描的字符
dealserialNumber=dealserialNumber.replace('sn','');
uni.setStorageSync('dealserialNumber', dealserialNumber);
//location.href='接收结果页面='+dealserialNumber;//扫描结果传递到的处理页面
}else{
//二维码时
alert(res.resultStr);
//location.href='接收结果页面='+res.resultStr;//扫描结果传递到的处理页面
}
}
});
}
});
}
}
export default weixin;
main.js引入封装类代码：
// #ifdef H5 import sjuWeixin from './common/sju.weixin.js' // #endif // #ifdef H5 Vue.prototype.sjuWeixin = sjuWeixin; // #endif
这里用到了条件编译，只有在H5的环境或者是打包H5时，这段代码才会执行
页面中使用自定义分享示例：
onShow() {
//调用微信配置接口
// #ifdef H5
this.sjuWeiXin.weixinJSConfig(this.$title,'linkUrl(分享页面路径(字符串空默认首页))','分享图片路径(网络图片)',this.$desc);
// #endif
},
这里使用到了 this.$title 和 this.$desc 的变量，需要在 main.js 里面定义，因为自定义分享功能是多页面使用，分享标题和分享描述基本上都是固定的，后面改变标题或者描述，只需把mian.js的变量修改一下即可
// 设置全局变量 Vue.prototype.$title='分享标题'; Vue.prototype.$desc = '分享描述'; Vue.prototype.$shareImage = '图片路径';
