Uniapp 移动端（本案例为H5微信公众号）开发指南_uniapp 公众号

**Uniapp开发微信公众号（H5）微信开发基础篇总结以及授权 发行相关**

1. 公众号相关： 配置相关公众号菜单

https://mp.weixin.qq.com/

跳转网页（开发的H5） 配置URL 核心是appid 和uri

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx27219f77d07baaba&redirect_uri=http://boss.6d6j.com/mobile&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

2.Uniapp 跨域解决（H5） 小程序和app 不会：

配置manifest.json(原理同vue 的配置proxy代理 跨域)
https://blog.csdn.net/qq_40999917/article/details/130756700?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_baidulandingword~default-5-130756700-blog-117600405.235^v38pc_relevant_anti_t3_base&spm=1001.2101.3001.4242.4&utm_relevant_index=8

配置ngx ：

https://blog.csdn.net/weixin_53458434/article/details/117600405?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-117600405-blog-115323803.235%5Ev38%5Epc_relevant_anti_t3_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-117600405-blog-115323803.235%5Ev38%5Epc_relevant_anti_t3_base&utm_relevant_index=5

配置无效的话（理论上不会，一般多是ngx没有配置跨域），可以使用HBuilderX 内置浏览器调试或者参照如下
https://blog.csdn.net/baidu_25051161/article/details/128610856

3.获取code ：
原理是截区公众号菜单的URL中的code(动态)，然后根据code 置换token（区别于小程序的直接后台返回code 置换完成认证）

//本地调试取消认证
		onLoad() {
			// #ifdef WEIXIN-H5
			//自定义微信环境下编译代码，其他环境下不会有这部分代码
			this.wechatToken();
			// #endif
			this.userDetail();
			this.analysisData();
		},
1
2
3
4
5
6
7
8
9

	wechatToken() {
				//获取当前页面的url
				let link = window.location.href;
				console.log(link, 'link');
				let code = null;
				// 判断link中有没有code=字符串，
				if (link.indexOf('code=') == -1) {
					//没有code= 发请求
					let appid = 'wx27219f77d07baaba';
					let uri = encodeURIComponent(link);
					let authURL =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`;
					window.location.href = authURL;
				} else {
					//回调函数已经执行 返回的链接存在code= 地址解析
					let temp = link.split("code=")[1];
					code = temp.split("&")[0];
					console.log(code, 'code');
					//存储code
					uni.setStorageSync('code', code);
					//对后台发送请求传参code获取token和用户信息
					const params = code
					this.$httpApi.getUserInfo(params).then(res => {
						console.log('idnex 认证原文件', res)
						uni.setStorageSync('mtoken', res);
						console.log('token storage', res);
					})
				};
			},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

4. 版本发行（线上本地环境以及跨端动态处理）

package.json 下加入自定义配置,其中uni-app 下的weixin_h5_dev weixin_h5 即为自定义配置（用于发行和本地调试区分）实现代码不同环境下自动编译（可保留两段不同代码）
配置如下

"uni-app": {
		"scripts": {
			"mp-dingtalk": {
				"title": "钉钉小程序",
				"env": {
					"UNI_PLATFORM": "mp-alipay"
				},
				"define": {
					"MP-DINGTALK": true
				}
			},
			"weixin_h5": {
				"title": "移动端微信公众号发行",
				"env": {
					"UNI_PLATFORM": "h5"
				},
				"define": {
					"WEIXIN-H5": true
				}
			},
			"weixin_h5_dev": {
				"title": "移动端微信公众号dev",
				"env": {
					"UNI_PLATFORM": "h5"
				},
				"define": {
					"WEIXIN-H5-DEV": true
				}
			}
		}
	}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

比如该token为本地调试和线上环境不同，代码段加入配置后可实现在调试或打开选择不同环境即可自动编译代码，无需注释或者删除原有另一端环境下的代码

// #ifdef WEIXIN-H5
	//自定义微信环境下编译代码，其他环境下不会有这部分代码
	const token = uni.getStorageSync('mtoken')
	// #endif
	// #ifdef WEIXIN-H5-DEV
	const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2OTMzNjIxMzAsImlkZW50aXR5IjoxLCJuaWNlIjoiYWRtaW4iLCJvcmlnX2lhdCI6MTY5MzM2MjEzMCwicm9sZWlkIjoxLCJyb2xla2V5IjoiYWRtaW4iLCJyb2xlbmFtZSI6Iuezu-e7n-euoeeQhuWRmCJ9.630BFuINhp97Jnx0NX73qb8jGI9C-NpXaVqMr-b7nVs'
	// #endif
1
2
3
4
5
6
7

线上服务器域名配置如有子级上下文需要配置路径
视图模式

源码模式

发行：
选择自定义发行，会打包到dist,部署到服务器即可