微信分享，咋一看好像很復(fù)雜，實(shí)則非常簡(jiǎn)單。只需要調(diào)用微信官方出的微信jssdk，加上些許配置，就可以實(shí)現(xiàn)h5頁面在微信上的分享，官方文檔地址為：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

一、獲取基本信息

找到已有公眾號(hào)的appid，根據(jù)這個(gè)appid和url向后端發(fā)起請(qǐng)求，拿到配置所需要的參數(shù)：timestamp、noncestr和signature。

二、實(shí)現(xiàn)

1、頁面引入JS-SDK文件

通過script標(biāo)簽，引入微信官網(wǎng)的JS-SDK文件

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>

2、基本配置

wx.config({  debug: false, // 是否開啟調(diào)試模式  appId: appid, //appid  timestamp: timestamp, // 時(shí)間戳  nonceStr: noncestr, // 隨機(jī)字符串  signature: signature, // 簽名  jsApiList: [    'onMenuShareTimeline',    'onMenuShareAppMessage',    'onMenuShareQQ',    'onMenuShareWeibo',    'onMenuShareQZone'  ] // 需要使用的JS接口列表})

3、使用

wx.ready(function(){  // 分享給好友  wx.onMenuShareAppMessage({    title: title, // 分享標(biāo)題    desc: desc, // 分享描述    link: link, // 分享鏈接    imgUrl: imgUrl, // 分享圖標(biāo)    success: function () {      doShareDone()    },    cancel: function () {      doShareCancel()    }  })   // 分享到朋友圈  wx.onMenuShareTimeline({    title: title, // 分享標(biāo)題    link: link, // 分享鏈接    imgUrl: imgUrl, // 分享圖標(biāo)    success: function () {      doShareDone()    },    cancel: function () {      doShareCancel()    }  })})

// 分享成功回調(diào)function doShareDone () {  console.log('分享成功')}

// 取消分享回調(diào)function doShareCancel () {  console.log('取消了分享')}

三、調(diào)試

wx.config里的debug字段設(shè)置為true時(shí)，就可以進(jìn)行調(diào)試。

調(diào)試要用到微信開發(fā)者工具，選擇公眾號(hào)網(wǎng)頁項(xiàng)目，輸入頁面地址就可以了。

四、遇到的問題及解決方案

微信JS-SDK說明文檔的附錄5里有大部分問題的解決方案，在這里我列出我遇到的幾個(gè)上面沒有給出解決方案的。

1、Uncaught TypeError: Cannot read property 'config' of undefined

解決：html頁面單獨(dú)引入了sdk，并且組件統(tǒng)一也引入了一遍sdk，導(dǎo)致問題，刪除其中之一。

2、Uncaught (in promise) TypeError: Cannot read property 'ready' of undefined

解決：同問題1。

3、invalid signature

解決：如果文檔里的方法都沒有解決這個(gè)問題，還有一種方法，先設(shè)置一種最基礎(chǔ)的配置，使其config ok，然后再設(shè)置一遍自己需要的有各種參數(shù)的分享文案，這樣能繞過配置，成功分享。說的可能有點(diǎn)拗口，簡(jiǎn)單點(diǎn)理解就是，頁面只要有一個(gè)config成功的配置，就可以再繼續(xù)配置其它分享，哪怕這個(gè)分享配置的signature無效。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。