// 引用微信分享 sdk //安装方法 npm install weixin-js-sdk var wx = require('weixin-js-sdk'); methods: { // 微信商品详情分享 fenXBtn() { const url = 'Index/ajaxGetWxConfig'; //location.href.split('#')[0] let idS = window.location.href; let shareShopId = this.$store.state.shop_id; // console.log(idS.replace(/shop_id/,)); // let askUrl = this.IndexDemo('shop_id') != -1 ? idS : `${idS}&shop_id=${this.$store.state.shop_id}` let askUrl = this.$uti.IndexDemo('shop_id') != -1 ? idS : (shareShopId ? `${idS}&shop_id=${shareShopId}` : `${idS}`); // let askUrl = `${window.location.href}&shop_id=${this.$store.state.shop_id}` let wxTitle = this.shopInfo.name let wxDesc = this.shopInfo.goods_remark let imgBox = this.$uti.getImgCon(this.imgBx) //图片路径封装 let bodyParam = { askUrl } this.$http.postRequest(url, bodyParam).then(res => { // console.log(res); const { appId, nonceStr, rawString, signature, timestamp } = res // 微信分享授权 wx.config({ debug: !1, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出 appId, // 必填，公众号的唯一标识，填自己的！ timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据 nonceStr, // 必填，生成签名的随机串 rawString, signature, // 必填，签名，见附录1 jsApiList: [ // 需要使用的JS接口列表 'onMenuShareTimeline', 'onMenuShareAppMessage', 'updateTimelineShareData', 'updateAppMessageShareData' ] }) }) wx.ready(function() { // 分享到朋友圈 wx.onMenuShareTimeline({ title: wxTitle, // 分享标题 // link: 'http://tksn.shangpreechina.com/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 link: askUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 // imgUrl: that.$uti.getImgCon(this.imgBx), // 分享图标 imgUrl: imgBox, // 分享图标 success: function() { // 设置成功 alert("分享成功"); // console.log("分享成功"); } }) //分享给朋友 wx.onMenuShareAppMessage({ title: wxTitle, desc: wxDesc, link: askUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: imgBox, // 分享图标 success: function() { console.log("分享成功"); }, cancel: function() { console.log("取消分享"); } }); }) } }
util.js 在页面调用是为了判断分享路径携不携带shop_id(店铺id)
// 判断 页面王志忠书否存在str const IndexDemo = (str2) => { let str1 = window.location.href let s = str1.indexOf(str2); return (s); }
2.分享方法封装 分享页面
let commoneUrl = 'http:/xxxxxxxxxxxxxxxxxxxxxx/' //post请求封装 function postRequest222(url, data) { var promise = new Promise((resolve, reject) => { var postData = data; uni.request({ url: commoneUrl + url, data: postData, method: 'POST', // withCredentials:true, header: { 'content-type': 'application/x-www-form-urlencoded', // "Authorization":'22' }, success: function(res) { // console.log(res); if (res.statusCode === 200 && res.data.resultCode == 0) { resolve(res.data); } else { resolve(res.data) } }, error: function(e) { reject('网络出错'); } }) }); return promise; } // 获取网站基础配置信息 const webConfig = (shop_id) => { const url = 'Index/getWebconfig'; postRequest222(url).then(res => { console.log("配置Uti", res); if (res.code == 200) { uni.setStorageSync('Webconfig', res.data); uni.setStorageSync('phone', res.data.MOBILE); getApp().globalData.phone = res.data.MOBILE uni.setNavigationBarTitle({ title: res.data.CFG_WEBNAME }) let shop_id = shop_id let title = res.data.SYS_SHARE_TITLE let remark = res.data.SYS_SHARE_DESC let Image = getImgCon(res.data.SYS_SHARE_IMG) shareFun(shop_id, title, remark, Image) return res.data } if (res.code == 200) { // this.$store.commit('saveWX_Webconfig', res) // // 页面标题文字 // uni.setNavigationBarTitle({ // title: res.data.CFG_WEBNAME // }) // this.phoneNumber = res.data.MOBILE // getApp().globalData.phone = res.data.MOBILE // this.$store.commit('saveWX_APPID', res.data.WX_APPID) // try { // uni.setStorageSync('phone', res.data.MOBILE); // } catch (e) { // // error // } } }) } // 引入分享 sdk 安装 npm i weixin-js-sdk let wx = require('weixin-js-sdk'); // 判断 页面王志忠书否存在str const IndexDemo = (str2) => { let str1 = window.location.href let s = str1.indexOf(str2); return (s); } //.微信分享 /** * shop_id 店铺id 从全局取 * title 分享标题 * remark 分享描述 * Image 分享封面图 */ const shareFun = (shop_id, title, remark, Image) => { let idS = window.location.href; let shareShopId = shop_id; let askUrl = IndexDemo('shop_id') != -1 ? idS : (shareShopId ? `${idS}&shop_id=${shareShopId}` : `${idS}`); let wxTitle = title let wxDesc = remark let imgBox = Image // console.log(askUrl,wxTitle,wxDesc,imgBox); const url = 'Index/ajaxGetWxConfig'; let bodyParam = { askUrl } postRequest222(url, bodyParam).then(res => { console.log(res); const { appId, nonceStr, rawString, signature, timestamp } = res // 微信分享授权 wx.config({ debug: !1, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出 appId, // 必填，公众号的唯一标识，填自己的！ timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据 nonceStr, // 必填，生成签名的随机串 rawString, signature, // 必填，签名，见附录1 jsApiList: [ // 需要使用的JS接口列表 'onMenuShareTimeline', 'onMenuShareAppMessage', 'updateTimelineShareData', 'updateAppMessageShareData' ] }) }) wx.ready(function() { // 分享到朋友圈 wx.onMenuShareTimeline({ title: wxTitle, // 分享标题 // link: 'http://tksn.shangpreechina.com/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 link: askUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 // imgUrl: that.$uti.getImgCon(this.imgBx), // 分享图标 imgUrl: imgBox, // 分享图标 success: function() { // 设置成功 alert("分享成功"); // console.log("分享成功"); } }) //分享给朋友 wx.onMenuShareAppMessage({ title: wxTitle, desc: wxDesc, link: askUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: imgBox, // 分享图标 success: function() { console.log("分享成功"); }, cancel: function() { console.log("取消分享"); } }); }) } module.exports = { webConfig: webConfig, }
页面调用方法
onLoad(e) { // 分享 setTimeout(() => { let shop_id = this.$store.state.shop_id this.$uti.webConfig(shop_id) }, 1000) }
效果图展示
