uniapp入門

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>