vue项目、微信浏览器环境
参考文档https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
微信网页开发->微信JS-SDK说明文档->3 分享接口
php后台jssdk.php
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
附录6-demo页面,下载实例代码
原理: 调用微信内置对象的接口,
代码:
//项目内接口,获取产品信息,从中提取后台设置的个性化数据
getProcuct:function(){
let postData = this.$qs.stringify({
productID:this.productID,
})
var url = '' //项目内部接口
//console.log(url)
//console.log(postData)
this.axios.post(url,
postData
).then(res=>{
console.log('getProduct detail : ')
console.log(res.data)
if () {//判断是否成功
this.productInfo = //后台返回的数据
document.title = this.productInfo.product_name//设置浏览器title
//获取公众号相关信息,我也不会设置公众号,具体设置自行百度
this.getInfo()
}else{
//失败处理
}
}).catch(error=>{
//异常处理,包括网路请求失败,和网络请求成功后的处理异常
})
},
getInfo:function(){
var url = '' //获取微信相关参数,后台通过链接请求,主要通过jssdk.php获取
this.axios.get(url, {
params:{
requestUri:location.pathname + location.search
//http://test.com/hello/word?key1=val1&key2=val2
//location.pathname:/hello/world
//location.search:?key1=val1&key2=val2
//后台应该动态配置http://test.com
}
}
).then(res=>{
if () {//判断成功获取微信授权信息
var confRes = JSON.parse(res.data.data)
//执行设置自定义分享
this.getconfig(confRes)
}else{
}
}).catch(error=>{
})
},
getconfig:function(res){
//可以硬编码
let links = location.href
let desc = '这是一段不可告人的描述'
let title = document.title
let imgUrl = ''
//也可以动态设置
if (this.playerOptions && this.playerOptions.poster) {
imgUrl = this.playerOptions.poster
}
var SDKConfig = {
appId:res.appId,
timestamp:res.timestamp,
nonceStr:res.nonceStr,
signature:res.signature,
}
//如果分享不成功,可以把调试开关打开
SDKConfig.debug = false
SDKConfig.jsApiList = [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareWeibo',
'onMenuShareQQ',
]
//微信的配置
wx.config(SDKConfig)
//ready中设置各种分享途径的自定义信息
wx.ready(()=>{
wx.onMenuShareTimeline({
title: title, // 分享标题
desc: desc, // 分享描述
link: links, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function() {
},
cancel: function() {
}
})
wx.scanQRCode({
needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function (res) {
// 当needResult 为 1 时,扫码返回的结果
// alert(res);
}
})
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: links, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function() {
},
cancel: function() {
}
})
wx.onMenuShareQQ({
title: title, // 分享标题
desc: desc, // 分享描述
link: links, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function() {
},
cancel: function() {
}
})
wx.onMenuShareWeibo({
title: title, // 分享标题
desc: desc, // 分享描述
link: links, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function() {
},
cancel: function() {
}
})
})
wx.error(()=>{
})
},
//设置完成后,点击微信浏览器右上角三个点,发送给朋友、QQ、微博、朋友圈都会触发相应的函数