最近一个项目有一个微信分享并且需要自定义微信分享内容的需求,因为是第一次接触到微信分享,所以记录一下期间遇到的一些问题,以及完成功能的整个流程。
以下为大概流程 (细节放在各个阶段)
- 安装 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 实现微信分享及自定义内容,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 曾轶可.2011-一只猫的旅行【天娱传媒】【WAV+CUE】
- 黑神话悟空上品狼刺客精魄获取方法一览|上品狼刺客精魄收集攻略
- 视觉小说《神椿市建设中REGENERATE》将于2025年2月20日发售
- 黑神话悟空上品鼠弩手精魄获取方法一览|上品鼠弩手精魄收集攻略
- 中国音乐地图听见世界非物质文化遗产《非遗HQCD》wav
- 中国民乐合奏作品集《华夏之音HQ》头版限量编号[WAV+CUE]
- [电影原声带]黎允文《天将雄师》[FLAC+CUE]
- 曝NS继任机型已进入量产阶段:已花了30亿日元
- 不是Switch2?曝《马里奥惊奇》NS捆绑包即将公开
- 暖心任天堂!网友Switch维修返还时贴纸被完好保留
- 《国语老歌 经典对唱情歌 2CD》[WAV/分轨][1.1GB]
- 《刀郎 翻唱精选华语专辑 披着羊皮的狼 》[WAV+CUE][430MB]
- 《真的田震 中国乐坛红极一时的歌者 精品集》[WAV+CUE][300MB]
- 群星.1995-新滚石九大天王之情歌大全【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·纵夏欢唱【滚石】【WAV+CUE】