经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
Html5 实现微信分享及自定义内容的流程
来源:jb51  时间:2019/8/21 9:18:24  对本文有异议

最近一个项目有一个微信分享并且需要自定义微信分享内容的需求,因为是第一次接触到微信分享,所以记录一下期间遇到的一些问题,以及完成功能的整个流程。

以下为大概流程 (细节放在各个阶段)
 

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

1、安装 weixin-js-sdk

npm install weixin-js-sdk --save-dev

具体的使用说明查阅微信官方文档

2、 初始化微信分享
 

因为本人正在做的项目多处需要使用到微信分享的功能,所以这里会对微信分享的代码进行封装

下面的代码中的Api其实就是axios请求

  1. import wx from 'weixin-js-sdk'
  2. import api from '@/api'
  3. const wxApi = {
  4. /**
  5. * [wxRegister 微信Api初始化]
  6. * @param {Function} callback [ready回调函数]
  7. */
  8. wxRegister (callback, url) {
  9. let query = {
  10. // 这里的url必须是你要分享的页面完全对应的url,并且需要转换 base64
  11. url: url
  12. }
  13. api.getWxJsSdk(query).then(res => {
  14. let data = res.data
  15. wx.config({
  16. debug: false, // 开启调试模式
  17. appId: data.appId, // 必填,公众号的唯一标识
  18. timestamp: data.timestamp, // 必填,生成签名的时间戳
  19. nonceStr: data.nonceStr, // 必填,生成签名的随机串
  20. signature: data.signature, // 必填,签名,见附录1
  21. jsApiList: data.jsApiList // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
  22. })
  23. })
  24. wx.ready((res) => {
  25. // 如果需要定制ready回调方法
  26. if (callback) {
  27. callback()
  28. }
  29. })
  30. },
  31. }

注:以上需要转换base64的可以使用 js-base64

3、 配置微信分享自定义内容(发送给朋友,发送到朋友圈)

第二步对于微信初始化了封装配置,但是还缺少了相对应的分享等功能,这边就完善一下,

  1. // 在wxRegister函数后面添加
  2. /**
  3. * [ShareTimeline 自定义微信分享到朋友圈]
  4. * @param {[type]} option [分享信息]
  5. * @param {[type]} success [成功回调]
  6. * @param {[type]} error [失败回调]
  7. */
  8. ShareTimeline (option) {
  9. wx.updateTimelineShareData({
  10. title: option.title, // 分享标题
  11. link: option.link, // 分享链接
  12. imgUrl: option.imgUrl, // 分享图标
  13. success () {
  14. // 设置成功
  15. },
  16. cancel () {
  17. // 设置失败
  18. }
  19. })
  20. },
  21. /**
  22. * [ShareAppMessage 自定义微信分享到朋友]
  23. * @param {[type]} option [分享信息]
  24. * @param {[type]} success [成功回调]
  25. * @param {[type]} error [失败回调]
  26. */
  27. ShareAppMessage (option) {
  28. wx.updateAppMessageShareData({
  29. title: option.title, // 分享标题
  30. desc: option.desc, // 分享描述
  31. link: option.link, // 分享链接
  32. imgUrl: option.imgUrl, // 分享图标
  33. success () {
  34. // 设置成功
  35. },
  36. cancel () {
  37. // 设置失败
  38. }
  39. })
  40. }

4、页面调用时

  1. // vue 为例
  2. // 以下的函数有形参请参考上面的方法
  3. import wx from '你封装的文件'
  4. mounted(){
  5. let base64 = require('js-base64').Base64
  6. let url = base64.encode(window.location.href)
  7. wx.wxRegister(this.wxRegCallback,url)
  8. },
  9. methods:{
  10. // 自定义的jdk回调
  11. wxRegCallback () {},
  12. // 自定义的分享给朋友的函数
  13. wxShareAppMessage(){
  14. let option = {
  15. title:'',// 分享标题
  16. desc: '', // 分享描述
  17. link: '', // 分享链接
  18. imgUrl: '' // 分享图标
  19. }
  20. // 注入通用方法
  21. wx.ShareAppMessage(option)
  22. },
  23. // 自定义的分享给朋友圈的函数
  24. wxShareTimeline(){
  25. let option = {
  26. title:'',// 分享标题
  27. desc: '', // 分享描述
  28. link: '', // 分享链接
  29. imgUrl: '' // 分享图标
  30. }
  31. // 注入通用方法
  32. wx.ShareTimeline(option)
  33. }
  34. }

以上就是微信分享的流程,若有不足,欢迎指出

注:

微信分享只能在真机上测试
使用本地localhost形式的域名无法通过微信的校验

总结

以上所述是小编给大家介绍的Html5 实现微信分享及自定义内容,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号