【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 常用组件的封装

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

步骤：

抽离多次使用的模块（带上样式），新建一个.vue 文件，把抽离部分对应粘贴
在要使用组件的页面 引入刚刚的.vue 文件，然后在 components 中注册该组件，最后在页面中使用
对于组件之间的数据传递，可参考：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;
			}
		},