uniapp h5 公众号自定义卡片式分享链接

描述：首次开发卡片式分享链接，过程中遇到许多坑，查阅了几十篇博客终于完成了这个功能，记录的开发过程不一定符合你的需求，但如果你也是用uniapp开发，希望本篇能够帮助到你。效果图对比：准备工作：配置微信公众号的JS接口安全域名，具体配置流程不懂的可以查阅百度，这里需注意域名不用带协议，格式：www.baidu.com。配置后需下载效验文件并上传你自己的服务器。如何正确的在项目中接入微信JS-SDK

今年第一次改BUG

3378人浏览 · 2020-12-23 16:37:53

今年第一次改BUG · 2020-12-23 16:37:53 发布

描述：

首次开发卡片式分享链接，过程中遇到许多坑，查阅了几十篇博客终于完成了这个功能，记录的开发过程不一定符合你的需求，但如果你也是用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，这样的情况就表示分享功能完成，可以去移动端看效果了，我不太会做总结，有疑问可以留言，耐心的找方法就对了，我卡这里两周解决后心情愉悦，希望大家共同进步！！！