先看一下目录结构
学习一下：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 实例的生命周期，同时还支持应用生命周期及页面生命周期
评论