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) } } 以上就是微信分享的流程,如有不敷,接待指出 注: 微信分享只能在真机上测试 总结 以上所述是小编给各人先容的Html5 实现微信分享及自界说内容,但愿对各人有所辅佐,假如各人有任何疑问接待给我留言,小编会实时回覆各人的! (编辑:河北网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |