关于微信H5 分享配置
平时微信H5的分享做的比较少，忍不住记下，防忘记
官方文档：JS-SDK说明文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1
1、公众号上配置域名，且公众号需要企业公众号，不能个人
2、引入JS文件
引入js文件，有两种方式，通过npm 引入 和 <script>
1、通过<script>引入
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
2、通过npm引入（推荐，下文是以npm方式的实现步骤）
npm install weixin-js-sdk --save-dev
2.1、npm引入之后，引入依赖模块
// 1、可直接在需要的页面引入 import wx from 'weixin-js-sdk'; // 2、或者在mian.js 中，通过vue原型链，全局引入 import wx from ''weixin-js-sdk' Vue.prototype.$wx = wx
3、配置信息
先通过 wx.config 配置信息
// 以下几个是前置动作 // 1、需要将 当前的页面地址 提交给后端，以和微信换取配置信息configData // 2、推荐 当前页面地址和参数 一并提交：window.location.href // 3、注意，提交给后端的页面地址，必须在公众后台配置好域名 // 4、本地调试的域名无法正常使用，（可以在本地进行域名解析） var configData={ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: '', // 必填，公众号的唯一标识（后端提供） timestamp: , // 必填，生成签名的时间戳（后端提供） nonceStr: '', // 必填，生成签名的随机串（后端提供） signature: '',// 必填，签名（后端提供） jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表（前端设置，https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#64） } $wx.config(configData); // 关键接口
4、调用微信js-sdk的接口
注意：1、在调用微信的sdk接口时，需要在 wx.config 之后，
2、调用接口需要在配置在 wx.config 的 jsApiList 中，否则无法使用
（配置后，若在本地调试，可尝试”域名重定向“的方式）
3、分享的接口中，配置的url，可以随意填写
4、有些sdk的接口，其中的参数是必填的，否则会报错，自行留意，官网文档没提示
// 注意： // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后， // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口， // 则须把相关接口放在ready函数中调用来确保正确执行。 // 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 wx.ready(function () { //自定义“分享给朋友”及“分享到QQ” wx.updateAppMessageShareData({ title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接，（这个地址好像可以随意填写） imgUrl: that.pageData.avatar, // 分享图标 success: function (setSuccess) { // 设置成功 console.log("设置成功", setSuccess) } }); //自定义“分享到朋友圈”/“分享到QQ空间” wx.updateTimelineShareData({ title: '', // 分享标题 link: '', // 分享链接，（这个地址好像可以随意填写） imgUrl: '', // 分享图标 success: function (setSuccess) { // 设置成功 console.log("设置成功", setSuccess) } }); //隐藏所有非基础按钮接口 wx.hideAllNonBaseMenuItem(); //批量显示功能按钮接口 wx.showMenuItems({ menuList: ["menuItem:share:timeline", "menuItem:share:appMessage"] // 要显示的菜单项，所有menu项见附录3 }); });
完整实例
wxConfig(){ let that=this; var logInPageUrl=window.location.href; var logInPageUrl2=window.location.origin+'/#/?id='+that.id; var jsApiArray=['showMenuItems','hideAllNonBaseMenuItem','updateAppMessageShareData', 'updateTimelineShareData', 'hideOptionMenu', 'showOptionMenu']; that.$http("wxConfig_api", {url:logInPageUrl},).then((wxConfigRes) => { if(wxConfigRes.code==0){ var getData=wxConfigRes.data; wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: getData.app_id, // 必填，公众号的唯一标识 timestamp:getData.timeStamp, // 必填，生成签名的时间戳 nonceStr: getData.nonceStr, // 必填，生成签名的随机串 signature: getData.signature,// 必填，签名 jsApiList: jsApiArray // 必填，需要使用的JS接口列表 }); // 注意： // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后， // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口， // 则须把相关接口放在ready函数中调用来确保正确执行。 // 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 wx.ready(function () { //自定义“分享给朋友”及“分享到QQ” wx.updateAppMessageShareData({ title: that.pageData.true_name + ' ' + that.pageData.position, // 分享标题 desc: that.pageData.desc, // 分享描述 link: logInPageUrl2, // 分享链接 imgUrl: that.pageData.avatar, // 分享图标 success: function (setSuccess) { // 设置成功 console.log("设置成功", setSuccess) } }); //自定义“分享到朋友圈”/“分享到QQ空间” wx.updateTimelineShareData({ title: that.pageData.true_name + ' ' + that.pageData.position, // 分享标题 link: logInPageUrl2, // 分享链接 imgUrl: that.pageData.avatar, // 分享图标 success: function (setSuccess) { // 设置成功 console.log("设置成功", setSuccess) } }); //隐藏所有非基础按钮接口 wx.hideAllNonBaseMenuItem(); //批量显示功能按钮接口 wx.showMenuItems({ menuList: ["menuItem:share:timeline", "menuItem:share:appMessage"] // 要显示的菜单项，所有menu项见附录3 }); }); wx.error(function(res){ console.error('config信息验证失败',res) }); } }).catch((err) => { console.error('接口错误',err) }); },
