Html5 实现微信分享及自定义内容的流程


Posted in HTML / CSS onAugust 20, 2019

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

以下为大概流程 (细节放在各个阶段)
 

  • 安装 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 实现微信分享及自定义内容,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

HTML / CSS 相关文章推荐
纯CSS3实现质感细腻丝滑按钮
Mar 09 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 #HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 #HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 #HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 #HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 #HTML / CSS
html通过canvas转成base64的方法
Jul 18 #HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 #HTML / CSS
You might like
大师制作的中短波矿石收音机
2020/04/02 无线电
PHP中创建并处理图象
2006/10/09 PHP
PHP新手上路(十二)
2006/10/09 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
Python引用传值概念与用法实例小结
2017/10/07 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
python绘制多个子图的实例
2019/07/07 Python
python中的错误如何查看
2020/07/08 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
元旦活动感言
2014/03/08 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
市场策划求职信
2014/08/07 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python