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 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 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
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
python实现决策树、随机森林的简单原理
2018/03/26 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
python3.4爬虫demo
2019/01/22 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
歌颂祖国的演讲稿
2014/05/04 职场文书
高三霸气励志标语
2014/06/24 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
微信搭讪开场白
2015/05/28 职场文书
付款证明格式范文
2015/06/19 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android