带你学习如何更好的使用uni-app（一）

概念

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，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。