uni-app 笔记

① view

相当于div，但是不能用div

② rpx

rpx在不同的屏幕下有适应效果

rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue）端和 H5（vue2）端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，具体配置参考：rpx 计算配置。
rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。
开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

③ text

text标签=span标签

④ image

img标签：在不给宽高就是图片的大小

image标签：会给一个默认的宽高 320px 240px

ui-插件用uView的组件

⑤ navigator 跳转

navigate	对应 uni.navigateTo 的功能
redirect	对应 uni.redirectTo 的功能
switchTab	对应 uni.switchTab 的功能
reLaunch	对应 uni.reLaunch 的功能	抖音小程序与飞书小程序不支持
navigateBack	对应 uni.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效

switchTab：

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

reLaunch：

可以带参数

navigateBack：

关闭当前页面，返回上一页

⑥ 导航菜单

tabBar:在pages.json里面设置

"tabBar":{

color:"",

……

}

⑦ 表单中u-radio的写法

注意此处的name是value的意思

<u-radio-group v-model="fhMaterial.isReturned" @change="groupChange" iconPlacement="left">
<u-radio :customStyle="{marginRight: '18px'}" activeColor="#19be6b" label="是" name="1"></u-radio> 
<u-radio activeColor="#19be6b" label="否" name="0"></u-radio>
</u-radio-group>

其中：v-model的值应该是一个string类型的，如：

fhMaterial.isSubmittedForAnalysis：'1'

————————————————————————————————————————

其中：flex:1 的意义

flex: 1; === flex: 1 1 0;

flex-grow: 1; flex-shrink: 1 flex-basis: auto;

flex-grow 的作用是表示在当前元素占多少份的意思。

动态class：:class="navIndex==index ? 'active' : ' ' "

用到的插件：

moment

npm install moment

在main.js里面

import moment from ‘moment’

Vue.prototype.$moment = moment;

uView

①import uView from 'uview-ui';

uView依赖SCSS，必须要安装此插件，否则无法正常运行。

②

// 安装node-sass
npm i node-sass -D

// 安装sass-loader
npm i sass-loader -D

③

④在uni-css中加入

@import 'uview-ui/theme.scss';

在app.vue中加入

@import "uview-ui/index.scss";

在uni.scss中加入

@import 'uview-ui/theme.scss';

在pages.json中加入

"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},

即可

uni-app 笔记

悦读