内容
记录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;
}
},
使用过滤器
{
{ time | formatDate}}
1.4 其他点
- 对于样式中多次修改无果的样式,可直接在
App.vue
(全局)对其修改(权重最高) - 对于异步方法,在其完成后再操作其他方法是,使用
回调函数
- 用到了
拨打电话
的 APIuni.makePhoneCall(OBJECT)
拨打电话 - 用到了
富文本
组件(解析HTML代码块)rich-text
富文本
2. 项目的打包发布
2.1 微信小程序
- 首先要注册微信公众平台 账号,然后
注册小程序
找到对应的AppID
- 把这个 AppID 配置在项目根目录的
manifest.json
- 此时微信开发者工具的
上传
按钮就会亮起,点击上传即可
注意点:
- 如果小程序需要上线,服务器需要使用线上服务器,且在
微信公众平台
对服务器域名
进行配置; - 所有的
资源尽量使用线上
服务器资源,避免打包; - 上传成功后,可在
微信公众平台
管理中对其进行上线及其他操作
2.2 h5
- 在项目根目录的
manifest.json
中进行 h5 的配置
- 在 HBuilderX 中进行发布
2.3 APP
- 在项目根目录的
manifest.json
中进行 App 的配置
- 打包成功后会生成一个
下载地址
,下载app 即可使用