uniapp开发中使用的一些技巧

一、npm技巧

1、npm初始化

npm init -y

2、npm依赖第三方库

npm install --save uni-simple-router

3、npm依赖指定版本

因为依赖的第三方库新旧版本可能差别比较大，如果这个时候项目用的比较旧的依赖出现问题需要重新依赖时候，就需要使用指定依赖

npm install --save uni-simple-router@1.5.2

二、代码技巧

1、金额省略两位数 四舍五入

Number(3.657).toFixed(2)

2、请求公共参数部分不可以使用动态绑定参数进行赋值，比如vuex绑定

3、json文件中尽量不要使用注释

json中使用注释，有时候不起效，依然还是会被解析，甚至某些情况下编译失败

4、自动依赖库easycom的自定义配置注意事项

这里需要先参考以下链接：

当使用自定义配置时候，定义的组件方法名字不能有冲突，类似于，正则表达式声明时候不能即可以使用 u开头的组件，又可以使用uni开头的组件

5、v-model和data配套使用

在uniapp中，双向绑定和data中定义的内容进行配套使用，不可以和computed一起使用，否则无效

6、uniapp中IOS设备上向上滑动会将底部自定义选项卡遮挡

这个其实是IOS手机上页面可以上下滑动时候会将底部固定的内容给遮挡掉。

在项目根目录下的pages.json中修改如下:

pages:[
    {
			"path": "pages/index/index",
			"name": "home",
			"title": "首页",
			"aliasPath": "/", //对于h5端你必须在首页加上aliasPath并设置为/
			"style": {
				"navigationBarTitleText": "",
				"navigationBarTextStyle": "white",
				"enablePullDownRefresh": true,
				"navigationStyle": "custom",
				"disableScroll": true, // 禁止滚动, 解决scroll-view在Android小程序卡顿的问题
				"app-plus":{
					"scrollIndicator": "none",//app内不现实滚动条
					"bounce": "none" // 取消APP端iOS回弹,避免与下拉刷新冲突,以及bounce边缘1秒卡顿
				}
			}
		}
]

7、HBuilderX中预览效果和今日头条小程序预览效果不一致的处理

有时候开发的UI在HBuilderX中预览效果和今日头条中预览效果不一致，这里主要注意是将CSS样式的名字定义中不能包含中横线-，应该改为下划线。如下：

//错误示范，该效果在今日头条小程序上有时候不会显示
.shop-model{
	background: rgba(255, 255, 255, 1);
}

//正确示例
.shop_model{
	background: rgba(255, 255, 255, 1);
}

8、fixed在今日头条小程序中的问题

position:fixed 属性在今日头条小程序中使用有点问题，本人的效果中该属性是多余的，所以没有寻找替代方案。以后使用需要注意该情况

9、placeholder-class在今日头条中无效，需要使用placeholder-style替换

在开发中发现定义在input中的placeholder-class中的效果没用(但是APP中效果好使)，但是改为placeholder-style才好使。具体原因暂时不清楚。
正确示范代码如下:

<input class="inp" v-model="userPhone" type="number" placeholder="请输入账号" placeholder-style="color: #c8963d;"/>

10、子组件向父组件传值问题

在uniapp中子组件使用以下方式向父组件传值在今日头条小程序上会出现无效的情况，需要改为emit的方式才好使.
错误示例如下：

//子组件：
export default {
	props: {
			getCity: {
				type: Function,
				default: function() {}
			 }
		},
	methods: {
		selectedCity(item) {
				let json = JSON.stringify(item)
				this.getCity && this.getCity(item);
		},
	}
}

//父组件
<template>
	<child :getCity="getCity">选择城市</child >
</template>
<script>
export default {
	methods: {
		getCity(item) {
				 uni.navigateBack()
			}
	}
}
</script>

正确示例如下：

//子组件
export default {
	methods: {
		selectedCity(item) {
				let json = JSON.stringify(item)
				this.$emit('getCity',item);
		},
	}
}
//父组件
<template>
	<child  @getCity="getCity">选择城市</child >
</template>
<script>
export default {
	methods: {
		getCity(item) {
				 uni.navigateBack()
			}
	}
}
</script>

emit其实是全局的事件监听，不止可以用来做父子组件事件传递的作用

11、v-for暂不支持循环数据

假如出现该问题时候，首先确定key值是否有问题，尽量保证是字符串或者数值，然后保证唯一性。否则的话在触发点击事件来获取item时候，就会出现这个错误。示例写法如下：

	<view class="city-item" v-for="(item,index) in hotcity.lists" :key="item.cityCode"
								@tap="selectedCity(item)">
								{{item.city}}
	</view>

双重循环时候定义的变量名尽可能不要一样。示例写法如下：

		<view class="city_title_wrap" v-for="(city,index) in citylist" :key="city.initial">
							<view class="city-title city-title-letter">
								{{city.initial}}
							</view>
							<view class="city-list city-list-block">
								<view class="city-item" v-for="(item,index2) in city.cityInfo" :key="item.city"
									@tap="selectedCity(item)">
									{{item.city}}
								</view>
							</view>
						</view>

有种写法和上面不一样，但是在app上运行确实没有问题的，但是头条小程序上有问题，该写法需要避免，示例写法如下:

<view class="city-item" v-for="(item,index) in hotcity.lists" :key="`item${index}`"
								@tap="selectedCity(item)">
								{{item.city}}
							</view>

倘若以上写法依然出现错误，那么可以将索引值传入到点击事件触发的函数中，通过索引值获取需要的数据

12、关于定位问题

uniapp虽说提供了定位，但是有些平台无法获取定位城市，仅能获取经纬度，为了更好的兼容不同平台，最好的方式是使用第三方平台的经纬度解析功能。这里提供一种使用链接获取经纬度地址的方式：

https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${QQ_MAP_KEY}

需要的KEY需要去腾讯定位服务里面去申请，申请地址如下：

https://lbs.qq.com/service/webService/webServiceGuide/webServiceOverview

13、样式绑定

参考链接：
https://uniapp.dcloud.io/use?id=class-%e4%b8%8e-style-%e7%bb%91%e5%ae%9a

有时候我们会需要用到样式绑定去动态更改里面的数据，如下:

<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
<!--可以简化成以下方式-->
<view :style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>

但是该方式如果想更改包含中横线的变量时候就会编译错误，在这里了应该注意写法问题:

<!--错误示例-->
<view :style="{ color: activeColor, margin-top: top + 'px' }">666</view>
<!-- 正确示例 -->
<view :style="{ color: activeColor, 'margin-top': top + 'px' }">666</view>

14、uniapp调用其它小程序原生API的方式

有时候一些小程序的特色功能，uniapp没有开发出来，但是也是可以使用的。方式就是直接写。
可以参考腾讯定位服务中的微信小程序定位sdk里面的代码，因为这里面调用了微信小程序的api，但是编译并没有出错。
https://lbs.qq.com/service/webService/webServiceGuide/webServiceOverview

15、占位置不显示和不占位置不显示的方式

对于uniapp中不占位置也不显示的方式有多种方式，比如原生的 v-show='false' 和 v-if='false' 但是占位置不显示的方式就没有了。对于一些效果，比如，有两个元素，一个居左，一个居中，就不太好做。可以使用两边都有一个元素，一个显示，一个隐藏的方式让中间的元素居中显示，效果如下：

那么可以采取以下代码visibility:hidden;进行实现:

<text>北京</text>
<text>111</text>
<text style'visibility:hidden;'></text>