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制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 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设计模式中的工厂模式
2008/06/12 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
跟老齐学Python之复习if语句
2014/10/02 Python
python解析xml文件操作实例
2014/10/05 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
python 读取数据库并绘图的实例
2019/12/03 Python
python 如何上传包到pypi
2020/12/24 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
会走路的树教学反思
2014/02/20 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
幼儿园个人总结
2015/02/28 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
实操Python爬取觅知网素材图片示例
2021/11/27 Python