【uni-app】实战总结（含多端打包）

内容

记录uni-app 开发过程中的注意点
完成项目在不同平台的打包+发布

1. 注意点

1.1 网络相关 API 的二次封装

对于请求比较频繁的项目来说，每次请求都要写全请求路径真的是件很烦的事情。而且原生 API 并不支持 Promise对象。建议对其进行封装，然后全局挂载。方便每个页面使用。

封装代码：

const BASE_URL = 'http://localhost:8082'
export const myRequest = (options)=>{
	return new Promise((resolve,reject)=>{
		uni.request({
			url: BASE_URL + options.url,
			methods: options.methods || 'GET',
			data: options.data || {},
			success(res){
				if(res.data.status !== 0){
					return uni.showToast({
						title:'请求数据失败'
					})
				}
				resolve(res)
			},
			fail(err){
				return uni.showToast({
					title:'接口请求失败'
				})
				reject(err)
			}
		})
	})
}

全局挂载：

import { myRequest } from 'uni/api.js'
Vue.prototype.$http = myRequest

1.2 常用组件的封装

对于可能多次使用的组件，最好的解决方案就是对其进行封装。

步骤：

1. 抽离多次使用的模块（带上样式），新建一个.vue 文件，把抽离部分对应粘贴
2. 在要使用组件的页面 引入刚刚的.vue 文件，然后在 components 中注册该组件，最后在页面中使用
3. 对于组件之间的数据传递，可参考：uni-app快速上手篇

1.3 uni-app 中过滤器的使用

对于一些数据我们需对其进行处理后再展示（例如时间格式的处理），此时就用到了过滤器，对于常用的过滤器，我们大多进行全局定义，对于特定的过滤器，一般局部定义。了解更多过滤器：vue常用特性

示例：全局定义过滤器

Vue.filter('formatDate',(date)=>{
	const newDate = new Date(date);
	const y = newDate.getFullYear();
	const m = (newDate.getMonth()+1).toString().padStart(2,'0');
	const d = newDate.getDate().toString().padStart(2,'0');
	return y + '-' + m +'-'+ d;
})

局部定义过滤器

filters:{
			formatDate:(date)=>{
				const newDate = new Date(date);
				const y = newDate.getFullYear();
				const m = (newDate.getMonth()+1).toString().padStart(2,'0');
				const d = newDate.getDate().toString().padStart(2,'0');
				return y + '-' + m +'-'+ d;
			}
		},

使用过滤器

{{ time | formatDate}}

1.4 其他点

1. 对于样式中多次修改无果的样式，可直接在App.vue(全局)对其修改（权重最高）
2. 对于异步方法，在其完成后再操作其他方法是，使用回调函数
3. 用到了拨打电话的 API uni.makePhoneCall(OBJECT) 拨打电话
4. 用到了富文本组件(解析HTML代码块) rich-text 富文本

2. 项目的打包发布

2.1 微信小程序

1. 首先要注册微信公众平台 账号，然后注册小程序 找到对应的 AppID

2. 把这个 AppID 配置在项目根目录的 manifest.json

3. 此时微信开发者工具的 上传 按钮就会亮起，点击上传即可

注意点：

• 如果小程序需要上线，服务器需要使用线上服务器，且在微信公众平台 对 服务器域名进行配置；
• 所有的资源尽量使用线上服务器资源，避免打包；
• 上传成功后，可在微信公众平台 管理中对其进行上线及其他操作

2.2 h5

1. 在项目根目录的 manifest.json 中进行 h5 的配置

2. 在 HBuilderX 中进行发布

2.3 APP

1. 在项目根目录的 manifest.json 中进行 App 的配置

2. 打包成功后会生成一个 下载地址，下载app 即可使用

Come on