h5实现微信分享功能,h5自定义微信分享按钮

　　最近一个项目有微信分享的需求，需要定制微信分享的内容。因为是第一次接触微信分享，我就把期间遇到的一些问题和完成功能的全过程记录下来。

　　以下是一般流程(细节放在每个阶段)

　　安装weixin-js-sdk初始化微信分享配置微信分享自定义内容(发送给好友，发送到朋友圈)1、安装weixin-js-sdk

　　npm安装威信-js-sdk - save-dev

　　具体说明请参考微信官方文档。

　　2、初始化微信分享

　　因为我正在做的很多项目都需要用到微信分享的功能，所以微信分享的代码会封装在这里。

　　下面代码中的Api实际上是一个axios请求。

　　从 weixin-js-SDK 导入wx从 @/API 导入Api const wx Api={/* * *[wx注册微信Api初始化]* @ param { function } callback[ready callback function]*/wx register(callback，url){ let query={//这里的url必须是与你要分享的页面完全对应的URL，需要转换base 64 URL:URL } Api . getwxjssdk(query)。然后(RES={ let data=RES . data wx . config({ debug:false，//开启调试模式appId: data.appId，//required，微信官方账号唯一标识符timestamp: data.timestamp，//required，timestamp non centr:data . non centr，//required，随机字符串签名：data.signature，//required，签名，见附录1 jsapi list:data . jsapi list//required，要使用的JS接口列表，见附录2 } })wx . ready((RES)={//如需

　　3.配置微信共享自定义内容(发送给朋友和朋友)

　　第二步，为微信初始化套餐配置，但还是缺少相应的分享功能，下面介绍一下如何改进。

　　//Add/* * [ShareTimeline自定义微信分享到朋友圈]* @ param {[type]} option[分享信息]* @ param {[type]} success[回调成功]* @ param {[type]} error[回调失败]*/share timeline(option){ wx . updatetimelinesharedata({ title:option . title，//share title link: option.link，//share link imgUrl:option . imgUrl，//share icon success () {//安装成功}，cancel () {//安装失败} } } } /*** [ShareAppMessage自定义微信分享到好友]* @ param {[type]} option[分享信息]* @ param {[type]} success[回调成功]* @ param {[type]} error[回调失败]*/ShareAppMessage(option){ wx . updateappmessagesharedata({ title:option . title，//分享标题desc: option.desc，//分享描述link: option.link，//分享链接imgur: option.imgur，//分享图标success () {//设置成功}，当页面被调用时

　　//vue为例//以下函数的有形引用请参考以上方法import wx from your packaged file mounted(){ let base64=require( js-base64 ). base 64 let URL=base64 . encode(window . location . href)wx . wxRegCallback(this . wxRegCallback，URL)}，方法：{//自定义jdk callback wxRegCallback () {}，//自定义函数wxshareappmessage(){ let option={ title: ，//共享标题descShareAppMessage(option)}，//用户自定义函数wxshare timeline(){ let option={ title:，//共享标题desc: ，//共享描述链接：，//共享链接imgur: //共享图标}//注入通用方法wxShareTimeline(option) }}就是这样。

　　注：

　　微信分享只能在真机上测试。

　　本地localhost形式的域名无法通过微信的验证。

　　总结

　　以上是边肖推出的实现微信分享和自定义内容的Html5。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读