uniapp学习记录

目录

1.布局使用flex布局

2.rpx和界面自适应，设计稿是750rpx

3.首页不显示tabBar

4.跳转页面/启动跳转页面

5.uniapp中页面生命周期/传值

6.颜色使用

7.字体使用

8.SCSS/CSS中获取js的值

---

1.布局使用flex布局

宽度自适应大小使用rpx，全屏宽度使用100%，uniapp默认设计稿是750（工具-》设置》编辑器配置）

2.rpx和界面自适应，设计稿是750rpx

<view style="width: 375rpx;">121</view>

永远都是一半的显示，自适应大小 

3.首页不显示tabBar

不要把pages中的页面配置到tabBar中，那么首页就不显示tabBar

4.跳转页面/启动跳转页面

1.navigator：只能跳转本地页面，目标页面必须在pages.json中注册，否则跳转报错。

2.uni.navigateTo()：跳转到某一个界面中。

调试的时候，跳转到具体页面配置，在pages.json中配置

,
	"condition": { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式（list 的索引项）
		"list": [{
				"name": "test", //模式名称
				"path": "pages/info/info", //启动页面，必选
				"query": "newsid=5158607" //启动参数，在页面的onLoad函数里面得到。
			}
		]
	}

5.uniapp中页面生命周期/传值

在vue3的setup语法中，使用onLoad，onShow这些函数时要引入

	import {
		onLoad
	} from '@dcloudio/uni-app';

传值

uni.navigateTo({
			url: '/pages/test/test?id=1'
		});

接收值

onLoad((options) => {
		console.log('接收传值：', options.id)
	});

6.颜色使用

在uni.scss中定义颜色

$uni-color-primary: #FF0099;

scss中使用

.b{
	color: $uni-color-primary;
}

7.字体使用

1.在iconfont-阿里巴巴矢量图标库上下载字体

2.放入文件，选择ttf

3.引用

<style lang="scss">
	@font-face {
		font-family: test-font;
		src: url('./static/fonts/Alimama_DongFangDaKai_Regular.ttf');
	}
</style>

4.使用。全局使用的时，在App.vue中使用

	.b {
		font-family: test-font;
	}

5.效果

Online @font-face generator — Transfonter   转化base64

8.SCSS/CSS中获取js的值

js中代码

const sysHeight = (uni.getWindowInfo().screenHeight - 200).toString() + 'px'

SCSS/CSS 

	height: v-bind('sysHeight');