uni-app官网:uniapp.dcloud.io/
一、安装HBuilderX
创建项目：
1、HBuilderX直接创建（推荐）
2、vue-cli创建：blog.csdn.net/qq_29752857…
二、目录结构
项目默认文件：
pages 页面存放目录
static 静态文件资源目录
App.vue 应用入口文件和小程序app.js类似
main.js 应用入口文件 注册Vue等
manifest.json 项目配置
pages.json 页面配置
自定义配置文件
common 存放公用文件
components 自定义组件目录
store vuex
运行时生成目录
.hbuilderx
打包发行生成文件
unpackage 编译后的文件存放目录
三、模板语法与vue相同：
v-on 事件绑定
v-bind单项绑定
v-model双向绑定
条件判断
v-if v-else-if v-else
v-show
v-for
//空白标签 相当于template
<block></block>
四、自定义组件定义在components直接使用
HBuilderX支持easycom组件模式
父组件向子组件传递数据用props
子组件向父组件传递数据用之定义事件，$emit
子组件可以定义插槽让父组件自定义显示内容
//父组件
<template>
<view>
<button type="default">about</button>
<card color="red"></card>
<card @myclick="handleclick"></card>
</view>
</template>
<script>
export default {
methods: {
handleclick(mag){
console.log("我是父组件的自定义事件,name="+mag);
}
}
}
</script>
//子组件
<template>
<view :style="{background:color}"@click="handleclick">
helllo
</view>
</template>
<script>
export default {
name:"card",
data() {
return {
name:"haha"
};
},
props:{
color:{
type:String,
default:"white"
}
},
methods:{
handleclick(){
console.log("子组件的自定义事件");
this.$emit("myclick",this.name);
}
}
}
</script>
五、常用api uniapp.dcloud.io/api/README
