Html5 实现微信分享及自定义内容的流程
发布时间:2019-08-20 14:31:47 作者:佚名 我要评论
这篇文章主要介绍了Html5 实现微信分享及自定义内容的流程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
最近一个项目有一个微信分享并且需要自定义微信分享内容的需求,因为是第一次接触到微信分享,所以记录一下期间遇到的一些问题,以及完成功能的整个流程。
以下为大概流程 (细节放在各个阶段)
- 安装 weixin-js-sdk
- 初始化微信分享
- 配置微信分享自定义内容(发送给朋友,发送到朋友圈)
1、安装 weixin-js-sdk
npm install weixin-js-sdk --save-dev
具体的使用说明查阅微信官方文档
2、 初始化微信分享
因为本人正在做的项目多处需要使用到微信分享的功能,所以这里会对微信分享的代码进行封装
下面的代码中的Api其实就是axios请求
import wx from 'weixin-js-sdk' import api from '@/api' const wxApi = { /** * [wxRegister 微信Api初始化] * @param {Function} callback [ready回调函数] */ wxRegister (callback, url) { let query = { // 这里的url必须是你要分享的页面完全对应的url,并且需要转换 base64 url: url } api.getWxJsSdk(query).then(res => { let data = res.data wx.config({ debug: false, // 开启调试模式 appId: data.appId, // 必填,公众号的唯一标识 timestamp: data.timestamp, // 必填,生成签名的时间戳 nonceStr: data.nonceStr, // 必填,生成签名的随机串 signature: data.signature, // 必填,签名,见附录1 jsApiList: data.jsApiList // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }) }) wx.ready((res) => { // 如果需要定制ready回调方法 if (callback) { callback() } }) }, }
注:以上需要转换base64的可以使用 js-base64
3、 配置微信分享自定义内容(发送给朋友,发送到朋友圈)
第二步对于微信初始化了封装配置,但是还缺少了相对应的分享等功能,这边就完善一下,
// 在wxRegister函数后面添加 /** * [ShareTimeline 自定义微信分享到朋友圈] * @param {[type]} option [分享信息] * @param {[type]} success [成功回调] * @param {[type]} error [失败回调] */ ShareTimeline (option) { wx.updateTimelineShareData({ title: option.title, // 分享标题 link: option.link, // 分享链接 imgUrl: option.imgUrl, // 分享图标 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, // 分享链接 imgUrl: option.imgUrl, // 分享图标 success () { // 设置成功 }, cancel () { // 设置失败 } }) }
4、页面调用时
// vue 为例 // 以下的函数有形参请参考上面的方法 import wx from '你封装的文件' mounted(){ let base64 = require('js-base64').Base64 let url = base64.encode(window.location.href) wx.wxRegister(this.wxRegCallback,url) }, methods:{ // 自定义的jdk回调 wxRegCallback () {}, // 自定义的分享给朋友的函数 wxShareAppMessage(){ let option = { title:'',// 分享标题 desc: '', // 分享描述 link: '', // 分享链接 imgUrl: '' // 分享图标 } // 注入通用方法 wx.ShareAppMessage(option) }, // 自定义的分享给朋友圈的函数 wxShareTimeline(){ let option = { title:'',// 分享标题 desc: '', // 分享描述 link: '', // 分享链接 imgUrl: '' // 分享图标 } // 注入通用方法 wx.ShareTimeline(option) } }
以上就是微信分享的流程,若有不足,欢迎指出
注:
微信分享只能在真机上测试
使用本地localhost形式的域名无法通过微信的校验
总结
以上所述是小编给大家介绍的Html5 实现微信分享及自定义内容,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
相关文章
- 这篇文章主要介绍了HTML5播放实现rtmp流直播,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-06-16
- 这篇文章主要介绍了html5用video标签流式加载的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习2020-05-20
- 物联网( IoT ),简单的理解就是物体之间通过互联网进行链接。这篇文章给大家介绍基于 HTML5 WebGL 实现的医疗物流系统,感兴趣的朋友跟随小编一起看看吧2019-10-08
- 这篇文章主要介绍了HTML5 canvas 瀑布流文字效果的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-01-31
- 这篇文章主要为大家介绍了HTML5移动端手机网站开发流程,想要进行移动端手机网站开发的朋友可以参考一下2016-04-25
- 一款网页瀑布流效果,可以实现图片的无限制加载。基于时下流行的HTML5技术编写而成,除了实现瀑布流,还加入了CSS5的图片修饰效果,比如图片的圆角边框、图片阴影立体效果2014-03-07
- 流星出现的时候,人们都喜欢对着它们许愿,因为传说对着流星许下愿望后,愿望就能实现,最近出于兴趣,制作一个拖尾效果,后来想到可以通过拖尾效果来实现一下流星雨的效果2013-08-06
- 今天Web应用程序已经很复杂了,以现在的发展,会将越来越复杂,但他有一个致命缺点,不能脱离internet链接,因此在HTML中新增了一API,它使用一个本地存储机制很好地解决了2013-04-25
- 这篇文章主要介绍了Html5之webcoekt播放JPEG图片流,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学2020-09-22
最新评论