uniapp 转H5后 实现微信浏览器自定义分享样式

uniapp 项目转 h5

1.在manifest.json文件中,找到H5配置一下路径,需要注意这个名字需要和布到线上的文件夹名字一致

2.就是运行打包了 选择网站pc就是h5打包了,之后.，网站域名，例如www.xxx.com或者你的服务器的IP地址47.103.XX.XX，（这个地址是你将项目打包之后存放放静态文件的地址）

3.剩下的就需要后端给你的包布到线上就可以了

h5实现微信浏览器自定义分享样式( 就是改变右上角分享时候的样式,)

之前的

改变后

微信官方文档.

一 绑定域名(这里建议看官方文档)

二 引入官方js文件

uniapp引入的话,直接在官方下载引入会报错,

直接npm i weixin-js-sdk

三 代码

新建一个js文件,注入wx.config进行相关的初始化等操作，

var wx = require("weixin-js-sdk/index.js") //引入刚下载的js文件
import $H from '@/api/request.js' //封装好的接口请求


export default {
	//初始化
	initJssdkShare: function(callback, url) {
		var url = url
		console.log(url);
		//这一步需要调用后台接口,返回需要的签名 签名时间戳 随机串 和公众号appid
		//注意url:window.location.href.split('#')[0] //
		$H.post("/users/weixin/getsignature", {
			url // url是当前页面的url
		}).then(res => {
			console.log(res);
				wx.config({
					// debug: true,//调试的时候需要 在app上回弹出errmg:config ok 的时候就证明没问题了 这时候就可以改为false
					appId: res.appId,//appid
					timestamp: res.timestamp,//时间戳
					nonceStr: res.nonceStr,//随机串 
					signature: res.signature,//签名
					jsApiList: ["updateAppMessageShareData", "updateTimelineShareData","onMenuShareAppMessage"]//必填 是下面需要用到的方法集合
				})
				if(callback){
					callback()
				}
		})
	},
	// data是穿的参数 url是当前页面的链接
	share:function(data,url){
		this.initJssdkShare(function(){
			wx.ready(function(){
				console.log("llllllllllll");
				console.log(data);
				var sharedata={
					title: data.title, //标题
					desc: data.desc, //描述
					link: data.link ,//分享链接
					imgUrl:data.imgUrl, //图片
					success:(res=>{
					})
				};
				wx.updateAppMessageShareData(sharedata)//自定义微信分享给朋友
				wx.updateTimelineShareData(sharedata);//自定义微信分享给朋友
				wx.onMenuShareAppMessage(sharedata);//获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
			})
		},url)
	}
}

注意:(如果遇到essMsg:config fail 或者报出无效的签名 的话很有可能是url出问题)
1.调用后端接口传的url是当前页面的地址
2.调用wx.config时候的参数大小写要注意
3.自定义的时候 wx.updateAppMessageShareData()传的参数

四 在main.js中应用

然后就是在相应的页面调用

最后的最后 config fail 的问题找了好久 问题出在了传给后端的的页面地址url上
超级感谢百度

贴上原文文档.