PHP菜鸟博客_共同学习分享PHP技术心得【PHP爱好者】
uniapp发布h5如何使用微信jssdk实现分享功能
2022-12-19 菜鸟站长


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 直接写入。

发表评论:
昵称

邮件地址 (选填)

个人主页 (选填)

内容