uniapp学习之入门

我爱海鲸 2024-03-04 19:11:37 前端

简介vue3、setup、ref、reactive、computed、watch、watchEffect、line、横线、退出app、竖线、安装sass、虚线、npm淘宝镜像、开发制作插件

1、uniapp官网：https://uniapp.dcloud.net.cn/

2023-10-12 start:

问题搜索：https://ask.dcloud.net.cn/search/

end

2、下载HbuilderX开发工具：https://www.dcloud.io/hbuilderx.html

3、创建一个项目，选择vue3的项目。在初始的page/index.vue中输入：

<template>
	<view class="content">
		<view>setUp</view>
		<button @click="setValue(num+1)">{{num}}</button>
	</view>
</template>

<script>
import { ref } from "vue"
	export default {
		setup(props,content) {
			let num = ref(5)
			const setValue = (v)=> {
				num.value += v
			}
			
			return {num,setValue}
		}
	}
</script>

代码很简单，看着知道什么意思就行，然后运行到浏览器即可

<template>
	<view>
		
		<view>setup 语法糖</view>
		<view @click="copyn+=1">copyn：{{copyn}}</view>
		<view class="title">watch监听</view>
		<button size="mini" @click="stop()">停止监听</button>
		<view>运费fee:{{fee}}</view> 
		<button size="mini" @click="fee=fee+5">设置</button>
		<view>计算结果dn:{{dn}}</view>
		<button @click="n++">{{n}}</button>
		<!-- 单击确认 -->
		<input 
		@confirm="addList"
		v-model="temp"
		placeholder="添加计划"/>
		<view>
			<view v-for="(item,index) in list" :key="item">
			{{item}}
				<button size="mini" @click="list.splice(index,1)">x</button>
			</view>
		</view>
	</view>
</template>
<script setup>
	// ref 定义响应是值类型方法
	// reactive 引用类型
	// computed 从现有数据计算新的数据
	// watch监听数据的变化
	// watchEffect监听副作用（只要被这个方法引用的数据，发送变化都会触发）
	// readyonly只读常用与优化
	import {ref,reactive,computed,watch,watchEffect,readonly} from 'vue'
	// 定义响应式数据n 默认值是8
	const n = ref(8);
	const copyn = readonly(n);
	const list = reactive(uni.getStorageSync("list")||[])
	// 定义临时数据
	const temp = ref('');
	const addList = (e)=>{
		console.log(e)
		// 在list添加一个元素为当前事件input的值
		list.unshift(e.detail.value)
		temp.value = '';
		 
	}
	//计算computed
	const dn = computed(()=>n.value*2)
	//计算fee
	const fee = computed({
		get(){  //获取fee的时候执行get
			if(n.value==1){return 7}
			else{
				var total = n.value*5+2;
				return total;
			}
		},
		set(v){//设置fee的时候执行 set方法
			n.value = Math.floor((v-2)/5)
		}
	})
	// 当list变化时候存储list
	// 当组件创建完毕获取list
	const stop = watch(list,(val,oldVal)=>{
		// uni.setStorageSync("list",list)
	})
	// 无论是n还是list变化都需要存储n与list
	watchEffect(()=>{
		uni.setStorageSync("list",list);
		uni.setStorageSync("n",n.value)
	},{deep:true})
</script>

UniApp Vue 2 和 Vue 3 之间存在一些区别。以下是两者在各方面的比较：

  1. 双击劫持数据变化

Vue 2：使用 Object.defineProperty 对数据进行劫持，结合发布订阅模式实现双向数据绑定。但此方法只能监听某个属性，不能对全对象进行监听。

Vue 3：使用 ES6 的 Proxy API 对数据进行处理，可以监听全对象。相比 Vue 2，此方法可以省去 for in、闭包等内容来提升效率，并可以监听数组，检测到数组内部数据的变化。

  1. 支持碎片

Vue 2：不支持碎片，只能拥有单个根节点。

Vue 3：支持碎片，可以有多个根节点。

  1. 生命周期

Vue 2：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 等。

Vue 3：setup、onBeforeMount、mounted、onBeforeUpdate、updated、onBeforeUnmount、unmounted 等。

  1. 选项类型 API 与合成型 API

Vue 2：使用选项类型 API，在代码中分割出不同的属性，如 data、computed、methods 等。

Vue 3：使用合成型 API，通过方法来分割代码，相比旧的 API 使用属性来分组，代码更加简洁和整洁。

  1. 建立数据

Vue 2：把数据放入 data 中。

Vue 3：使用 setup() 方法来返回响应性数据，从而 template 可以获取这些响应性数据。

  1. 子组件与父组件传参

Vue 2：在子组件中通过 props 接收父组件传入的参数。

Vue 3：在 setup() 方法中接收父组件传入的 props，并且可以访问到生命周期函数。

2023-08-11 start

4、有关uniapp的flex的布局参考文档：

https://uniapp.dcloud.net.cn/tutorial/nvue-css.html#flex-%E5%AE%B9%E5%99%A8

  1. 更换镜像源：使用国内镜像源可以加速下载速度。您可以通过在终端中运行以下命令来更换镜像源：

npm config set registry https://registry.npm.taobao.org/

end

b站相关视频：

https://www.bilibili.com/video/BV1xX4y1n7pq/?spm_id_from=333.337.search-card.all.click

https://www.bilibili.com/video/BV1vL411d7PW?p=23&vd_source=5f6653b0e7fc3c45af50cd854bea3ee5

2023-09-09 start:

学会uni-app引导页制作，这一篇就够了

 end

2023-09-11 start:

引导页的基本代码：

<template>
  <view>
    <swiper :style="{height:windowHeight+'px'}" :indicator-dots="true" @change="swiperChange">
		<swiper-item v-for="(item,index) in list" :key="index">
			<view class="swiper-item">
			<!-- 添加你的引导页内容 -->
			<image class="swiper-item" :src="item" mode="aspectFill"></image>
			<button class="skip-button" v-show="index===lastIndex-1" @click="skipToMainPage">跳过</button>
			</view>
		</swiper-item>
    </swiper>

    <!-- 最后一页添加一个按钮用于跳转到主页或登录页 -->
    <!-- <button @click="goToMainPage">开始使用</button> -->
  </view>
</template>

 <script setup>
import { onLoad } from '@dcloudio/uni-app';
import { message } from 'ant-design-vue';
import {ref} from 'vue'
import {getList} from '../../api/guide.js'

// 引导页图片配置列表
	const list = ref([
		'../../static/image/guide/1.jpg',
		'../../static/image/guide/2.jpg',
		'../../static/image/guide/3.jpg'
	])
	// 最后一个引导页图片配置的索引值
	const lastIndex = ref(0)
	
	const windowHeight = ref(0)
	
	onLoad(()=>{
        uni.getSystemInfo({
	        success: res => {
	           windowHeight.value = res.windowHeight; //窗口高度
	        }
        });
		getList().then((res)=>{
			console.log(res)
			const {code,message} = res
			if (code === '0') {
				const {data} = res
				list.value = data
				lastIndex.value = data.length
			} else {
				message.error(message)
			}
		})
		console.log("windowHeight.value",windowHeight.value)
	})
	
	const skipToMainPage = () => {
		uni.switchTab({
		    url: '/pages/home/index' // 跳转到主页
		});
	}
	
 </script>

<style scoped>

.swiper-item {
  width: 100%;
  height: 100vh;
	position: relative; 
	overflow: hidden;
}

.skip-button {
  position: absolute;
  top: 20px; 
  right: 20px; 
  background-color: rgba(0, 0, 0, 0.5); 
  color: #fff; 
  padding: 0px 8px; 
  border-radius: 10px; 
}
</style>

end

2023-09-13 start:

修改swiper的滑动点样式：

/deep/ .uni-swiper-dots {

	bottom: 256rpx;    
}

/deep/ .uni-swiper-dot {

	width: 12rpx !important;  
	height: 12rpx !important;   
	background: #84BFB5 !important;  

}

/deep/ .uni-swiper-dot-active {
	

	width: 52rpx !important; 
	height: 12rpx !important;
	background: #84BFB5 !important;
	border-radius: 4rpx;
}

end
2023-10-08 start:

uniapp组件库（支持vue3）

ThorUI文档

npm install nutui-uniapp

官网：快速开始 | nutui-uniapp (uniapp-nutui.tech)

扩展组件

Badge 数字角标 (dcloud.net.cn)

end

2023-10-10 start:

画一条横线

<view class="line"></view>
	/* 横线 */
	.line{
	  width: 100%;
	  height: 1px;
	  background-color: #eee;
	  
	  margin-top: 40rpx;
	}

end

2023-10-13 start

uniapp退出app：

		switch (uni.getSystemInfoSync().platform) {
		    case 'android':
		        plus.runtime.quit();
		    break;
		    case 'ios':
		        plus.ios.import('UIApplication').sharedApplication().performSelector('exit');
		    break;
		}

end

2023-10-30 start

竖线：

<template>
  <view class="vertical-line"></view>
</template>

<style>
.vertical-line {
  width: 2px; /* 线的宽度 */
  height: 100px; /* 线的高度 */
  background-color: #000; /* 线的颜色，可以根据需求更改 */
}
</style>

end

2023-11-01、2023-11-22 、2024-01-23start

安装sass：

npm install -g cnpm -registry=https://registry.npm.taobao.org

cnpm install node-sass --save-dev

cnpm install sass-loader --save-dev

淘宝镜像：

https://registry.npmmirror.com

npm config set registry https://registry.npmmirror.com

查看是否更新正确指令：

npm config get registry

如果报[vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it? 就试试这个

npm install sass --save-dev

使用：

<style lang="scss">

end

2023-11-28 start:

虚线

<view class="dotted-line"></view>


.dotted-line{
					width: 630rpx;
					height: 2rpx;
					border-top: 1px dashed #D6D6D6;  
					
					margin-left: 30rpx;
					margin-left: 24rpx;
				}

end

2024-03-04 start:

制作和发布插件指南 | uni-app官网 (dcloud.net.cn)

end

你好：我的2025

上一篇：AR技术初识

下一篇：ChatWeb搭建

前端

前端

前端

最近更新

最近更新

最近更新

Copyright 2025 Inc. AllRights Reserved. Design by 我爱海鲸 湘ICP备19022671号-1