html5微信分享图标和文本设置,科技常识：Html5 实现微信分享及自定义内容的流程...

今天小编跟大家讲解下有关Html5 实现微信分享及自定义内容的流程 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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 实现微信分享及自定义内容，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。