uni-app：开发过程中的磕磕绊绊---经验总结

Posted 2022-05-05 wuwuFQ

前言：使用uni-app一段时间了，因为自己前端知识薄弱，实际开发中有点举步维艰的感觉，趁着五一假期，总结一下。

uni-app 的页面结构

分为三个部分

	<template>  html  	</template>
 	<script>  	JS 		 <script>
	<style>		CSS 	 <style>

页面传值

传值

uni.navigateTo(
url: '../addRecord/addRecord?item=' + encodeURIComponent(JSON.stringify(this.userInfo))
)

接受

onLoad(option) 
	var that = this
		if (option.item != null) 
		 	var data = JSON.parse(decodeURIComponent(option.item));
	

util.js文件引入

//官方虽然有内联和外联引入，但这款微信开发工具不报错。

var util = require('../../utils/util.js');

<uni-list-item>自定义视图

<uni-list>
		<uni-list-item>
		<!-- 自定义 header -->
		<template v-slot:header>
			<view class="slot-box"><image class="slot-image" src="/static/logo.png" mode="widthFix"></image></view>
		</template>
		<!-- 自定义 body -->
		<template v-slot:body>
			<text class="slot-box slot-text">自定义插槽</text>
		</template>
		<!-- 自定义 footer-->
		<template v-slot:footer>
			<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
		</template>
	</uni-list-item>
</uni-list>

Toast弹窗完 返回上个页面

uni.showToast(
	title: '保存成功',
	icon: 'none',
	duration: 1500,
	success() 
		setTimeout(function() 
			uni.navigateBack()
		, 1500);
	
)

属性使用

<uni-list-item title="手机号:" :rightText="mobile" />

<view class="nickname" v-if="userInfo.nickname">
	userInfo.nickname
</view>

调试小技巧

最好不要使用内置浏览器，有很多不兼容和日志不能正常输出的，HX的代码提示和格式化等很友好，但是有时候一个标点符号的错误是很难查找的，在微信开发工具一般是调试不出来的，这个时候可以尝试在web浏览器上调试或断点，会有很多提示。

unicloud-db组件

这块代码是较完整的示例

<unicloud-db ref="udb" @load="loadData" v-slot:default="data, loading, error, options"
				collection="wu-consumption" :where="`user_id=='$userInfo._id'`"
				orderby="buyDate desc, submittime desc" loadtime="manual" manual>
</unicloud-db>

• 数据用属性接受，方便传值等操作

loadData(data) 
	var that = this
	that.recordData = data
,

• 页面数据，需要上个页面传值，然后再请求数据，这个时候首先是条件查询语句
  //注意这个写法。

:where="`user_id=='$userInfo._id'`"

还有<unicloud-db>需要手动请求。
onReady()这个时候JS已经加载了，可以找到this.$refs.udb，我在onShow()里面刷新数据，是因为需要在进入页面就实时刷新一次，而this.$nextTick可以有效的避免第一次进入页面在还有没this.$refs.udb的情况下就去请求数据。

		onReady() 
			if (this.userInfo._id) 
				this.$refs.udb.loadData()
			
		,

		onShow() 
			if (this.userInfo._id) 
				this.$nextTick(() => 
					this.$refs.udb.refresh()
				)