一、开始
(一) 下载hbuilder编译器;
(二) 创建默认模板项目;
(三) 运行到各三方编译器,需设置编译器所在本地路径(可以直接打开第三方编译器);
注: 第三方编译器需要开启访问权限,方可访问。如下图中提示:去开启服务器端口
二、项目结构
默认包含如下目录及文件:
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录【详见:https://uniapp.dcloud.io/component/web-view】
├─platforms 存放各平台专用页面的目录【详见:https://uniapp.dcloud.io/platform?id=整体目录条件编译】
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录【详见:https://uniapp.dcloud.io/frame?id=小程序组件支持】
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 【应用生命周期:https://uniapp.dcloud.io/frame?id=应用生命周期】
├─manifest.json 配置应用名称、appid、logo、版本等打包信息【详见:https://uniapp.dcloud.io/collocation/manifest】
└─pages.json 配置页面路由、导航条、选项卡等页面类信息【详见:https://uniapp.dcloud.io/collocation/pages】
注:
- static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。
- css、less/scss 等资源同样不要放在 static 目录下,建议这些公用的资源放在 common 目录下。
- HbuilderX 1.9.0+ 支持在根目录创建 ext.json sitemap.json 文件。
(一) uni.css — 全局样式【无需引用即可全局使用】;
(二) pages.json — app的初始化设置,注册页面【设置页面路由等】,导航条,选项卡等页面类信息
在此内可设置tabBar:
位置: 官网 – 框架 – 配置 – pages.json – tabBar (代码示例)
(三) manifest.json — 项目常用基础配置
示例: 小程序配置,在manifest.json中的设置会影响到微信小程序中的相对设置,如下:
设置前:
设置后:
(四) main.js — 项目入口文件
. 例: 如果新建一个js文件,但没有在main.js中引入,他是不会执行的。
(五) App.vue — 应用配置,用来配置App全局样式以及监听应用的生命周期
应用生命周期:
(六) static — 存放应用引用静态资源的目录(如图片、视频等)
注意:静态资源只能存放于此
(七) pages — 业务页面文件存放的目录
(八) components — uni-app组件目录
示例:
1、 创建组件
2、 编写组件内容,将组件引入所需页面
(1)父子组件通信
1. 绑定组件属性
组件代码:
<template>
<view>
<!-- 此处将testMsg直接作为变量使用 -->
<text>我是一个test组件 {{testMsg}}</text>
</view>
</template>
<script>
export default {
data() {
return {
};
},
props: ["testMsg"] //用props接收变量值
}
</script>
<style lang="scss">
</style>
所需页面代码:
<template>
<view class="content">
<test :testMsg="testMsg"></test>
</view>
</template>
<script>
import test from '../../components/test.vue' // 引入组件
export default {
components:{
test //在当前页面注册组件。局部注册
},
data() {
return {
testMsg: 'testMsgText' //设置组件中变量
}
},
}
</script>
页面效果:
2.绑定组件方法
组件代码:
<template>
<view>
<!-- 此处将testMsg直接作为变量使用 -->
<text>我是一个test组件 {{testMsg}}</text>
<!-- 此处点击事件调用本组件中methods中的对应事件 -->
<button type="primary" @click="clickHandle">点我</button>
</view>
</template>
<script>
export default {
data() {
return {
};
},
props: ["testMsg"], //用props接收变量值
methods: {
clickHandle(){
// 通过$emit()接收调用组件页面调用
this.$emit('cliakHandler',{text: '点了我'})
}
}
}
</script>
<style lang="scss">
</style>
所需页面代码:
<template>
<view class="content">
<test :testMsg="testMsg" @cliakHandler="showVal"></test>
</view>
</template>
<script>
import test from '../../components/test.vue' // 引入组件
export default {
components:{
test //在当前页面注册组件。局部注册
},
data() {
return {
testMsg: 'testMsgText' //设置组件中变量
}
},
methods: {
showVal(val){
// val 为接收组件通过$emit()中的传参
console.log(val) //输出结果:{text: "点了我"}
}
}
}
</script>
页面效果:
(2)兄弟组件通信
兄弟组件通信可用由uniapp的api提供的方法:
- uni.$emit(eventName,OBJECT) 【触发事件】
- uni.$on(eventName,callback) 【注册事件调用多次】
- uni.$once(eventName,callback) 【注册事件调用一次】
uni.$emit(eventName,OBJECT)
触发全局的自定事件。附加参数都会传给监听器回调。
uni.$emit('update',{msg:'页面更新'})
uni.$on(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit 触发,回调函数会接收所有传入事件触发函数的额外参数。
uni.$on('update',function(data){
console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
})
uni.$once(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit 触发,但是只触发一次,在第一次触发之后移除监听器。
uni.$once('update',function(data){
console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
})
例:
在某页面onLoad函数中,用 uni.$on() 在全局注册了一个事件
在组件中,可以用uni.$emit()调用此事件
注册全局事件页面代码:
<script>
import test from '../../components/test.vue' // 引入组件
export default {
components:{
test //在当前页面注册组件。局部注册
},
data() {
return {
testMsg: 'testMsgText' //设置组件中变量
}
},
onLoad() {
// 分别对应下面两张效果图,注释一方一一测试
// 全局注册可多次调用事件
uni.$on('testEmit',(val)=>{
console.log(val) //输出由调用事件处传回的参数
})
// 全局注册可多次调用事件
/* uni.$once('testEmit',(val)=>{
console.log(val) //输出由调用事件处传回的参数
}) */
}
}
</script>
调用全局事件页面代码:
<template>
<view>
<!-- 此处将testMsg直接作为变量使用 -->
<text>我是一个test组件 {{testMsg}}</text>
<button type="primary" @click="clickHandle">点我</button>
</view>
</template>
<script>
export default {
data() {
return {
};
},
props: ["testMsg"],
methods: {
clickHandle(){
uni.$emit('testEmit',{text: '点了我,测试$on'})
}
}
}
</script>
页面效果:
uni.$on():
uni.$once():
好,下篇再见 (*^__^*) 嘻嘻……