uniapp基础使用入门

最新推荐文章于 2025-03-05 17:33:25 发布

爱笑萌娃

最新推荐文章于 2025-03-05 17:33:25 发布

阅读量1.7k

点赞数 6

本文链接：https://blog.youkuaiyun.com/qq_43101321/article/details/102586245

版权

uniapp 专栏收录该内容

1 篇文章

订阅专栏

uniapp 项目的创建：

可以使用hbuildx也可以npm的方式，不同之处在于，开发app只能用hbuildx。
这里介绍使用hbuildx的方式，（npm 方式可以参考官网）
项目创建步骤：
1）操作如下图，点击项目

在这里插入图片描述
2）选择需要创建的项目类型：选择之后点击创建，uniapp项目即创建完毕，uni-app是可以多平台运行的创建，主要特色就是它的条件编译和跨端，接下来看配置

1.pages的配置：

在这里插入图片描述
基本和微信小程序的配置差不多，但是如果需要做条件编译，配置会有所不同，路由的配置如下图，如果是最后一项，把’,'写在条件语句内花括号前，否则会报错，eg:

globalStyle配置：

全局样式的条件配置：如下所示，“mp-名” ：对应平台的展示效果
在这里插入图片描述

tabBar 的条件配置：

如果条件编译是最后一条数据，把“，”需要在花括号前，如下图。
在这里插入图片描述

接下来看代码中的条件编译：

条件编译
ifdef 在xx平台生效
ifndef 除xx平台生效

html 中
<!-- #ifdef MP-WEIXIN || MP-BAIDU -->   
<button @getuserinfo="getUserInfo">获取用户信息</button>  
<!-- #endif -->

css 中
/* #ifdef MP-ALIPAY*/  
input {  
    padding: 0;  
}  
/* #endif */

js 中
// #ifdef APP-PLUS  
plus.speech.startRecognize(options, function (result) {  
    console.log('语音识别成功');  
}
// #endif

sass 的使用

可以直接把你的sass文件放到项目中，在使用的页面中直接引入，eg:如下：
注意：引入必须以’~@'开头，语句后必须加 ‘；’，否则会报错
在这里插入图片描述
最后，页面的写法和普通项目类似，下面给出一个简单的页面案例：

<template>
	<view>
		<!-- #ifdef H5 -->
		<view> h5 carts</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view> weixin carts</view>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<view> 支付宝小程序</view>
		<!-- #endif -->
		<!-- #ifdef MP-BAIDU -->
		<view>百度小程序</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view>app 购物车</view>
		<!-- #endif -->
		<view>{{fullName}}</view>
		<input class="ain" type="text" v-model="oinput" @input="change()" password="请输入内容" />
		<view>{{pname | proName}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 firstName: 'Foo',  
				 lastName: 'Bar', 
				  oinput:'',
				  pname:'你好啊NSF发佛问佛无法撒酒疯服务番外篇'
			}
		},
		computed:{
		  fullName() {  
				return this.firstName + ' ' + this.lastName
		  }  
		},
		filters:{
			'proName':function(value,length){
				value = value || '';
				length = length || 5;
				if(value.length<=5){
					return value
				}
				return value.substr(0,length)+'...';
			}
		},
		methods: {
			change(){
				this.firstName=this.oinput;
			},
		},
		
	}
</script>

<style lang="scss">
@import '~@/style/base.scss';
.img-wrap{
	image{
		width: 200upx;
		height: 200upx;
	}
}
</style>