微信公众号开发之vue项目引入JS-SDK
目前有看到的库有weixin-jsapi、weixin-js-sdk1.weixin-js-sdk是基于jweixin-1.6.0版本的说明: 仅将官方 js-sdk 发布到 npm,支持 CommonJS,便于 browserify, webpack 等直接使用js源码:https://res.wx.qq.com/open/js/jweixin-1.6.0.js官方使用说明:https://mp
目前有看到的库有weixin-jsapi、weixin-js-sdk
1.weixin-js-sdk
是基于jweixin-1.6.0版本的
说明: 仅将官方 js-sdk 发布到 npm,支持 CommonJS,便于 browserify, webpack 等直接使用
js源码: https://res.wx.qq.com/open/js/jweixin-1.6.0.js
官方使用说明: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
2.weixin-jsapi
是基于jweixin-1.0.0版本的
微信官方 js-sdk es6 版本 说明: 仅将官方 js-sdk 发布到 npm,便于 webpack 使用
js源码: http://res.wx.qq.com/open/js/jweixin-1.0.0.js
官方使用说明: http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
3.项目实践
目前项目中只使用到了以下api
我使用的是weixin-jsapi,由于按照同样的方式引入weixin-js-sdk,就有问题,以下为我的mixin文件
import { Component, Vue } from 'vue-property-decorator'
import { getJsapiTicket } from "@/api";
import { getLocalStorage } from "@/utils/utils";
import wx from "weixin-jsapi";
// var wx = require('weixin-js-sdk');
@Component({
name: 'WxConfigMixin'
})
export default class extends Vue {
public ticketUrl: any = ''
public jsapiTicketObj: any = ''
public contributors: string = ''
public wishText: string = ''
public isDetail: boolean = false
public async getJsapiTicket() {
const res: any = await getJsapiTicket(this.ticketUrl);
this.jsapiTicketObj = res
if(this.isDetail) {
this.wxConfig()
}
}
public wxConfig () {
let contributors: any = ''
if(this.isDetail) {
contributors = getLocalStorage('readyForRushData').contributors
} else {
contributors = this.contributors
}
let link = this.ticketUrl
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: this.jsapiTicketObj.appId, // 必填,公众号的唯一标识
timestamp: this.jsapiTicketObj.timestamp, // 必填,生成签名的时间戳
nonceStr: this.jsapiTicketObj.nonceStr, // 必填,生成签名的随机串
signature: this.jsapiTicketObj.signature, // 必填,签名
jsApiList: [
'onMenuShareTimeline', // 分享到朋友圈接口
'onMenuShareAppMessage', // 分享到朋友接口
// 'updateTimelineShareData', // 分享到朋友圈接口v1.4.0
// 'updateAppMessageShareData', // 分享到朋友接口v1.4.0
'hideMenuItems',
],
});
wx.checkJsApi({
jsApiList: [
'onMenuShareTimeline', // 分享到朋友圈接口
'onMenuShareAppMessage', // 分享到朋友接口
// 'updateTimelineShareData', // 分享到朋友圈接口
// 'updateAppMessageShareData', // 分享到朋友接口
'hideMenuItems',
],
success: function (res: any) {
// console.log(res)
}
})
wx.ready(function (res: any) {
wx.hideMenuItems({
menuList: ['menuItem:share:qq', "menuItem:share:weiboApp", 'menuItem:share:QZone'] // 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3
});
// 微信分享的数据
var shareData: any = {
imgUrl: '图片服务器地址', // 分享显示的缩略图地址
link: link, // 分享地址
desc: '分享描述', // 分享描述
title: `分享标题`, // 分享标题
success: function () {
// 分享成功可以做相应的数据处理
alert('分享成功')
},
fail: function () {
alert('调用失败')
},
complete: function () {
// alert('调用结束')
}
}
// wx.updateTimelineShareData(shareData)
// wx.updateAppMessageShareData(shareData)
wx.onMenuShareTimeline(shareData)
wx.onMenuShareAppMessage(shareData)
});
wx.error(function (res: any) {
// console.log(res);
});
}
}
有什么问题的可以评论交流。
感觉有用的或者帮助到你的可以收藏、点赞、关注 一键三连。
(有问题需要交流可以加QQ245602951)
更多推荐
所有评论(0)