微信小程序开发实战笔记：全流程梳理

前言

笔者做前端这么久，还是第一次做小程序，从搭建到调试到最终上线，还是遇到了一些问题，在这里浅浅记录一下。

准备工作

到微信公众平台申请一个小程序（一般是产品或项目经理申请）
找管理员把你添加成开发者

配置

成为开发者之后，就可以开始在小程序后台登录指定的小程序，做一些配置工作了

在小程序后台首页 ➡ 小程序信息 ➡ 服务内容声明下更新"用户隐私保护指引"，根据你的小程序的实际功能填写
本来想分段的，结果发现后面的配置说到具体代码时才会用到，但是已经写了第一点，不写个第二点又不合适，这句没用纯凑数，如果你点进来了这篇文章，并看完了这段话，恭喜你休息了10几秒钟（这是一段小幽默）

开发流程

我的开发环境：Mac+HBuilderX+uni-app+uView，虽然HBuilderX还有很多需要完善的地方，但暂不做任何吐槽，不做那种端起碗吃饭，放下碗骂娘的事
关联微信开发者工具：路径：打开HBuilderX ➡ 运行 ➡ 运行到小程序模拟器 ➡ 运行设置 ➡ 微信开发者工具路径，填写你的"本地安装的微信开发者工具可执行文件"，Window应该是xxx.bat，Mac是xxx.app
允许 HBuilderX 调用微信开发者工具：打开微信开发者工具 ➡ 设置 ➡ 安全设置，打开服务端口
打开自己的新建的uni-app项目，打开manifast.json文件 ➡ 微信小程序配置，添写AppId（从小程序后台复制），把输入框下边的"ES6转ES5"等多选框都勾上
点击运行 ➡ 运行到小程序模拟器 ➡ 微信开发者工具，等待一会，微信开发者工具自动打开了，如果没打开，就重新运行一次
这时你就看到微信开发者工具里展示着你新建的项目了

开发问题记录

多图预警

如果是本地开发，则需要打开微信开发者工具右上角，打开详情，选择本地设置，勾中不校验合法域名
下图的通过手机号码登录实现流程：用户隐私保护指引选中手机号，调用uni-app自带的button方法，如下代码，就能弹出下图获取手机号登录界面，记得把AppID和AppSecret给到后端哦，因为他调的微信官方接口需要这两个参数，AppSecret也是需要管理员扫码才能得到

js 复制代码

<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">登录</button>

3. 微信小程序跳转tab界面，必须使用uni.navigateTo方法

主包体积太大：不是在首页显示的图片就放到各个组件里边，别放在根目录下的static下
小程序存在导航功能，如下图这种，使用uni.openLocation即可，同样是需要配置用户隐私协议，勾选位置信息，还需要在小程序后台，开发管理 ➡ 接口设置里边开通 获取当前的地理位置、速度 接口，并在manifast.json文件 ➡ 微信小程序配置 ➡ 勾选位置接口，并填写获取的原因，例如：你的位置信息将用于xxx功能

6. 小程序存在通过web-view跳转外链功能，如果提示了下边的警告，就先确认如下内容，小程序后台是否配置了业务域名（业务域名如何配置在后文介绍，着急的朋友先别急，慢慢看吧，相信你有的是时间），业务域名是否通过了备案，如果都确认过了，还是有这个提示，可以发邮件给官方处理，官方邮箱：moment@tencent.com，内容就写：业务域名经过备案了，还是提示了警告，帮忙处理一下吧（可以自己写话，意思表达清楚就行，注意礼貌）。并把备案的截图（这个我也会在下文放）和下边的截图放到邮件中

7. 转发给朋友或分享到朋友圈，写一个Vue 混入（mixin） 文件，如下，然后在main.js里边引入

js 复制代码

// share.js文件

import config from '@/settings/config.js';
export default {
	data() {
		return {
		   //这个share可以在每个页面的data中设置相应的转发内容
			share:{
				title:config.PRODUCT_NAME,
				path:'pages/tabBar/homepage/index',
			}
		}
	},
	// 用户点击右上角分享给好友,要先在分享好友这里设置menus的两个参数,才可以分享朋友圈
	onShareAppMessage(res) {
		return {
			title: this.share.title,
			path: this.share.path,
			// imageUrl: this.share.imageUrl,
			// desc: this.share.desc,
			// content: this.share.content,
			success(res) {
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}
	},
	//用户点击右上角分享朋友圈
	onShareTimeline () {
		return {
	      title: config.PRODUCT_NAME,
	      imageUrl: ''
	    }
	},
}

// main.js
Vue.mixin(share)

其他小心得：有奇怪的问题可以到小程序后台左下角 ➡ 小程序头像 ➡ 交流专区这里提问，会有很多热心的朋友解答（也包括官方哦）

上线

配置服务器域名：request合法域名、socket合法域名（用到了就配）、uploadFile合法域名（用了上传组件）、downloadFile合法域名（用了uni.downloadFile方法），域名需要通过备案，这个一步一般也是找产品经理搞定，自己可以到网站查一下，ICP查询

2. 如果存在外链（咋样，和前边联系起来了吧），就需要配置业务域名，下载域名验证文件，并把它提供给后端或运维，放在跟域名目录下，通过 "域名/xxx.txt" 能访问到，也是需要https，并通过ICP备案

微信开发者工具点击上传，可以上传体验版，然后就体验吧
体验完了（测完了）如果没啥问题，就在小程序后台发起审核，通过审核之后就可以发布线上版本了