文章目录
1. 基本组件的使用
uni-app提供了丰富的基础组件给开发者，开发者可以像搭建积木一样，组合各种组件拼接成自己的应用 uni-app中的组件，就像html中的div,p,span等标签的作用一样，用于搭建页面的基础结构 https://uniapp.dcloud.net.cn/component
1. text文本组件的使用
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| selectabel | boolean | false | 否 | 文本是否可选 |
| space | string | 否 | 显示连续空格，可选参数： ensp,emsp,nbsp ensp:中文字符空格一半大小 emsp:中文字符空格大小 nbsp:根据字体设置的空格大小 | |
| decode | boolean | false | 否 | 是否解码，支持：5+APP,H5,微信小程序 |
•text组件相当于行内标签，在同一行显示(相当于span标签)
•除了文本节点以外的其他节点都无法长按选中
•
<text>text组件</text>
<!-- text 组件使用 -->
<text>
<text>嵌套</text>
</text>
<view>
<!-- 长按可选中文本 -->
<text selectable>详情页呀详情页</text>
</view>
<view>
<!-- 显示连续空格 -->
<view>
<!-- ensp 两个个空格=一个字符大小 -->
<text space="ensp">详情页呀 详情页</text>
</view>
<view>
<!-- emsp 一个空格=一个字符大小 -->
<text space="emsp">详情页呀 详情页</text>
</view>
<view>
<!-- nbsp 三个空格=一个字符大小 -->
<text space="nbsp">详情页呀 详情页</text>
</view>
</view>
<view>
<!-- 解码 -->
<text decode>&</text>
<text decode selectable>λ</text>
</view>
2. view视图容器组件的使用
类似于HTML的div
组件属性：
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| hover-class | string | none | 否 | 指定按下去的样式类，当hover-class=“none”,没有点击效果 |
| hover-stop-propagation | blooean | false | 否 | 指定是否阻止本阶段的祖先阶段出现点击态 |
| hover-start-time | number | 50 | 否 | 按住后多久出现点击态，单位毫秒 |
| hover-stay-time | number | 400 | 否 | 手指松开后点击态保留事件，单位毫秒 |
<!-- view 组件使用 -->
<view class="f-content" hover-class="f-active">
<view class="content" hover-class="content-active" :hover-stop-propagation="true" :hover-stay-time="1000">
呀哈哈
</view>
</view>
3. button按钮组件的使用
组件属性：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| size | string | default | 按钮的大小，可选：default，mini |
| type | String | default | 按钮的样式类型，可选：primary，default，warn |
| plain | Boolean | false | 按钮式否镂空，背景色透明 |
| disabled | Boolean | false | 按钮是否可点击 |
| loading | Boolean | false | 按钮名称是否显示loading图标状态 |
type： - primary: 微信小程序、360小程序为绿色，App、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色，字节跳动小程序为红色，QQ小程序为浅蓝色。如想在多端统一颜色，请改用default，然后自行写样式 - default: 白色 - warn: 红色
<view>
<text>button组件</text>
<button>呀哈哈</button>
<button size="mini" type="warn">呀哈哈</button>
<button type="primary">呀哈哈</button>
<button type="primary" plain>呀哈哈</button>
<button type="primary" disabled>呀哈哈</button>
<button type="primary" plain loading>呀哈哈</button>
</view>
4. image组件的使用
组件属性：
| 属性 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| src | string | 图片资源地址仅支持相对路径、绝对路径，支持 base64 码； | ||
| mode | String | scaleToFill | 图片裁剪、缩放的模式 | |
| lazy-load | Boolean | false | 图片懒加载。只针对page与scroll-view下的image有效 | 微信小程序、百度小程序、字节跳动小程序、飞书小程序 |
| fade-show | Boolean | true | 图片显示动画效果 | 仅App-nvue 2.3.4+ Android有效 |
| webp | Boolean | false | 在系统不支持webp的情况下是否单独启用webp。默认false，只支持网络资源。 | 微信小程序2.9.0 |
| show-menu-by-longpress | Boolean | false | 开启长按图片显示识别小程序码菜单 | 微信小程序2.7.0 |
| draggable | Boolean | true | 是否能拖动图片 | H5 3.1.1+、App（iOS15+） |
| @error | HandleEvent | 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong’} | ||
| @load | HandleEvent | 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:‘图片高度px’, width:‘图片宽度px’} |
mode常用缩放 ：
1、缩放: aspectFit： 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
2、缩放: aspectFill： 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
3、缩放：scaleToFill： 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
4、缩放： widthFix： 宽度不变，高度自动变化，保持原图宽高比不变
5、缩放： heightFix： 高度不变，宽度自动变化，保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3
6、裁剪： top： 不缩放图片，只显示图片的顶部区域
7、裁剪： bottom： 不缩放图片，只显示图片的底部区域
8、裁剪： center： 不缩放图片，只显示图片的中间区域 - 裁剪： left 不缩放图片，只显示图片的左边区域 - 裁剪： right 不缩放图片，只显示图片的右边区域
9、裁剪： top left： 不缩放图片，只显示图片的左上边区域 - 裁剪： top right 不缩放图片，只显示图片的右上边区域 - 裁剪： bottom left 不缩放图片，只显示图片的左下边区域
10、裁剪： bottom right： 不缩放图片，只显示图片的右下边区域
<view>
<text>image组件</text>
<!-- 缩放:aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 -->
<!-- 缩放: aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 -->
<image src="http://destiny001.gitee.io/image/cxk.gif"></image>
<image src="http://destiny001.gitee.io/image/cxk.gif" mode="aspectFit"></image>
<image src="http://destiny001.gitee.io/image/cxk.gif" mode="aspectFill"></image>
</view>
5. map组件
参考【uni-app】申请高德地图key，封装map.js，实现H5、iOS、Android通过getlocation获取地图定位信息
2. uni-app中的样式
-
rpx 即响应式px, 一种根据平面宽度自适应的动态单位。以750宽的平面为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大
-
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束
-
支持基本常用的选择器class,id,element第
-
在uni-app中不支持使用*选择器
-
page相当于body节点
-
定义在APP.vue中的样式为全局样式，作用于每一个页面。在page目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖APP.vue中相同的选择器
-
uni-app支持使用字体图标，使用方式与普通web项目相同，需要注意：
-
字体文件小于40kb,uni-app会自动将其转化为base64格式
-
字体文件大于等于40kb, 需开发者自己转换，否则不生效
-
字体文件的引用路径推荐使用~@开通的绝对路径
@font-face {
font-family: test-icon;
src:url('~@/static/iconfont.ttf');
}
- 如何使用scss或者less
<view class="box">
呀哈哈
<text class="iconfont icon-tupian icon"></text>
</view>
<style lang="scss">
@import url('./style.css');
.box{
width: 375rpx;
height: 375rpx;
background-color: gray;
font-size: 16rpx;
color: #fff;
.icon{
color: red;
}
}
</style>
<!-- App.vue 全局样式 -->
<style>
/*每个页面公共css */
@import url('./static/fonts/iconfont.css');
</style>
1. uni-app：px2rpx计算
rpx和px的区分和转换：
开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：
设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx
换言之，页面元素宽度在 uni-app 中的宽度计算公式： 750 * 元素在设计稿中的宽度 / 设计稿基准宽度
举例说明：
若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100rpx。
若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx。
若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400rpx。
注意:
- rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px 单位。
- 如果开发者在字体或高度中也使用了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。
- 如果你需要固定高度，则应该使用px - rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向 - 设计师可以用 iPhone6 作为视觉稿的标准
3. uni-app的数据绑定
1. 基本的数据绑定
基本的数据绑定和vue一致
<template>
<view>
{
{"数据绑定"}}
<view>{
{name}}</view>
<view>{
{"hello word"}}</view>
<view>{
{2+3}}</view>
<view>{
{flag?"哦嚯嚯":"咦嘻嘻"}}</view>
<!-- v-bind -->
<image v-bind:src="url"></image>
<!-- <image :src="url"></image> -->
<!-- v-for -->
<view v-for="(item, index) in arr" :key="item.id">
姓名：{
{item.name}} --- 年龄：{
{item.age}}
</view>
<!-- v-on -->
<view @click="handleFClick" style="width: 375rpx;height: 375rpx;background-color: darkcyan;padding: 10rpx;">
<button type="primary" size="mini" v-on:click.stop="handleClick($event,20)">按钮</button>
<!-- <button type="primary" size="mini" @click="handleClick($event, 20)">按钮</button> -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
flag:false,
name:"呀哈哈",
}
},
</script>
2. v-bind,v-for,v-on
<template>
<view>
{
{"数据绑定"}}
<view>{
{name}}</view>
<view>{
{"hello word"}}</view>
<view>{
{2+3}}</view>
<view>{
{flag?"哦嚯嚯":"咦嘻嘻"}}</view>
<!-- v-bind -->
<image v-bind:src="url"></image>
<!-- <image :src="url"></image> -->
<!-- v-for -->
<view v-for="(item, index) in arr" :key="item.id">
姓名：{
{item.name}} --- 年龄：{
{item.age}}
</view>
<!-- v-on -->
<view @click="handleFClick" style="width: 375rpx;height: 375rpx;background-color: darkcyan;padding: 10rpx;">
<button type="primary" size="mini" v-on:click.stop="handleClick($event,20)">按钮</button>
<!-- <button type="primary" size="mini" @click="handleClick($event, 20)">按钮</button> -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
flag:false,
name:"呀哈哈",
url:"http://destiny001.gitee.io/image/cxk.gif",
arr:[
{
id:1,
age:10,
name:"呀哈哈"
},
{
id:2,
age:12,
name:"哟嚯嚯"
},
{
id:3,
age:18,
name:"哦呵呵"
}
]
}
},
methods: {
handleClick(e, num){
console.log("子-按钮点击",e, num);
},
handleFClick(){
console.log("父-冒泡点击");
}
}
}
</script>
<style lang="scss">
最低0.47元/天 解锁文章
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
