uni-app：开发过程中的磕磕绊绊---经验总结
前言：使用
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 = thisif (option.item != null) { var data = JSON.parse(decodeURIComponent(option.item));}}util.js文件引入
//官方虽然有内联和外联引入，但这款微信开发工具不报错。
var util = require('../../utils/util.js');
<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 = thisthat.recordData = data},- 页面数据，需要上个页面传值，然后再请求数据，这个时候首先是条件查询语句
//注意这个写法。
:where="`user_id=='${userInfo._id}'`"还有需要手动请求。
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()})}}
