1. 首先先安装依赖
npm install weixin-js-sdk --save
npm install jweixin-module --save
npm install --save-dev webpack-merge
2. app.vue文件
<script>
export default {
onLaunch: function(e) {},
onShow: function(e) {
console.log('App Show页面初始');
// 路由参数存缓存的 这是为了防止他点击其他页面 这两个id没有了
var querys = this.$route.query; // 路由参数if (querys) {
if (querys.friendId) {
uni.setStorageSync("friendId", querys.friendId)
}
if (querys.partnerId) {
uni.setStorageSync("partnerId", querys.partnerId)
}
}
},
onHide: function() {
console.log('App Hide')
},
mounted() {
// let pages = []
// pages = getCurrentPages();
// console.log(pages, 'pages');
// var redirect_link = pages[pages.length - 1].route;
// this.setWxShare() // 分享传入参数
},
globalData: {
// #ifdef H5
setWxShare: function(redirect_link, id, imgurl) {var merge = require('webpack-merge'); //调用微信集成的方法
let wzhi = window.location.href //获取当前页面路由
this.hi = wzhi.split("#")[0];
// console.log(this.hi, 'this.hi');
var userInfo = uni.getStorageSync("userInfo");let url = "";
var routes1 = ""========这些是因为我们的需求是要带账号的id参数=========
if (userInfo) {
// 有自己的用户信息就说明是老用户 老用户的话就用自己的friendId 删掉带过来的friendId
if (this.hi.indexOf("friendId") != -1) {
// 路由传过来的friendId 截取掉 分享只需要自己的friendId
var routes1 = this.hi.split("friendId")[0];
url = routes1 + "friendId=" + userInfo.userId;} else if (this.hi.indexOf("partnerId") != -1) {
// 路由传过来的partnerId 截取掉 分享只需要friendId
var routes1 = this.hi.split("partnerId")[0];
url = routes1 + "friendId=" + userInfo.userId
} else if (this.hi.indexOf("?") != -1) {
url = this.hi + "&friendId=" + userInfo.userId
} else {
url = this.hi + "?friendId=" + userInfo.userId
}
} else {
// 未登录状态 或者新用户
if (this.hi.indexOf("friendId") != -1) {
routes1 = this.hi.split("&friendId")[0];
url = routes1
} else if (this.hi.indexOf("partnerId") != -1) {
routes1 = this.hi.split("&partnerId")[0];
url = routes1
} else {
url = this.hi
}
}
// 改变路由参数 但是不刷新页面
window.history.replaceState(null, null, url);================不需要的话就删掉=======
url = window.location.href.split("#")[0];//请求接口返回签名
var params = {
url: url
}
this.common.getConfig(params).then(res => {if (res.code == 200) {
var result = res.data;
// console.log(result, "result------------------")
var wxshare = require('jweixin-module'); //调用微信集成的方法
wxshare.config({
debug: false, //是否打开调试
appId: result.appId, // 公众号的唯一标识
timestamp: result.timestamp, // 生成签名的时间戳
nonceStr: result.nonceStr, // ,生成签名的随机串
signature: result.signature, // 签名
jsApiList: [
"updateAppMessageShareData",
"updateTimelineShareData",
]
});
wxshare.ready(function() {
//分享给朋友
wxshare.updateAppMessageShareData({
title: "房东直租", // 分享标题
desc: "易租房,好生活,从这里开始", // 分享描述
link: url, // 当前页面链接
imgUrl: "https://home.link-bl.com/static/images/loginLogo.png", //分享图标
success: function() { //分享成功回调
// console.log("分享成功");
},
cancel: function() { //取消分享回调
// console.log("取消分享");
}
});
//分享到朋友圈
wxshare.updateTimelineShareData({
title: "房东直租", // 分享标题
desc: "易租房,好生活,从这里开始", // 分享描述
link: url, // 当前页面链接
imgUrl: "https://home.link-bl.com/static/images/loginLogo.png", // 分享图标
success: function() {
// console.log("分享成功");
},
cancel: function() {
// console.log("取消分享");
}
});
})
}});
}
// #endif
},
methods: {}
}
</script><style>
/*每个页面公共css */
</style>
3. 写一个混入方法 全局混入 创建一个文件夹mixins 和pages平级 ,再创建一个share.js文件
// share.js
export const share = {
onShow() {
// console.log("全局混入");
// #ifdef H5
let pages = []
pages = getCurrentPages();
if (pages.length > 0) {
// console.log(pages[pages.length - 1].route, 'pages全局混入');
if (pages[pages.length - 1].route != 'pages/houseDetail/houseDetail') {
var redirect_link = pages[pages.length - 1].route;
this.setWxShare(redirect_link) // 分享传入参数
}
}// #endif
},
created() {},
}
4. 在main.js文件中引入
// 引入全局分享
import {
share
} from './mixins/share/share.js'
Vue.mixin(share)
最后大功告成!