uni公众号内嵌H5分享
我们首先要安装一个模块（jweixin-module） npm install jweixin-module
封装了一个js，内容为
import line from '../uni_modules/uview-ui/libs/config/props/line';
var jweixin = require('jweixin-module');
// import {
// get_jssdk
// } from '@/api/index.js' // 分享接口后台提供，用于获取appid，timestamp，nonceStr，signature
var Shares = {
async get_jssdk(res) {
jweixin.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.appId, // 必填，公众号的唯一标识
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature, // 必填，签名
jsApiList: res.jsApiList // 必填，需要使用的JS接口列表
})
},
get_share(aa = 0, title, desc, href, share_img, id, num = 0) {
return new Promise((resolve, reject) => {
if (aa == 1) {
href = id ? href + '?id=' + id : href;
}
console.log(title, desc, href, share_img, id, num)
//a:判断是否调用回调
console.log(href)
jweixin.error(function(res) {
console.log(res, '错误')
});
var that = this
jweixin.ready(function() {
jweixin.updateAppMessageShareData({
title: title, // 分享标题
link: href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
desc: desc,
imgUrl: share_img, // 分享图标
success: (res) => {
console.log('设置分享给朋友成功')
console.log(res)
if (aa == 1) {
let nums = that.cabk(title, href, 1);
nums.then(res => {
console.log(num + res)
resolve(num + res)
// this.num = this.num + res
})
}
},
cancel: function(res) {
alert('取消分享')
// resolve(0)
}
});
jweixin.updateTimelineShareData({
title: title, // 分享标题
link: href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
desc: desc,
imgUrl: share_img, // 分享图标
success: (res) => {
console.log('设置分享到朋友圈成功')
if (aa == 1) {
let nums = that.cabk(title, href, 1);
nums.then(res => {
console.log(res)
console.log(num + res)
resolve(num + res)
// this.num = this.num + res
})
}
},
cancel: function(res) {
console.log('取消分享')
// resolve(0)
}
});
});
})
},
cabk(title, href, api) { //分享回调
return new Promise((resolve, reject) => {
uni.request({
url: 'https://shouyin.zhilongyihuo.com/app/card/shareBack',
method: 'POST',
data: {
user_id: uni.getStorageSync("user_id"),
link: href,
jsapi: api,
title: title
},
header: {
'token': uni.getStorageSync("token"), //自定义请求头信息
},
success: (res) => {
resolve(1)
}
});
})
},
//callback写法
get_share1(aa = 0, title, desc, href, share_img, id, num = 0, callback) {
if (aa == 1) {
href = id ? href + '?id=' + id : href;
}
console.log(title, desc, href, share_img, id, num)
//a:判断是否调用回调
console.log(href)
jweixin.error(function(res) {
console.log(res, '错误')
});
var that = this
jweixin.ready(function() {
jweixin.updateAppMessageShareData({
title: title, // 分享标题
link: href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
desc: desc,
imgUrl: share_img, // 分享图标
success: (res) => {
console.log('设置分享给朋友成功')
console.log(res)
if (aa == 1) {
that.cabk1(title, href, 1, function(res) {
console.log(num + res)
callback && callback(num + res)
});
}
},
cancel: function(res) {
alert('取消分享')
// resolve(0)
}
});
jweixin.updateTimelineShareData({
title: title, // 分享标题
link: href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
desc: desc,
imgUrl: share_img, // 分享图标
success: (res) => {
console.log('设置分享到朋友圈成功')
if (aa == 1) {
that.cabk1(title, href, 1, function(res) {
console.log(num + res)
callback && callback(num + res)
});
}
},
cancel: function(res) {
console.log('取消分享')
// resolve(0)
}
});
});
},
cabk1(title, href, api, callback) { //分享回调
uni.request({
url: 'https://shouyin.zhilongyihuo.com/app/card/shareBack',
method: 'POST',
data: {
user_id: uni.getStorageSync("user_id"),
link: href,
jsapi: api,
title: title
},
header: {
'token': uni.getStorageSync("token"), //自定义请求头信息
},
success: (res) => {
callback && callback(1)
}
});
}
}
//抛出
export {
Shares
}
main.js里引入
import {Shares} from './until/share.js'
//挂载到全局
Vue.prototype.$wxH5Share = Shares
页面使用
async fx() {
console.log(window.location.href)
const res = await this.$myrequest({
url: '/app/user/getWechatJssdk',//示例接口获取微信的appid，timestamp，nonceStr，signature
method: 'POST',
header: {
// 'token': uni.getStorageSync("token"), //自定义请求头信息
},
data: {
url: window.location.href
}
})
if (res.data.code == 1) {
let img = "https://www.zhilongyihuo.com/down/logo.png"
console.log(this.dect)
console.log(this.num)
// 初始化微信接口
this.$wxH5Share.get_jssdk(res.data.data);
// 初始化分享参数
this.$wxH5Share.get_share1(1, this.radiovalue1, this.dect, this.shareLink, img, this.user_id, this.num,
(res) => {
console.log(res)
this.num = res
});//callback回调取值
// const nums = this.$wxH5Share.get_share(1, this.radiovalue1, this.dect, this.shareLink, img, this.user_id,
// this.num);
// nums.then(res => {//promise用.than取值
// console.log(res)
// this.num = res
// })
// async () => {//promise用async，await取值
// let nums = await this.$wxH5Share.get_share(1, this.radiovalue1, this.dect, this.shareLink,img, this.user_id, this.num);
// console.log(nums)
// this.num = nums
// }
console.log(this.num)
} else {
uni.showToast({
title: res.data.msg,
icon: "error",
duration: 2000
})
}
},
提示：虽然写了成功回调，但是uniH5分享用的是微信分享的新版本，新版本的分享成功回调取消了，所以这个回调是不对的，写上是为了学习promise的使用和callback的使用
APP分享
html里面写两个按钮分别为好友和朋友圈分享
<button type="default" @click="sharef('WXSceneSession')">分享好友</button>
<button type="default" @click="sharef('WXSceneTimeline')">分享朋友圈</button>
js 代码
sharef(scene) {
//this.shareLink分享的链接地址
//this.user_id获取的user_id
console.log(this.shareLink + '?id=' + this.user_id)
// #ifdef APP-PLUS
uni.share({
provider: "weixin",
scene: scene,
type: 0,
href: this.shareLink + '?id=' + this.user_id,
title: this.radiovalue1,//分享的名称
summary: this.dect,//分享的简介
imageUrl: "https://www.zhilongyihuo.com/down/logo.png",//分享的图片
success: (res) => {
this.num += 1
this.shareBack(scene)
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
}
});
// #endif
// #ifdef H5
uni.showToast({
title: "点击右上角分享",
icon: "none",
duration: 2000
})
// #endif
},
async shareBack(scene) {//分享成功回调
var jsapi
if (scene == "WXSceneSession") {
jsapi = 1
} else {
jsapi = 2
}
const res = await this.$myrequest({
url: '/app/card/shareBack',//示例接口
method: 'POST',
header: {
'token': uni.getStorageSync("token"), //自定义请求头信息
},
data: {
user_id: this.user_id,
link: this.shareLink + '?id=' + this.user_id,
jsapi: jsapi,
title: this.radiovalue1
}
})
}
完结，撒花，有不完整的，还请大佬指正~
2041
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
