uniapp基础

白图裘

已于 2025-06-25 14:39:22 修改

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签： uni-app

于 2021-12-18 16:01:22 首次发布

本文链接：https://blog.youkuaiyun.com/qq_35880671/article/details/122013345

目录结构

uniApp的目录结构

新建界面

在这里插入图片描述

 // 新建页面之后如果在page.json中没有对应界面的声明 请在pages里面加上
		{
			"path": "pages/index/index",//页面的路径
			"style": {
				"navigationBarTitleText": "子女APP", //顶部title	
    			"enablePullDownRefresh": false,//是否开启下拉刷新
       			"app-plus": {
					"titleNView": false //不使用系统顶部导航栏
				}			
			}
		},

uniApp界面中的所有div都被替代成了view

无得描述

uniapp页面支持的生命周期

这里截图只有一部分  具体可以去这里查看
https://uniapp.dcloud.io/collocation/frame/lifecycle?id=page

页面生命周期

created 在vue中可以支持 但是在uniapp上只支持onload

界面跳转跟传值

//跟小程序相似
uni.navigateTo({
	url: '/pages/index/index',
	success: res => {},
	fail: () => {},
	complete: () => {}
});
//vue
this.$router.push('/pages/index/index')
//router跳转
this.$route({
	url: 'pages/index/index'
})

界面传值（跟小程序一毛一样）

uni.navigateTo({
	//也可以在url中直接传值
	url:'/pages/niceServeDetail/niceServeDetail?id=666',
	//接收第二个界面传过来的值
	events: {
	    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
	    acceptDataFromOpenedPage: function(data) {
	      console.log(data)
	    },
	    someEvent: function(data) {
	      console.log(data)
	    }
    },
	success: (res) => {
		//给第二个界面传值
		res.eventChannel.emit("title","titleContent")
		//第二界面给第一个界面传值
		eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from second page'});
  		eventChannel.emit('someEvent', {data: 'data from second page for someEvent'});
	}
})
//在第二界面中的onload中接收
onload(option){
	console.log("这里是url传过来的值->",option.id);
	// #ifdef APP-NVUE
	const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
	// #endif
	// #ifndef APP-NVUE
	const eventChannel = this.getOpenerEventChannel();
	// #endif
	eventChannel.on("title",(res)=>{
	 	console.log("接收到的值->",res);
	})
}

弹消息（跟小程序出奇的相似）

uni.showToast({
	title: 'msg',
	icon:'none',
	mask:false,//类似透明遮罩效果，点击穿透不了
});

使用第三方依赖

跟vue是一样的

//比如添加依赖 uni-ui
npm i uni-ui -S

网络请求

uni.request({
	url:"url",
	data:"请求参数",
	method:"GET",
	success: (e) => {
		//TODO 
	},
	fail: (e) => {
		 
	}
})

上拉刷新下拉加载

//下拉数据刷新 需要开启 "enablePullDownRefresh": true,
//下拉监听函数
onPullDownRefresh() {
},
//触底函数 也就是上拉监听 在vue界面中的生命周期函数同级
onReachBottom() {
			
}

底部导航栏设置

在这里插入图片描述

vuex的使用 vuex官网

在uniApp中内置了vuex 我们只要配置就行

//在index文件中
// 页面路径：store/index.js 
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);//vue的插件机制

//Vuex.Store 构造器选项
const store = new Vuex.Store({
  state:{//存放状态
   "username":"foo",
  	"age":18
  }
})

  export default store

### 在main.js文件中注入

// 页面路径：main.js
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.prototype.$store = store //设置全局$store对象

// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
const app = new Vue({
    store,
    ...App
})
app.$mount()

使用

this.$store.state.username  //即可获取

vuex中多module情况下state获取

//this.$store.state.仓库的名字.prop
this.$store.state.mineStore.isLogin

获取view的高度宽度啥的

var _this = this;
uni.createSelectorQuery()
	.select('#scrollView')
	.boundingClientRect(data => {
		console.log(data);
	})
	.exec();

uniApp的打包

可直接选择在线打包

或者手动使用android studio打包

android本地打包官方指南

强行自定义表格

//定义号每个表格得高度  加特有得几个宽度 
//tdWidth: 80,
//tdWidthMax: 120,
//tdheight: 40
//动态计算有多少行确定高度   根据有多少列动态计算表格宽度
//再根据列数得动态计算可以实现简单的单元格合并
//不到万不得已 不要轻易自己动手写     尽量使用现有的三方表格实现
<view class="dis-c" :style="{ width: tdWidthMax * 3 + tdWidth * 8 + 'px' }">
	<view class="dis-r border-top">
		<view class="td-title textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">时间</view>
		<view class="td-title textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">姓名</view>
		<view class="td-title textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">年龄</view>
		<view class="td-title textCenter border-left" :style="{ width: tdWidthMax + 'px', height: tdheight + 'px' }">电话</view>
		<view class="td-title textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">方式</view>
		<view class="td-title textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">类型</view>
		<view class="td-title textCenter border-left" :style="{ width: tdWidthMax + 'px', height: tdheight + 'px' }">日期</view>
		<view class="td-title textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">送人</view>
		<view class="td-title textCenter border-left" :style="{ width: tdWidthMax + 'px', height: tdheight + 'px' }">联系电话</view>
		<view class="td-title textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">是否完成</view>
		<view class="td-title textCenter border-left border-right" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">本单收入</view>
	</view>

	<view class="dis-r">
		
		<view
			class="td dis-r ver-c hor-c border-left border-top"
			:style="{ width: tdWidth + 'px', height: tdheight + breakfastList.length * tdheight + 'px' }"
		>
		
		</view>
		<!-- 这里是合并单元格的操作 -->
		<view class="dis-c" :style="{ width: tdWidthMax * 3 + tdWidth * 7 + 'px' }">
			<view class="td border-left border-top border-right" :style="{ width: 'calc(100% - 2px)', height: tdheight + 'px' }">
				<view class="ml10 " style="width: 100%;">
					共{{ breakfastList.length }}人,其中{{ tongJiBreakfast.tangshi }}人,需配{{ tongJiBreakfast.peisong }}人, 预计共计收入{{
						tongJiBreakfast.shouru
					}}元
				</view>
			</view>
			<view class="dis-r border-top border-right" v-for="item in breakfastList">
				<view class="td textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">{{ item.fName }}</view>
				<view class="td textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">{{ item.fAge }}</view>
				<view class="td textCenter border-left" :style="{ width: tdWidthMax + 'px', height: tdheight + 'px' }">{{ item.fContact }}</view>
				<view class="td textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">{{ item.fEatWat }}</view>
				<view class="td textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">{{ item.fServiceObjectType }}</view>
				<view class="td textCenter border-left" :style="{ width: tdWidthMax + 'px', height: tdheight + 'px' }">{{ item.fOrderTime }}</view>
				<view class="td textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">{{ item.fDeliveryPerson }}</view>
				<view class="td textCenter border-left" :style="{ width: tdWidthMax + 'px', height: tdheight + 'px' }">{{ item.fContact }}</view>
				<view class="td textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">{{ item.fOrdersTatus }}</view>
				<view class="td textCenter border-left" :style="{ width: tdWidth + 'px', height: tdheight + 'px' }">
					{{ item.businessPercentagePrice }}
				</view>
			</view>
		</view>
	</view>
</view>

<script>
export default {
	data(){
		return {
			tdWidth: 80,
			tdWidthMax: 120,
			tdheight: 40,
			breakfastList: [],
			tongJiBreakfast: {
				sum: 0,
				tangshi: 0,
				peisong: 0,
				shouru: 0
			},
		}
	}
}
</script>
<style scoped lang="scss">

$table-border-color: #ebeef5;
.td {
	color: #606266;
	display: flex;
	justify-content: center;
	align-items: center;
}
.td-title {
	font-weight: bold;
	color: #909399;
	display: flex;
	justify-content: center;
	align-items: center;
}
.border-left {
	border-left: 1px $table-border-color solid;
}
.border-right {
	border-right: 1px $table-border-color solid;
}
.border-top {
	border-top: 1px $table-border-color solid;
}
.border-bottom {
	border-bottom: 1px $table-border-color solid;
}
</style>

小程序分包

主包配置

	"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "首页",
		}
	}, {
		"path": "pages/secondPage/secondPage",
		......
	}],

子包配置

"subPackages":[
		{
			"root":"index",
			"pages":[
				{
					// 26-客户角度-已发起
					"path": "pages/issued",
					"style": {
						"navigationBarTitleText": "已发起",
						"enablePullDownRefresh": false
					}
				
				},
				// ......
			]
		},
		{
			"root":"secondPage",
			"pages":[
				//......
			]
		
	],

uniapp适配状态栏方案

注意是(状态栏)不是(标题栏)

<template>
	<view :style="{ width:'100%', height: height + 'px', background: bgc }"></view>
</template>

<script>
export default {
	name: 'statusBar',
	props: {
		bgc: {
			type: String,
			default: 'rgba(0,0,0,0.1)'
		},
		height: {
			type: Number,
			default: 0
		}
	}
};
</script>
/**
每个界面引入组件即可
高度动态使用 uni.getSystemInfoSync().statusBarHeight 赋值
颜色自定义
*/

微信小程序中input type=nickname的情况下拿不到值的解决方法

uni.createSelectorQuery().in(this) // 注意这里要加上 in(this)  
    .select("#mNickname")  
    .fields({  
        properties: ["value"],  
    })  
    .exec((res) => {  
        const nickName = res?.[0]?.value  
        console.log('昵称：', nickName)  
    })