写代码日子啊~~~~
- 在做电商项目的时候，要求，商品详情页面分享时与其他页面分享时的内容是不一样的，所以这个时候将分享封装成一个可复用的功能。
- 在开发时发现，首页的商品列表跳到详情页使用uni-app自带的跳转 如：uni.navigateTo ~ 这样产生的二级页面地址，分享的内容就没有了。即改为 window.location.href = “www.www.ww” + 参数..... 这样详情页面就可以正常的分享了。
- 要好好看官方文档多看几遍~
- 这边分享所有到的参数是后端提供的，js-sdk说明文档里面有demo~ 后端可参考demo，将前端需要的几个参数拿到~ 如：
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
要提前配置好
1）将js接口安全域名配置好~（登录公众号 ~> 设置（公众号设置）~> js接口安全域名）。下载的txt文件只有放到该项目的同级目录下之后，才能够设置成功。
2）设置IP白名单（通过开发者ID及密码调用获取access_token接口时，需要设置访问来源IP为白名单）~
封装好的分享功能：
//封装方法 .js 后端需要前端提供当前页面的url，拿到前端分享使用的参数
import {HttpUtil} from "@/util/http.js"; // HttpUtil公共请求方法
let wx = require('jweixin-module'); // 微信JS-SDK 安装方法 npm install jweixin-module --save
function onShareData(shareData){
let _this = this;
HttpUtil(reqUrl.getConfigInfo, {
data: {
url : encodeURIComponent(location.href.split("#")[0]), //当前页面的url
},
success: data => {
wxShare(data,shareData);
}
});
}
function wxShare(data,shareData){
//分享到微信朋友
wx.config({
debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.appId, // 必填，公众号的唯一标识，填自己的！
timestamp: data.timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature, // 必填，签名，见附录1
jsApiList: [
'updateAppMessageShareData'
]
})
wx.ready(function () {
let sn = uni.getStorageSync('sn');
let storeId = uni.getStorageSync('storeId');
let normalConfig ={
shareName: uni.getStorageSync('shopName'),// => 名称
shareImg : uni.getStorageSync('logo'), // => logo
shareMs: uni.getStorageSync('desc'),//描述
linkNow: '/xxx/xxx/xxx?&sn=' + sn + '&Id=' + Id //这个链接为，分享出去之后，用户访问的地址
}
shareData = Object.assign(normalConfig,shareData)
//分享给朋友
wx.updateAppMessageShareData({
title: shareData.shareName,
desc: shareData.shareMs,
link: api.goHom + shareData.linkNow,// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: shareData.shareImg,// 分享图标
success: function () {
// 设置成功
console.log("updateAppMessageShareData成功");
},
fail:function(res){
console.log(res);
}
})
wx.error(function (res) {
console.log("出错了：" + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
})
}
}
export default {
onShareData
}
---------------------------------以上就是封装好的可复用的分享功能了 .js
使用：
如果所有页面分享的都是相同的页面
可以直接在App.vue页面使用
引入分享的js页面 import shareUtil from '@/util/shareUtil.js';
然后页面使用 shareUtil.onShareData() 这个方法就可以。
shareUtil.onShareData() 需要一进入页面就调用，微信分享只能使用微信自带的分享功能，前端所能做的就是修改分享出去的参数。
再点击微信页面中的右上角就可以直接分享内容了。
在分享参数的时候 我是直接取了缓存的 uni.getStorageSync
如果某一个页面需要分享出去不同的内容
//分享~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//当前页面地址 urlHref
//跳转链接 linkNow
//title shareName
//描述 shareMs
//分享图片地址 shareImg
let shareData = {
linkNow : '/xxx/xxx?Id=' + _this.Id + '&sn=' + _this.sn,
//详情页需要 修改的参数 不需要 则 不用添加
shareName : _this.resData.name,
shareImg : _this.Img[0],
shareMs : _this.resData.msg,
}
shareUtil.onShareData(shareData);
以上就可以分享出不同的参数了。
=========================================end
