這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)怎么在Html5中實(shí)現(xiàn)微信分享功能，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)是專(zhuān)業(yè)的安義網(wǎng)站建設(shè)公司，安義接單;提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行安義網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

1、安裝 weixin-js-sdk

npm install weixin-js-sdk --save-dev

具體的使用說(shuō)明查閱微信官方文檔

2、 初始化微信分享
 

因?yàn)楸救苏谧龅捻?xiàng)目多處需要使用到微信分享的功能，所以這里會(huì)對(duì)微信分享的代碼進(jìn)行封裝

下面的代碼中的Api其實(shí)就是axios請(qǐng)求

import wx from 'weixin-js-sdk'
import api from '@/api'
const wxApi = {
    /**
   * [wxRegister 微信Api初始化]
   * @param  {Function} callback [ready回調(diào)函數(shù)]
   */
  wxRegister (callback, url) {
    let query = {
     // 這里的url必須是你要分享的頁(yè)面完全對(duì)應(yīng)的url，并且需要轉(zhuǎn)換 base64
      url: url 
    }
    api.getWxJsSdk(query).then(res => {
      let data = res.data
      wx.config({
        debug: false, // 開(kāi)啟調(diào)試模式
        appId: data.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
        timestamp: data.timestamp, // 必填，生成簽名的時(shí)間戳
        nonceStr: data.nonceStr, // 必填，生成簽名的隨機(jī)串
        signature: data.signature, // 必填，簽名，見(jiàn)附錄1
        jsApiList: data.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄2
      })
    })
    wx.ready((res) => {
      // 如果需要定制ready回調(diào)方法
      if (callback) {
        callback()
      }
    })
  },
}

注：以上需要轉(zhuǎn)換base64的可以使用 js-base64

3、 配置微信分享自定義內(nèi)容（發(fā)送給朋友，發(fā)送到朋友圈）

第二步對(duì)于微信初始化了封裝配置，但是還缺少了相對(duì)應(yīng)的分享等功能，這邊就完善一下，

// 在wxRegister函數(shù)后面添加
/**
* [ShareTimeline 自定義微信分享到朋友圈]
* @param {[type]} option [分享信息]
* @param {[type]} success [成功回調(diào)]
* @param {[type]} error   [失敗回調(diào)]
*/
ShareTimeline (option) {
wx.updateTimelineShareData({
  title: option.title, // 分享標(biāo)題
  link: option.link, // 分享鏈接
  imgUrl: option.imgUrl, // 分享圖標(biāo)
  success () {
    // 設(shè)置成功
  },
  cancel () {
    // 設(shè)置失敗
  }
})
},
/**
* [ShareAppMessage 自定義微信分享到朋友]
* @param {[type]} option [分享信息]
* @param {[type]} success [成功回調(diào)]
* @param {[type]} error   [失敗回調(diào)]
*/
ShareAppMessage (option) {
wx.updateAppMessageShareData({
  title: option.title, // 分享標(biāo)題
  desc: option.desc, // 分享描述
  link: option.link, // 分享鏈接
  imgUrl: option.imgUrl, // 分享圖標(biāo)
  success () {
    // 設(shè)置成功
  },
  cancel () {
    // 設(shè)置失敗
  }
})
}

4、頁(yè)面調(diào)用時(shí)

// vue 為例
// 以下的函數(shù)有形參請(qǐng)參考上面的方法
import wx from '你封裝的文件'
mounted(){
    let base64 = require('js-base64').Base64
    let url = base64.encode(window.location.href)
    wx.wxRegister(this.wxRegCallback,url)
},
methods:{
    // 自定義的jdk回調(diào)
    wxRegCallback () {},
    // 自定義的分享給朋友的函數(shù)
    wxShareAppMessage(){
        let option = {
            title:'',// 分享標(biāo)題
            desc: '', // 分享描述
            link: '', // 分享鏈接
            imgUrl: '' // 分享圖標(biāo)
        }
        // 注入通用方法
        wx.ShareAppMessage(option)
    },
    // 自定義的分享給朋友圈的函數(shù)
    wxShareTimeline(){
        let option = {
            title:'',// 分享標(biāo)題
            desc: '', // 分享描述
            link: '', // 分享鏈接
            imgUrl: '' // 分享圖標(biāo)
        }
        // 注入通用方法
        wx.ShareTimeline(option)
    }
}

上述就是小編為大家分享的怎么在Html5中實(shí)現(xiàn)微信分享功能了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。