uniapp h5 公衆号 自定義卡片式分享連結

描述：

首次開發夾片式分享連結，過程中遇到許多坑，查閱了幾十篇部落格終于完成了這個功能，記錄的開發過程不一定符合你的需求，但如果你也是用uniapp開發，希望本篇能夠幫助到你。

效果圖：

準備工作：

設定JS安全域名：設定>公衆号設定>功能設定；把伺服器域名填入JS接口安全域名。

設定IP白名單：設定>安全中心>IP白名單；把伺服器IP位址填入IP白名單。

注意：配置後需下載下傳效驗檔案并上傳你自己的伺服器根目錄。

• 如何正确的在項目中接入微信JS-SDK工具包？

可根據官方文檔描述的步驟流程開發。我這裡主要補充一些不明确、詳細、易踩坑的開發過程。

踩坑：

官方文檔的這個步驟沒有明确介紹如何正确在項目中引入JS-SDK，隻是說明了有哪些方式可以引入JS-SDK工具包。這裡我給出倆引入方案。（建議使用方案1）

方案1：

1.使用npm方式引入，這裡沒有nodejs、npm環境的需要配置下，具體步驟可自行百度。這裡給大家推薦一個解決方案nodejs、npm環境安裝及配置供參考。

2.HBuilderX開發工具選擇項目右鍵選擇使用指令行視窗打開所在目錄或者自行win+r輸cmd導航到項目所在位置執行以下指令

npm install jweixin-module --save
           

效果如下：執行成功後項目根目錄多了node_modules、package-lock.json兩個檔案，（強迫症/縮減代碼包體積）關于node_modules檔案保留jweixin-module>lib>index.js此檔案

方案2：點選此連結http://res.wx.qq.com/open/js/jweixin-1.6.0.js将JS-SDK源碼直接copy到項目中任意位置，然後在項目根目錄建立package-lock.json檔案（此處不要改變命名），将下列源碼copy到這個檔案。

{
  "requires": true,
  "lockfileVersion": 1,
  "dependencies": {
    "jweixin-module": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/jweixin-module/-/jweixin-module-1.6.0.tgz",
      "integrity": "sha512-dGk9cf+ipipHmtzYmKZs5B2toX+p4hLyllGLF6xuC8t+B05oYxd8fYoaRz0T30U2n3RUv8a4iwvjhA+OcYz52w=="
    }
  }
}
           

前端代碼：

成功引入JS-SDK到項目後，可以在需要使用分享功能的頁面引用JS-SDK，預設為首頁

/* 使用CommonJs規範引入 */
const jWeixin = require('../../node_modules/jweixin-module/lib/index.js')
 
/* 使用ES6子產品引入 */
import jWeixin from '../../node_modules/jweixin-module/lib/index.js'
           

後端參考官方文檔傳遞以下參數，有php檔案接口示例可copy，這裡隻講前端流程

請求後端的接口擷取addId、nonceStr、signature、timestamp四個主要參數用來為config接口指派，具體請求接口代碼如下，我這裡請求格式是經過Promise封裝處理，你可以用自己想用的接口請求格式比如uni.request(OBJECT)

onShow() {
	let that = this
	//擷取目前url傳遞給背景擷取授權和簽名資訊
	let uri = encodeURIComponent(window.location.href.split('#')[0])
	listing('接口請求位址?url=' + uri)
		.then((res) => {
		    //通過微信config接口注入配置
			jWeixin.config({
				debug: false, //調試模式
				appId: res[1].data.appId, //必填，公衆号的唯一辨別
				timestamp: res[1].data.timestamp, //必填，生成簽名的時間戳
				nonceStr: res[1].data.nonceStr, //必填，生成簽名的随機串
				signature: res[1].data.signature, //必填，簽名
				jsApiList: [
					'updateTimelineShareData',
					'updateAppMessageShareData'
				] //必填，需要使用的JS接口清單
				})
				window.share_config = { //自定義分享内容
					share: {
						imgUrl: '網絡圖示位址', //分享圖示
						desc: '自定義', //分享介紹
						title: '自定義', //分享标題
						link: '項目連結位址', //分享網址
						success: function(res) {}
					}
				}
				jWeixin.ready(function() {
					jWeixin.updateTimelineShareData(share_config.share) //分享微信朋友圈
					jWeixin.updateAppMessageShareData(share_config.share) //分享微信好友
				})
			})
			.catch((err) => {
				console.log(err)
			})
},
           

請求成功後控制台列印config:ok，這樣的情況就表示分享功能完成，可以去移動端看效果了，我不太會做總結，有疑問可以留言，耐心的找方法就對了，我卡這裡兩周解決後心情愉悅，希望大家共同進步！！！