公众号配置

实现效果：

未配置的默认效果：

1.1 公众号测试号

1. 申请公众号测试号（微信公众平台）

2. 配置公众号测试号

不需要带端口，直接是ip或域名即可

1.2 正式公众号

1.获取appid和appScreat

2.配置白名单

3.按需放好 验证文件，用于验证域名所有权验证，防止恶意滥用，JS-SDK 的必要条件

前端代码实现

1. 安装微信JS-SDK

npm install jweixin-module --save

2. 创建分享js：wxShare.js

//引入微信sdk
const wx = require('jweixin-module');

//config 是后端生成的签名内容
export const initWxShare = (config, shareData) => {
   return new Promise((resolve, reject) => {
   	window.wx.config({
   		debug: process.env.NODE_ENV === 'development',
   		appId: appid,   //填写公众号的appid
   		timestamp: config.timestamp,
   		nonceStr: config.noncestr,    //注意后端返回的noncestr是小写s，前端接收的是大写S
   		signature: config.signature,
   		jsApiList: [
   			'updateAppMessageShareData',
   			'onMenuShareAppMessage',
   		],
   	})
   	
    //微信SDK错误
   	window.wx.error((err) => {
   		//console.error('微信SDK错误:', err)
   		reject(err)
   	})
   	
   //微信SDK准备就绪
   	window.wx.ready(() => {
   		// 新版分享接口
   		window.wx.updateAppMessageShareData({
   			title: shareData.title,     //标题
   			desc: shareData.desc, 	    //描述
   			link: shareData.link,       //链接
   			imgUrl: shareData.imgUrl,   //缩略图
   			success: () => {
   				// console.log('设置分享好友成功')
   				resolve()
   			},
   			fail: (err) => {
   				//console.log('设置分享好友失败')
   			},
   			cancel: () => reject('用户取消分享')
   		})

   		// 旧版分享接口（兼容）
   		window.wx.onMenuShareAppMessage({
   			title: shareData.title,
   			desc: shareData.desc,
   			link: shareData.link,
   			imgUrl: shareData.imgUrl,
   			success: () => {
   				//console.log('旧版设置分享好友成功')
   				resolve()
   			},
   			fail: () => {
   				//console.log('旧版分享接口失败')
   			},
   			cancel: () => reject('用户取消分享')
   		})
   	})
   })
}

注意：
（1）window.wx.xxx： 由于公众号是h5项目，微信浏览器中是不能直接wx.xxxx等操作的，所以，在使用微信js-sdk的api，需要用window.wx.xxx使用
（2）window.wx.config -> debug：在开发时，可以默认开启ture，用于查看js-sdk环境是否存在问题，例如，签名是否有效，可使用校验工具查看（微信 JS 接口签名校验工具）

3. 分享页.vue

    //引入配置好的js
	import {initWxShare} from '../../util/wxShare'
	export default{
	   data(){
	     return{
	        alarmInfor:{},
	     }
	   },
	   mounted:{
	     this.getWxConfigs()
	   },
	   methods:{
	    getWxConfigs(){
	  		//请求后端签名配置接口，参和后端约定好
			uni.request({
			    url: 'https://www.example.com/request?ip="当前页面的ip或域名"&params="当前页面的参"', //仅为示例，并非真实接口地址。
			    data: {
			        text: 'uni.request'
			    },
			    header: {
			        'custom-header': 'hello' //自定义请求头信息
			    },
			    success: (res) => {
			        let results = res.data.result
			        const shareData = {
							title: this.alarmInfor.crimeTypeName,
							desc: `告警等级：${this.alarmInfor.alarmLevel == "1" ? '蓝色告警' : this.alarmInfor.alarmLevel == "2" ?'黄色告警' : this.alarmInfor.alarmLevel == "3" ? '红色告警' : '暂无'}\n告警地点：${this.alarmInfor.alarmAddress||'暂无'}`,
							link: this.alarmInfor.shareLink,
							imgUrl:this.alarmInfor.imgUrl
						}
						//调用sdk配置，初始化分享功能
						initWxShare(results, shareData)
			    }
		  });
	    }
	  }
	}

踩坑：（附：官方文档中分享中常见的问题）

1.uni.request的url： get接口+参（当前分享页的完整的url：ip+地址栏参）

（1）当前项目是history模式，之前采用的是一个参url将整个地址栏的href传过去，整个url会是：
https://www.example.com/request?url=https://www.example.com/vistorPage/detail?id=12134&type=1&workId=34363435242 （后端不愿意改成post）
（2）这会使请求接口存在读取不完全(不是地址栏)，实际上是 https://www.example.com/request?url=https://www.example.com/vistorPage/detail?id=12134&type（不是漏复制，后台看到的就是这样的整个url），导致获取的签名signature一直是无效的
（3）由于接口的安全机制（防止sql注入），整个url中存在特殊sql操作符也是会被忽略的，例如 存在or，https://www.example.com/request?url=https://www.example.com/vistorPage/detail?id=12134&type=1&workId=34363435242 会变成 —>https://www.example.com/request?url=https://www.example.com/vistPage/detail?id=12134&type=1&wkId=34363435242。
（4）所以以上这样也都会导致签名失败
（5）最后解决办法，url分解成2个参，ip+stingParam(拼成字符串给后端分解，param的每个key于value用’￥’，前后端自定义约束)

2.测试公众号配置后，不是生产图文（或名片），即默认的名片

其他配置正常的情况下（签名，域名配置等无误）
1.从微信公众号进入（公众号测试号配置菜单进入）
2.微信扫码（微信开发者工具编译的码）进入网页
3.收藏网页链接后，从收藏进入
4.正式公众号无需考虑

3.在分享页分享后，非分享页还是分享页的内容

1.原因：当前页面已经配置好了，做的只是需要分享的页面才有配置时，跳转非分享还会是分享页的内容
2.解决办法：在这个页面销毁后，清除wx.config里的配置

4.进入分享页，分享的链接是上一个页面的

1.原因：页面跳转时URL可能没有实时更新
2.解决办法：页面跳转用的是uni的跳转，导致uniapp存在缓存，实际得到的url是没有实时更新的，所以，跳转时最好换成window.location.href，强制刷新页面的url

以上是本文的所有啦！在这里插入代码片