Maxbad`Blog

uin-app

2020-07-25 · 3 min read

目录结构

components 自定义组件目录
pages 页面存放目录
static 静态文件资源目录
unpackage 编译后的文件存放目录
App.vue app.js 查看文档
main.js 应用入口( 引用全局组件 ) 查看文档
manifest,json 项目配置 查看文档
page.json 页面配置 查看文档
package.json 查看文档
vue.config.js 是一个可选的配置文件 查看文档
uni.scss 查看文档

utils 自定义 - 公用的工具类
common 自定义 - 公用的文件

符号 说明
@ 项目根目录
vh 屏幕高度
vw 屏幕宽度
px 固定
rpx 根据屏幕宽度750动态调整
@import './index.css' 引入外部CSS文件

尺寸单位 : px rpx rem

模板语法与数据绑定


<view class="content" :class="className" @click="open">

全写 简写
v-bing :
v-on @

条件判断

<view v-if="show==='1'"> 1 </view>  如果表达式返回真值为true,那么正常渲染内容
<view v-else-if="show==='2'"> 2 </view>  如果表达式返回真值为true,那么正常渲染内容
<view v-else> 3 </view>

列表渲染

item : 被迭代的数组元素的别名
index : 下标别名

<view v-for="(item,index) in arr"> {{ (index+1) + '---' + item }} </view>
<view v-for="(item,value) in obj"> {{ value + '---' + item }} </view>

基础组件

试图容器 . 可滚动视图区域 按钮 输入框

自定义组件

API

API

条件编译

条件编译

生命周期

应用生命周期
页面生命周期
组件生命周期

uin.navigateTo() //打开新页面. 返回键可返回到当前页面 只能打开非 tabBar 页面。
uin.redirectTo() //关闭当前页面,打开新页面,会触发页面销毁事件. 只能打开非 tabBar 页面。

uin.switchTab() 只能打开 tabBar 页面。
uin.reLaunch() 可以打开任意页面。

SCSS

.content{
&.box{} &表示父级
}

uniCloule

查看文档