云服务器 199 / 年,新老同享,开发者力荐特惠渠道
阿里云推广

uniapp发布h5如何使用微信jssdk实现分享功能

  • 内容
  • 评论
  • 相关

1.npm安装weixin-js-sdk 微信的分享的sdk,安装好后再node_modules会出来weixin-js-sdk文件夹,并且根目录的package.json里面也会添加上weixin-js-sdk的依赖。

npm  install  weixin-js-sdk

2.mian.js引入微信jssdk然后全局挂载

import wx from 'weixin-js-sdk'
Vue.prototype.$wx = wx
3.具体需要分享业务的页面编写wechatShare()方法,这个方法再onload里面调用this.wechatShare();


wechatShare() {

let app = this;
console.log("分享开始", window.location.href);
let url = window.location.href;
Wxhare.wxshare({
url: url,
    do_self: 1
})
.then(result => {
console.log("分享接口返回", result);

if (result.code == '200') {


let share_title=uni.getStorageSync('sys_info')['share_title']!=''?uni.getStorageSync('sys_info')['share_title']:"分享标题";
let share_desc=uni.getStorageSync('sys_info')['share_info']!=''?uni.getStorageSync('sys_info')['share_info']:"分享描述";
let share_img=uni.getStorageSync('sys_info')['share_img'];

   // #ifdef  H5
//通过config接口注入权限验证配置
app.$wx.config({
debug: 0,
appId: result.data[0].appid,
timestamp:result.data[0].timestamp,
nonceStr: result.data[0].nonceStr,
signature: result.data[0].signature,
jsApiList: ["updateTimelineShareData", "updateAppMessageShareData",
"showAllNonBaseMenuItem",
"hideAllNonBaseMenuItem", "showMenuItems", "onMenuShareAppMessage",
"onMenuShareTimeline"
],
});

//通过ready接口处理成功验证
app.$wx.ready(function() {
//展示所有基础类型按钮,20211012日,微信增加了直接访问网址,出现一个拦截,这种情况下不显示分享按钮,先收藏然后在分享就可以,bug
app.$wx.showAllNonBaseMenuItem();

//旧的版本还有分享成功回调。不过不知道能用多久还
app.$wx.onMenuShareAppMessage({
title:share_title, // 分享标题
desc: share_desc, // 分享描述
link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: share_img, // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function() {
// 用户点击了分享后执行的回调函数
//alert("分享执行成功了1")



}
});
app.$wx.onMenuShareTimeline({
title: share_title, // 分享标题
link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: share_img, // 分享图标
success: function() {
// 用户点击了分享后执行的回调函数
//alert("分享执行成功了2")
}
});
})
// #endif





}
})


},

4.npm安装依赖包再构建的时候会被写到  static/js/chunk-vendors.js 中去,页面会引入这个js。所以 不能在页面 通过cdn的script标签形式再public下面的index.html 直接写入。

本文标签:

版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。

本文链接:uniapp发布h5如何使用微信jssdk实现分享功能 - https://wlphp.com/?post=386

发表评论

电子邮件地址不会被公开。 必填项已用*标注