uniapp学习记录

目录

1.布局使用flex布局

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

3.首页不显示tabBar

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

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

6.颜色使用

7.字体使用

8.SCSS/CSS中获取js的值

9.uniapp发布跨域以及http，https的问题

10.uniapp中持久化保存数据

11.uniapp小程序平均分割页面

---

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');

9.uniapp发布跨域以及http，https的问题

使用http

1.uniapp中配置去掉

2.uniapp的请求如下 

const BASE_URL = 'http://192.168.0.100:7521/api'

3..net6 webapi中去掉

//app.UseHttpsRedirection();  

4.appsettings.json配置文件增加

4.1.第一种方式

"Kestrel": {
    "Endpoints": {
      "Http": {
        "Url": "http://*:7521"
      }
      //"Https": {
      //  "Url": "https://*:7526"
      //}
    }
  },

4.2.第二种方式 

在Program.cs中，增加下面的代码

builder.WebHost.UseUrls("http://*:7521", "https://*:7522");

运行后的效果 

以上全部设置正确后，在局域网中，包括手机平板连接的WiFi都能正常访问。 

10.uniapp中持久化保存数据

使用pinia-plugin-persist-uni

npm i pinia

npm i pinia-plugin-persist-uni

参考

Getting started | Pinia Plugin Persist Uni

11.uniapp小程序平均分割页面

效果

代码

<template>
	<view class="container">
		<view class="section">Section 1</view>
		<view class="section">Section 2</view>
		<view class="section">Section 3</view>
	</view>
</template>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 设置容器高度为视口高度 */
	}

	.section {
		flex: 1;
		/* 设置每个部分的flex值为1，使其等分容器高度 */
		background-color: #f0f0f0;
		/* 可选：为部分添加背景色以区分 */
		text-align: center;
		/* 可选：使文本居中显示 */
		line-height: 100px;
		/* 可选：设置文本行高以适应部分高度 */
	}

	/* 可选：为每个部分添加不同的背景色以更好地区分 */
	.section:nth-child(1) {
		background-color: #ffd700;
		/* 黄色 */
	}

	.section:nth-child(2) {
		background-color: #008000;
		/* 绿色 */
	}

	.section:nth-child(3) {
		background-color: #0000ff;
		/* 蓝色 */
	}
</style>

 

来源：uniapp学习记录-CSDN博客