Html5 微信分享以及自定义内容

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

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

• 安装 weixin-js-sdk
• 初始化微信分享
• 配置微信分享自定义内容（发送给朋友，发送到朋友圈）

一、安装weixin-js-sdk

npm install weixin-js-sdk --save-dev
复制代码

具体的使用说明查阅微信官方文档

二、 初始化微信分享

由于本人正在作的项目多处须要使用到微信分享的功能，因此这里会对微信分享的代码进行封装

下面的url其实就是页面的url,由于须要发到后端进行签名认证，可是这个url有个状况须要注意

当url为www.xx.com/index.html#/形式 当是这种状况的时候，假如你在安卓上使用页面完整的url去后端拿参数的时，在安卓端是能够完成配置的，可是在苹果端的时候，会莫名的出现有时候配置会报错，而且有可能在刷新页面的时候，就又能够完成配置。

解决方案：使用encodeURIComponent()函数编码url，而且是截取了#以前的url，例如：

let url = encodeURIComponent(window.location.href.split('#')[0])
复制代码

具体的缘由也不是很清楚，查看了资料说是进行了encodeURIComponent()编码就能够，可是为何在安卓端是使用了base64编码又不会出现这种状况，而且在苹果端我这边是刷新一下页面就能够了，而且有时候又能够经过验证，不会返回签名错误。

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 
    }
    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()
      }
    })
  },
}
复制代码

三、 配置微信分享自定义内容（发送给朋友，发送到朋友圈）

第二步对于微信初始化了封装配置，可是还缺乏了相对应的分享等功能，这边就完善一下，

// 在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 () {
    // 设置失败
  }
})
}
复制代码

四、页面调用时

// 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形式的域名没法经过微信的校验