先看一下目录结构
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录，详见
├─platforms 存放各平台专用页面的目录，详见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录，详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见
学习一下：
static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。
HbuilderX 1.9.0+ 支持在根目录创建 ext.json sitemap.json 文件。
开发主要知识
/common/用来存放定义的公共文件,如通用的css样式和宏定义
/components/用来存放一些自定义的组件,比如项目中用到的自定义导航栏,搜索栏,购物车加减数量,地址选择器,选择框,弹框等
/config/存在app的一些配置,比如测试和生产环境配置,状态,路由的配置
条件编译如下：
/*H5平台登录按钮显示红色，微信小程序登录按钮显示蓝色*/
button {
/* #ifdef H5 */
background:red;
/* #endif */
/* #ifdef MP-WEIXIN */
background:blue;
/* #endif */
}
实例：
<template>
<view class="content">
<view class="uni-list">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index" @tap="opennews" :data-postid="item.post_id">
<view class="uni-media-list">
<image class="uni-media-list-logo" :src="item.author_avatar"></image>
<view class="uni-media-list-body">
<view class="uni-media-list-text-top">{{item.title}}</view>
<view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
news: []
};
},
onLoad:function(){
uni.request({
url: 'https://unidemo.dcloud.net.cn/api/news',
method: 'GET',
data: {},
success: res => {
this.news = res.data;
},
fail: () => {},
complete: () => {}
});
},
methods:{
opennews(e){
uni.navigateTo({
url: '../news/news?postid='+e.currentTarget.dataset.postid
});
}
}
}
</script>
<style>
.uni-media-list-body{height: auto;}
.uni-media-list-text-top{line-height: 1.6em;}
</style>上述代码解释：
v-for表示要循环的语句，其中的news是在js部分中的data定义的属性，表示新闻列表。v-for中的item表示一个列表项，也就是一个新闻；index表示列表的下标。
@tap表示绑定点击事件。因为是在移动端，还是不要写@click了。click事件在移动端会有300ms的延迟
:data-postid表示绑定一个动态的数据，而postid表示这个动态的数据属性是这个名字。
如果想直接输出数据中的内容，通过{{}}两对大括号将数据内容包裹在里面即可。例如{{item.title}}
视频中特别强调了声明data属性时要注意，必须声明为返回一个初始数据对象的函数。只需要更新最新版本的HBuilder X 新建页面的时候就会自动生成。
编写js代码的时候，编辑器会自动用eslint对代码进行检查。可以通过工具-插件配置-eslint-vue查看和修改配置项。
onLoad是页面的生命周期。uni-app 完整支持 Vue 实例的生命周期，同时还支持应用生命周期及页面生命周期
