h5网页分享功能

准备:
1.微信公众号(服务号且已认证)
2.备案域名(https)
步骤
1.在公众号设置-----功能设置-----js接口安全域名填写h5的备案域名
2.在公众号里获要使用的接口权限
3.引入微信jssdk npm包和js文件两种方式二选一
4.请求权限验证配置的参数(传递 完整的url给后台)
4.权限验证配置

同一个url仅需调用一次
wx.config({
debug: true,
appId: ‘’, // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: ‘’, // 必填,生成签名的随机串
signature: ‘’,// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});

只需要把当前页面的域名传递过去,这些参数都有后台传递过来
后台:
1.获取access_token
2.用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket
3.签名算法
4.给前端传递参数

~ 4.wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后
});

注意:若安全域名为 https://www.aaa.com
若先进入https://www.aaa.com这个页面进行权限配置,那其下面的子页面也不用再次进行配置。
若直接进入子页面,则需要在子页面里进行权限验证配置(传递子页面的完整路径)

### 如何在 UniApp 中实现 H5 页面的分享功能 #### 配置微信 JSSDK 为了使 H5 页面能够在微信浏览器中正常调用微信分享接口,需先引入并配置微信 JS-SDK。具体来说,在项目的 `main.js` 或者公共组件文件里加载 SDK 并初始化: ```javascript import wx from 'weixin-js-sdk' export function initWxShare(config) { wx.config({ debug: false, // 开启调试模式, appId: config.appId, // 必填,公众号的唯一标识 timestamp: config.timestamp, // 必填,生成签名的时间戳 nonceStr: config.nonceStr, // 必填,生成签名的随机串 signature: config.signature,// 必填,签名 jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填,需要使用的JS接口列表 }); } ``` #### 获取签名信息 通常情况下,服务器端会负责生成用于验证身份的安全签名字符串。前端只需要向指定 URL 发送请求来取得这些必要的参数。 ```javascript async function getSignature(url) { const res = await uni.request({ url: `${yourServerUrl}/get-signature?url=${encodeURIComponent(url)}` }) return res.data; } ``` #### 设置分享数据 当页面加载完成后立即执行此函数以设定好要共享的内容描述、链接地址以及图片路径等属性。 ```javascript function setWeChatShareInfo(title, desc, link, imgUrl) { wx.ready(() => { let shareObj = { title: title || document.title, desc: desc || '', link: link || window.location.href.split('#')[0], imgUrl: imgUrl || '' }; // 分享给朋友 wx.updateAppMessageShareData(shareObj); // 分享到朋友圈 wx.updateTimelineShareData(shareObj); }); wx.error((res)=>{ console.log('wx error:', res); }); } ``` #### 测试分享功能 完成上述步骤之后就可以重新编译并运行项目了。打开手机上的微信客户端访问对应的网页版应用,点击右上角菜单中的“发送给朋友”选项查看实际效果;也可以直接长按屏幕截图选择“分享至...”。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值