最近一个项目有一个微信分享并且需要自定义微信分享内容的需求,因为是第一次接触到微信分享,所以记录一下期间遇到的一些问题,以及完成功能的整个流程。
以下为大概流程 (细节放在各个阶段)
- 安装 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 实现微信分享及自定义内容,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!