微信h5调分享功能

功能背景：

基于微信公众号的h5商城页面，实现特定商品的分享，包括朋友圈和好友分享功能。

代码实现（以vue项目为例）：

首先贴上官方开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

1、引入js

在html页面引入引入http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

2、通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用

wx.config({

  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

  appId: '', // 必填，公众号的唯一标识

  timestamp: , // 必填，生成签名的时间戳

  nonceStr: '', // 必填，生成签名的随机串

  signature: '',// 必填，签名

  jsApiList: [] // 必填，需要使用的JS接口列表

});

debug、appId、timestamp、nonceStr、signature的值可以请求后端，这些信息存储在数据库里，jsApiList就是你将要使用微信提供的接口或者叫方法。比如常用的有分享朋友圈、好友，对应的接口是

updateAppMessageShareData、updateTimelineShareData，在jsApiList中配置jsApiList: [‘updateAppMessageShareData’,‘updateTimelineShareData’]。

3、通过ready接口处理成功验证

wx.ready(()=>{

   //config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

   //使用接口

   wx.showOptionMenu()

})

4、通过error接口处理失败验证

wx.error(function(res){

}

巴特西

微信h5调分享功能

最新文章

热门文章