H5 微信端分享功能模块各按钮禁用,打开处理,及分享组件
作者:互联网
首先,路由切换是每个页面都默认调用微信方法关闭。看你要关闭那些
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#44 官方文档地址
项目加载的时候需要去注入微信wx.config 。但要调用微信sdk .我这是通过后台拿的签名等数据
created(){
GET_CONFIG({appId:APP_ID,url:window.location.href.split("#")[0]}).then(res=>{
let data = res.data;
console.log(data)
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: APP_ID, // 必填,公众号的唯一标识
timestamp:data.timestamp, // 必填,生成签名的时间戳
nonceStr:data.noncestr, // 必填,生成签名的随机串
signature: data.signature,// 必填,签名
jsApiList: ['updateAppMessageShareData','updateTimelineShareData',
'onMenuShareWeibo','onMenuShareAppMessage','onMenuShareTimeline',
'hideAllNonBaseMenuItem','showMenuItems','hideMenuItems','showAllNonBaseMenuItem'
] // 必填,需要使用的JS接口列表
});
// wx.ready(function () {
// // wx.hideAllNonBaseMenuItem(); // 隐藏微信 右上角功能--所有非基础按钮
// wx.hideMenuItems({
// menuList: ["menuItem:share:QZone","menuItem:share:facebook",
// "menuItem:share:weiboApp","menuItem:share:qq",
// "menuItem:share:timeline","menuItem:share:appMessage"] // 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3
// })
// })
});
}
}
分享点击是。调用组件
<template>
<!-- 微信分享---公共组件 -->
<div class="share_div" v-show="getShareShow" @click="getShareShowFu">
<i></i>
</div>
</template>
<script>
// import {API_HOST} from "../../../config/index.js";
export default {
props: {
configShare: { // 分享参数配置
type: Object,
default() {
return {
title:"", // 分享标题
desc:"", // 分享描述
link: "", // 分享链接--跳转地址
imgUrl:"" // 分享图片地址
}
}
},
sharingType: { // 分享按钮有哪些
type: Array,
default() {
return ['wxFriend','wxCircleFriends','qq','qqSpace']; // wxFriend -- 微信朋友。 circleFriends:朋友圈 qqSpace: QQ空间 qq:QQ
}
},
shareShow: { // 是否显示分享提示
type: Boolean,
required: false
}
},
data() {
return {
getShareShow: this.shareShow,
getConfigShare: this.configShare,
getSharingType: this.sharingType
}
},
components: {
},
watch:{
getShareShow: (val)=>{
console.log('监听分享', val)
}
},
created() {
},
mounted() {
this.share(this.getConfigShare);
},
computed: {
},
methods: {
// 微信付目录--传播类
// 发送给朋友: "menuItem:share:appMessage"
// 分享到朋友圈: "menuItem:share:timeline"
// 分享到QQ: "menuItem:share:qq"
// 分享到Weibo: "menuItem:share:weiboApp"
// 收藏: "menuItem:favorite"
// 分享到FB: "menuItem:share:facebook"
// 分享到 QQ 空间 "menuItem:share:QZone"
share(configInfo){
let shareTyleObj = {
'wxFriend':"menuItem:share:appMessage",
'wxCircleFriends': "menuItem:share:timeline",
'qq': "menuItem:share:qq",
'qqSpace': "menuItem:share:QZone"
};
let b = [];
this.getSharingType.forEach(element => {
if(!!shareTyleObj[element]){
b.push(shareTyleObj[element]);
}
});
wx.showMenuItems({
menuList: b // 要显示的菜单项,所有menu项见附录3
});
console.log('232323')
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
// let configInfo={
// title:"拼团免费领取赠险",
// desc:"拼团成功,即可获得一份太平交通意外赠险,行动起来吧!",
// link: location.href,
// imgUrl:"https://wxapptest.tpi.cntaiping.com/web/wxapp/0813/share_img.png"
// }
// “分享给朋友”及“分享到QQ”
wx.updateAppMessageShareData({
title: configInfo.title, // 分享标题
desc: configInfo.desc, // 分享描述
link: configInfo.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: configInfo.imgUrl, // 分享图标
success: function () {
console.log()
// 设置成功
}
});
// “分享到朋友圈”及“分享到QQ空间”
wx.updateTimelineShareData({
title: configInfo.title, // 分享标题
link: configInfo.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: configInfo.imgUrl, // 分享图标
success: function () {
// 设置成功
}
});
})
},
getShareShowFu(){
this.$emit('getShareShowFu', false)
this.getShareShow = false;
}
},
}
</script>
<style lang="less" scoped>
.share_div{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: right;
// z-index: 11;
background: rgba(0, 0, 0, 0.8);
i{
background: url('~@/assets/images/icon_share.png') no-repeat;
background-size: 100%;
width: 175px;
height: 175px;
display: inline-block;
// float: right;
margin-right: 15px;
}
}
</style>
标签:configInfo,qq,share,微信端,H5,menuItem,分享,wx 来源: https://blog.csdn.net/qq_45950523/article/details/113753263