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

发布时间：2019-08-20 14:31:47 作者：佚名

我要评论

这篇文章主要介绍了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 实现微信分享及自定义内容，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

Tag：自定义内容微信分享 HTML5

HTML5播放实现rtmp流直播
这篇文章主要介绍了HTML5播放实现rtmp流直播,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-16
html5用video标签流式加载的实现
这篇文章主要介绍了html5用video标签流式加载的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习
2020-05-20
基于 HTML5 WebGL 实现的医疗物流系统
物联网( IoT )，简单的理解就是物体之间通过互联网进行链接。这篇文章给大家介绍基于 HTML5 WebGL 实现的医疗物流系统，感兴趣的朋友跟随小编一起看看吧
2019-10-08
HTML5 canvas 瀑布流文字效果的示例代码
这篇文章主要介绍了HTML5 canvas 瀑布流文字效果的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-31
HTML5移动端手机网站开发流程
这篇文章主要为大家介绍了HTML5移动端手机网站开发流程，想要进行移动端手机网站开发的朋友可以参考一下
2016-04-25
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
一款网页瀑布流效果，可以实现图片的无限制加载。基于时下流行的HTML5技术编写而成，除了实现瀑布流，还加入了CSS5的图片修饰效果，比如图片的圆角边框、图片阴影立体效果
2014-03-07
HTML5梦幻之旅——炫丽的流星雨效果实现过程
流星出现的时候，人们都喜欢对着它们许愿，因为传说对着流星许下愿望后，愿望就能实现，最近出于兴趣，制作一个拖尾效果，后来想到可以通过拖尾效果来实现一下流星雨的效果
2013-08-06
HTML5 离线应用之打造零请求、无流量网站的解决方法
今天Web应用程序已经很复杂了，以现在的发展，会将越来越复杂，但他有一个致命缺点，不能脱离internet链接，因此在HTML中新增了一API，它使用一个本地存储机制很好地解决了
2013-04-25
Html5之webcoekt播放JPEG图片流
这篇文章主要介绍了Html5之webcoekt播放JPEG图片流,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学
2020-09-22