网站内容及实现方式(HTML5canvas实现微信分享及自定义内容的流程(组图))

　　网站内容及实现方式(HTML5canvas实现微信分享及自定义内容的流程(组图))

　　您现在的位置是：网站首页>编程素材编程素材Html5实现微信分享和自定义内容流程HTML5画布瀑布文字效果示例代码HTML5手机网站开发流程HTML5实现瀑布效果无限加载用边框和圆形阴影 HTML5梦幻之旅-炫丽流星雨效果实现流程 HTML5离线应用创建零请求，无流量解决方案网站 Html5 webcoekt播放JPEG图片流

　　

　　2021-09-0154人看过

　　介绍本文章主要介绍Html5实现微信分享和自定义内容的流程。非常好，有一定的参考价值。有需要的朋友可以参考以下

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

　　以下是大体流程（每个阶段都放了细节）

　　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实现。我希望它对你有帮助。如有任何问题，请给我留言，小编会及时回复您！

　　提示：本文由大神整理自网络。如有侵权，请联系本站删除！

　　本站声明：

　　1、本站所有资源均来源于互联网，不保证100%完整，不提供任何技术支持；

　　2、本站发布的文章及附件仅供学习研究之用；不得用于商业或非法目的；否则由此产生的法律后果，本站概不负责！

　　上一篇：使用canvas实现圆形进度条的方法详解canvas实现圆形进度条*敏*感*词*示例代码HTML5 Canvas实现圆形进度条并显示数字百分比效果示例demo)

　　下一篇：如何将前端canvas*敏*感*词*转成mp4视频 HTML5 Canvas破碎重组视频效果示例代码 Canvas像素操作视频绿屏抠图 Canvas的视频遮罩插件canvas与html5实现视频截图功能示例 Canvas获取第一帧缩略图视频