• uniapp基本使用

    Uni-app


    我要来一波全栈了，哈哈
    官网： https://uniapp.dcloud.io/

    介绍项目目录和文件作用

    pages.json 文件用来对uni-app进行全局配置，决定页面文件的路径、窗口样式、原声的导航栏、地步的原生tarbar等
    manifest.json 文件是应用的配置文件。用于指定应用的名称、图标、权限等
    App.vue 是我们的根组件。所有的页面都是在App.vue 下进行切换的，是页面入口文件，可以调用应用的生命周期函数
    main.js是我们的项目入口文件。主要的作用是初始化vue实例并使用需要的插件
    uni.scss 文件的用途是为了方便整体控制应用的风格。比如按钮的颜色、边界风格，uni.css文件里预置里一批scss变量预置
    unpackage就是打包目录，在这里有各个平台的大包文件
    pages所有的页面存放目录
    components组件存放目录

    全局配置和页面配置

    通过globalStyle进行全局配置

    用于设定应用的状态栏、导航条、标题、窗口背景色等
    属性，类型，默认值，描述

    navigationBarBackgroundColor：HexColor，#F7F7F7 ，导航栏背景颜色（同状态栏背景色）
    navigationBarTextStyle：String，white，导航栏标题颜色，仅支持black和white
    navigationBarTitleText：String， ， 导航栏标题文字内容
    backgroundColor：HexColor，#ffffff，窗口的背景色
    backgroundTextStyle：String，dark，下拉loading的样式，只支持dark/light
    enablePullDownRefresh： Boolean，false，是否开启下拉
    onReachBottomDistance： Number ，50，页面上拉触底事件距离页面底部距离，单位只支持px

    配置tabbar

    如果应用是一个多tab应用，可以通过tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页
    Tips：

    • 当设置position为top时，将不会显示icon
    • tabBar中的list是一个数组，只能配置最少2个，最多5个tab，tab按数组的顺序排序
      属性说明：
      属性 类型 必填 默认值 描述 平台差异说明

    color，HexColor，是，，tab上的文字默认颜色
    selectedColor，HexColor，是，，tab上的文字选中的颜色
    backgroundColor，HexColor，是，，tab的背景色
    borderStyle，String，否，black，tarbar上边框的颜色，仅支持balck/white
    list，Array，是，，tab的列表，至少2个，最多5个
    position,String,否，bottom，bottom/top,只支持微信小程序
    list属性
    属性： 类型，必填，说明
    pagePath：String，是，页面路径
    text：String，是，文字按钮
    iconPath：String，否，图片路径
    selectedIconPath：String，否，选中时文字路径

    Condition启动模式配置

    启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后 ，用户点击所有打开的页面
    属性，类型，是否必填，描述
    current，Number，是，当前激活的模式，list节点索引值
    list，Array，是，启动模式列表
    list说明
    name，String，是，启动模式名称
    path，String，是，启动页面路径
    query，String，否，启动参数，onload函数获取

    {
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}, {
			"path": "pages/my/my",
			"style": {
				"enablePullDownRefresh": false
			}

		}, {
			"path": "pages/list/list",
			"style": {
				"enablePullDownRefresh": false
			}

		}
	    ,{
            "path" : "pages/detail/detail",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "居然之家",
		"navigationBarBackgroundColor": "#999",
		"backgroundColor": "#F8F8F8",
		"backgroundTextStyle": "light",
		"enablePullDownRefresh": true
	},
	"tabBar": {
		"selectedColor": "#40",
		"list": [{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "static/home.png",
				"selectedIconPath": "static/home_s.png"
			},
			{
				"text": "列表",
				"pagePath": "pages/list/list",
				"iconPath": "static/list.png",
				"selectedIconPath": "static/list_s.png"
			},
			{
				"text": "我的",
				"pagePath": "pages/my/my",
				"iconPath": "static/me.png",
				"selectedIconPath": "static/me_s.png"
			}
		]
	},
	//  在小程序中可查看
	"condition": {
		"current": 0,
		"list": [
			{
				"name": "详情页",
				"path": "pages/detail/detail",
				"query": "id=1"
			}
		]
	}
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73

    组件

    text文本组件的用法

    属性，类型，默认值，必填，说明
    selectable，boolean，false，否，是否可选
    space，string，-，否，显示连续空格，可选参数：ensp（中文字符空格一半大小），nbsp（中文字符空格大小），emsp（根据字体设置的空格大小）
    decode，boolean，false，否，是否解码（$amp;$gt;等）

    • 除了文本节点其他节点都无法长按选中

    view 文本组件的用法

    属性 ， 类型， 默认值，必填，说明

    • hover-class,string,none,否，指定按下去的样式类，当hover-class=“none”时，没有点击态效果
    • hover-stop-propagation，boolean，false，否，指定是否阻止本节点的祖先节点出现点击态
    • hover-start-time，number，50，否，按住后多久出现点击态，单位毫秒
    • hover-stay-time，number，400，否，手指松开后点击态保留时间，单位毫秒

    uni-app中的样式

    • rpx 即响应式px，一种根据屏幕自适应的动态单位，以750宽的屏幕为基准，750rpx恰好为屏幕宽度，屏幕变宽，rpx实际显示效果会等比放大
    • 使用@import语句可以导入外联样式表，@import后跟需要倒入的外联样式表的相对路径，用；表示语句结束
    • 支持基本常用的选择器class，id，element等
    • 在uni-app中不能使用*选择器
    • page相当于body节点
    • 定义在App.vue中的样式为全局样式，作用于每个页面，zaipages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App-vue中相同的选择器
    • uni-app支持使用字体图标，使用方式与普通web项目相同，需要注意一下几点：
      1. 字体文件小于40kb，uni-app会自动将其转化为base64格式
      2. 字体文件大于等于40kb，需要开发者自己转换，否则使用将不生效
      3. 字体文件的引用路径推荐使用以 ～@ 开头的绝对路径
    @font-face{
	font-family:test1-icon;
	src:url('~@/static/iconfont.ttf');
}

    • 1
    • 2
    • 3
    • 4

    数据绑定

    1. 插值表达式 {{}}
    2. v-bind
    	<image v-bind:src="url" mode="scaleToFill"></image>
	<image :src="url" mode=""></image>

    • 1
    • 2
    1. v-for
       	 <view v-for="(item,index) in list" :key="item.id">
   		<view>
   			name: {{item.name}},age:{{item.age}}
   		</view>	
   	</view>

    • 1
    • 2
    • 3
    • 4
    • 5

    点击事件

    			<view @click="clickHandler(20,$event)">
				点我试试
			</view>
			clickHandler(num,e) {
				console.log(num,e);
			}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    uni声明周期

    应用的生命周期

    生命周期的概念：一个对象从创建，运行，销毁的整个过程别称为生命周期
    生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数
    在App.vue中配置
    函数名，说明
    onLaunch：初始化完成时触发（只会触发一次）
    onShow: 后台进入前台
    onHide：前台进入后台
    onError：报错触发

    页面的生命周期

    onLoad：页面加载
    onShow：监听页面显示
    onReady：监听页面初次渲染完成
    onHide：监听页面隐藏

    下拉刷新

    在页面内设置下拉刷新，把全局配置去掉

    		onPullDownRefresh() {
			console.log(111)
			let data = {
				id:this.list.length+1,
				name:Math.random(100)*1000,
				age:16
			}
			this.list.push(data)
			uni.stopPullDownRefresh()
		},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    点击下拉刷新

    	clickFlush(){
				uni.startPullDownRefresh()
			}

    • 1
    • 2
    • 3

    上拉触底加载

    onReachBottom() {
			let data = [
					{
						id:1,
						name:"张三",
						age:13
					},
					{
						id:2,
						name:"李四",
						age:14
					},
					{
						id:3,
						name:"王五",
						age:15
					},
					{
						id:4,
						name:"找流",
						age:16
					}
					
				]
				this.list = this.list.concat(data)
		},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    同时可以配置距离底部多少距离加载：

    		{
			"path": "pages/list/list",
			"style": {
				"onReachBottomDistance": 200
			}
		}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    网络请求

    以get方法为例

    	uni.request({
		url: "http://localhost:8080/user/list",
		method: "GET",
		success(res) {
			console.log(res)
		}
	})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    本地缓存

    setStore(){
				// uni.setStorage({
				// 	key:'id',
				// 	data:90,
				// 	success(res) {
				// 		console.log('存入成功',res)
				// 	}
				// })
				uni.setStorageSync("id",80)
				
			},
			getStore(){
				
				// uni.getStorage({
				// 	key:'id',
				// 	success(res) {
				// 		console.log("获取成功",res)
				// 	},
				// 	fail(res) {
				// 		console.log("获取失败",res)
				// 	}
				// })
				let res = uni.getStorageSync('id')
				console.log(res == '')
			},
			removeStore(){
				// uni.removeStorage({
				// 	key:'id',
				// 	success(res) {
				// 		console.log('删除成功',res)
				// 	}
				// })
				uni.removeStorageSync("id")
			},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    图片上传与预览

    <template>
	<view>
		<button type="primary" @click="chooseImg"> 上传图片 </button>
		<image v-for="item in imgArr" :src='item' @click="previewImg(item)"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgArr:[]
			};
		},
		methods: {
			chooseImg(){
				uni.chooseImage({
					count:5,
					success:res=>{
						console.log(res)
						this.imgArr = res.tempFilePaths
					}
				})
			},
			previewImg(current){
				uni.previewImage({
					current:current,
					urls:this.imgArr,
					loop:true,
					indicator:'number'
				})
			}
		}
	}
</script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    跨端兼容

    条件编译是用特殊的注释作为标记，在编译的时候根据这些特殊的注释，将注释里的代码编译道不同平台
    写法：以 #ifdef 平台名 开头，以 #endif 结尾
    平台标识
    值，平台
    APP-PLUS，5+App
    H5，H5
    MP-WEIXIN，微信小程序
    MP-ALIPAY，支付宝
    MP-BAIDU，百度
    MP-TOUTIAO，头条
    MP-QQ，QQ
    MP，微信，支付宝，百度，头条，QQ

    		<!-- #ifdef H5 -->
		<view >
			h5页面显示
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view >
			微信小程序页面显示
		</view>
		<!-- #endif -->

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    xml，js，css根据不同的注释样式 都可以使用

    页面跳转

    <template>
	<view>
		<view>导航跳转学习</view>
		<navigator url="/pages/detail/detail">跳转到详情页</navigator>
		<navigator url="/pages/index/index" open-type="switchTab" >跳转至首页</navigator>
		<navigator url="/pages/detail/detail" open-type="redirect">跳转到详情页</navigator>
		<view >编码形式跳转</view>
		<button @click="navigateTo">跳转到详情页</button>
		<button @click="switchTabTo">跳转到首页</button>
		<button @click="redirectTo">跳转到详情页</button>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				
			};
		},
		onUnload() {
			console.log("页面卸载了")
		},
		methods:{
			navigateTo(){
				uni.navigateTo({
					url:'/pages/detail/detail'
				})
			},
			switchTabTo(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			redirectTo(){
				uni.redirectTo({
					url:'/pages/detail/detail'
				})
			}
		}
	}
</script>

<style lang="scss">

</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    组件

    同vue，

    • 建立组件
    <template>
	<view>
		test组件
	</view>
</template>

<script>
	export default {
		name:"test",
		data() {
			return {
				
			};
		}
	}
</script>

<style>

</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 导入并注册
    import test from '@/components/test/index.vue';
	export default {
		components: {test},
		data() {
			return {
				title: '首页'
			}
		}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 使用
    <test></test>

    • 1

    组件传值

    父->子组件传值

    基于已经注册的test组件
    父：

    <test :msg=“msg”></test>

    子：

    props:[‘msg’],
    直接使用即可： test组件 : msg : {{msg}}

    子->父组件传值

    子组件：

    <button @click=“toParent”>向父组件传值</button>
    toParent(){
    this.$emit(“myNum”,20)
    }
    父组件：
    <test @myNum=“getNum”></test>
    接收子组件的值： {{num}}

    	getNum(num){
			this.num = num
		},

    • 1
    • 2
    • 3

    兄弟组件传值

    a -> b 传值
    在被传值的组件中的create方法里注册全局事件：
    b

    	created() {
		 	// 注册全局事件
			uni.$on('updateNum',num=>{
				this.num += num
			})
		},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    a 组件可以使用（点击）事件触发

    		transValue(){
				// 调用全局事件
				uni.$emit('updateNum',10)
			}

    • 1
    • 2
    • 3
    • 4

    uni 组件的使用

    https://uniapp.dcloud.io/ 打开网址，找到组件
    请添加图片描述
    点击，安装组件到指定项目，参考案例即可使用

    黑马商城： https://blog.csdn.net/li520_fei/article/details/124053891

  • 相关阅读:
    效率回归，工具库之美「GitHub 热点速览」
    【论文笔记】A Review of Motion Planning for Highway Autonomous Driving
    【二分查找】Leetcode 33. 搜索旋转排序数组【中等】
    如何拖动末端使机器人运动仿真-使用Peter机器人工具箱
    防止显卡掉卡的一种方法：nvidia-smi -pm 1
    mysql面试题四（事务）
    原子物理中的组合常数
    图像领域-深度学习网络结构（从浅入深）——基础到对比到改进
    Java中的多重继承问题
    Mybatis的多表操作之多对多查询与练习
  • 原文地址：https://blog.csdn.net/zhouhe_/article/details/125435137