公司需要做一个安卓的APP,其实我刚开始我确实什么都不懂,只知道APP是什么,但是关于它怎么做成的一无所知,在闷头闷脑的找资料、咨询之后终于在9月中旬开始着手做这个项目了,我们选择uni-app来做为前端的框架,因为uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到IOS、Android、H5、以及各种小城等多个平台。虽然公司目前要求只是针对Android,但难免之后要应用到其他平台,所以选择这个框架是比较妥当的。好吧…废话不多说了,开始正式学习吧~~
官方文档地址:https://uniapp.dcloud.io/README
一、快速创建以及常用注意事项
1.快速创建一个uni-app项目
① 通过HBuilder可视化界面
② 通过vue-cli命令行
以上两种方法在文档中都有详细介绍,我就不仔细说明了,请自行查看文档。
我们在创建的时候会发现官方已经给我们创建好了很多模板,我们只需要下载就可以直接用了,会方便很多,而一些功能不全的组件也有插件市场为我们提供,插件市场地址:https://ext.dcloud.net.cn/
2.常用的注意事项
(1)代码风格
① 代码中不使用<div>和<span>,取而代之的是<view>,多了<picker>等组件。
② 不存在vue中的router路由,但有page.json来代替路由,和微信小程序的配置类似,具体配置请自行查看文档。
③ 数据渲染与vue的相同,数据的双向绑定依旧存在。
(2)生命周期
在子组件中是无法使用onLoad这类的页面生命周期的,原因是组件会使uni-app的生命周期失效。但是组件中可以使用vue
的生命周期函数(如created等)
(3)v-for渲染列表
需要添加 :key来指定列表中项目的唯一的标志服 ,否则会报warning。如果确定列表是静态不会发生该的话,也可以不用
添加,但此处还是建议养成好习惯,在写完v-for后加上 :key 。(毕竟有时候像这种小错误找很久会浪费时间,影响心情)
(4)在移动设备上,touchstart 事件与 click 事件会发生冲突
此处推荐文章: https://www.cnblogs.com/wangjae/p/8540238.html
文章有讲解其原因以及解决方案。
(5)导航栏
① 导航栏由于不符合项目的要求,不得不自定义一个导航栏。在自定义顶部导航栏时要注意在page.json中设置
navigationStyle为custom或titleNView为false,此时原生导航栏就不显示了,当然也可以使用插件市场中的自定义导航栏。
② 底部导航栏的层级在整个项目中的每个页面层级是最高的,这也导致页面的遮罩层无法将其覆盖,所以自定义也是有必要
的,推荐使用插件市场中的底部导航插件:https://ext.dcloud.net.cn/plugin?id=684。
我们要善于学会使用插件市场,当然,对于从插件市场上下载的组件,我们可以根据个人需要去修改其源码,这样会使我们
的项目变得简洁、明了。
(6)网络请求时,H5端能正常显示,但移动端会报错:request:fail abort
这个主要是安卓端的ssl验证有问题导致的,App-Android平台 新增 uni.request 网络请求增加参数 sslVerify,配置
是否验证 ssl 证书。但建议使用普遍受信的证书而不是忽略证书校验。
二、项目中的具体问题
1.页面跳转并携带参数
① uni.navigateTo(Object)
② uni.redirectTo(Object)
③ uni.reLaunch(Object)
④ uni.switchTab(Object)
⑤ uni.navigateBack(Object) // 返回
注:
■ 以上跳转除了第5个不能携带自定义的参数,其他均可。具体请自行查看官网。
■ 携带的参数在将要跳转页面的onLoad生命周期函数中获取。
■ 此种方式跳转不可携带对象,但可将对象转为字符串传递过去,encodeURIComponent()函数会对传入的字符串对象重新编码:
let obj = {a: '1', b: '2'}
uni.navigateTo({
url: 'test?params='+encodeURIComponent(JSON.stringify(obj))
})
2.监听手机实体键和左右滑动返回
onBackPress(){
// 逻辑处理代码
return true // 返回true 表示不会执行默认的返回事件
}
此函数中不可使用uni.navigateBack(),否则会造成死循环。
3.数据渲染
数据渲染与vue是相同的,只要js改变数据,相应的页面也会发生改变。当页面的数据渲染出现不显示的情况,主要是检查代码问题。
① v-for:循环的数组是否有数据,后台传到前端的数据最好打印一下,查看数据以及结构是否正确。
② 后端获取的数据层级过多,此时在data中设置的存储容器就不能仅仅设置为此数据的类型了,而是需要将此数据的结构
整体设置进去,如下:
后台获取的数据格式:
{
title1: {
text: '',
content: []
},
title2: {
text: '',
content: []
},
title3: {
text: '',
content: []
}
}
此时在data中设置的容器属性格式应与之对应:
data() {
return {
obj: {
title1: {
text: '',
content: []
}
}
}
}
4.uni.request
示例:
uni.request({
url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。
data: {
text: 'uni.request'
},
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
console.log(res.data);
this.text = 'request success';
}
});
以上是官网示例,在此建议使用第三方封装的拦截器配合request请求来用,即能统一管理,也方便后期维护。推荐插件地址:https://ext.dcloud.net.cn/plugin?id=159
(1)插件代码下载后,将vmeitime-http文件夹放入项目的common文件夹下
(2)修改全局配置(interceptor.js)
config: {
baseUrl: "http://xxx.xx/user/",
header: {
// "Authorization": "Bearer " + store.state.token,
'Content-Type':'application/json;charset=UTF-8',
'Content-Type':'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
data: {},
method: "GET",
dataType: "json", /* 如设为json,会对返回的数据做一次 JSON.parse */
responseType: "text",
success() {},
fail() {},
complete() {}
}
以上的Authorization是为判断用户登录与否的标识,可以放在请求前的拦截器中添加。
(3)修改单个接口配置(index.js)
import http from './interface'
// 接口1
export const inter1= () => {
return http.request({
url: 'xxx/'
})
}
// 接口2
export const inter2= (data) => {
return http.request({
url: 'xxx/',
method: 'POST',
data
})
}
// 全部导出
export default {
inter1, inter2
}
(4)main.js中引入,并挂在到Vue实例上
import api from '@/common/vmeitime-http/'
// 全局挂载后使用
Vue.prototype.$api = api
(5)页面使用
// 接口1
this.$api.inter1().then(res => {
console.log(res.data)
}).catch(err => {
console.log(err)
})
// 接口2
let params = {a: '1', b: '2'}
this.$api.inter2(params).then(res => {
console.log(res.data)
}).catch(err => {
console.log(err)
})
今天先写到这里吧,上面的内容不分先后,就是想到就写的,这之间也过了一个半月左右,所以大致就能记住这些问题了,后续有其他问题再更新。
欢迎各位小宝贝来评论留言啊~~不喜勿喷,谢谢!