概念
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
项目中用到的4个文件
1、pages:该文件下存放的是应用的各个页面。
2、static:该文件下存放的是应用的静态资源。
3、App.vue:是涉及到整个应用的,例如在该文件内写CSS等代码可以影响到整个应用。
4、pages.json:是配置整个应用的,文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
详解
一、pages文件
1、data()中return返回的是个私有变量。
2、onLoad()运行时加载,生命周期。
3、data()定义变量用的。
4、methods: 定义方法用的。
二、App.vue
1、里面的onLaunch是整个应用的生命周期,app加载之后。
//访问本地缓存,查看是否有用户登录token
//如果有,发送到服务器进行验证
//如果验证通过,静默登录
//发送请求到服务器检测当前应用版本
//采集用户当前登录环境
2、onHide切到后台:禁止当前页面活动
3、onShow从后台切回来:自动或者手动继续活动
三、pages.json
1、"pages"作用:
(1)决定发布的时候有哪些页面会被打包到APP中
(2)pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
2、"globalStyle"作用:
(1)描述原生导航条的全局样式,可以在页面的私有style中覆盖掉
(2)开启上拉刷新和触底刷新事件
uni-app标签和html标签差异
1、div —> view
2、span、font —> text
3、a —> navigator
4、img —> image
5、select —> picker
6、iframe—> web-view
7、ul和li没有了,使用view替代
8、input 的type属性改成confirmtype
9、audio 不推荐使用,改成使用api文档
10、form、button、checkbox、radio、label、textarea、canvas、video 暂无变化。
foreach循环的写法
注意:item代表的是迭代变量,index是索引,articleList是要迭代的数组
<view v-for="(item, index) in articleList" :key="index" class="cu-card case" :class="isCard ? 'no-card' : ''">
</view>
1、view v-for 相当于携带整个标签参与循环,每一个循环体都被view包装
如果不想带着view一起循环,那么可以使用block 用来做vue相关的运算
2、如果要在属性内解析mustache表达式,那么不用在属性的值里面加{{}}
取而代之的是在属性前面加上:
3、在微信的循环中每一个元素的标签中加上key能够保证在一些特殊的排序算法中排序不出错
4、如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。