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-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 = thisthat.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()})}}
uni-app：开发过程中的磕磕绊绊---经验总结相关推荐
- Android开发过程中的部分经验总结
该文章为Android App 开发过程中遇到的常见问题总结,该总结也会持续不断的优化 完善当中.后续开发中一定会遇到各种各样的问题, 这些问题会酌情不断补充进来. 我将遇到的问题分为两大类,非技术问 ...
- 整理Flutter App开发过程中遇到的问题及解决方法
整理Flutter App开发过程中遇到的问题及解决方法 最近使用flutter开发一款app,因为是第一次接触flutter,在开发过程中遇到一些问题或常用的功能点,在此记录一下(持续更新-) (1 ...
- irobot 的app开发过程中遇见的一些问题总结
最近一直在忙学校的新生杯扫地机器人irobot项目app,现在对开发过程中的一些问题进行总结. 一.因为App中需要用到较多按钮,固然可以一个一个地设置setOnClickListener,但也可以进 ...
- app开发过程中的注意事项有哪些？
在手机快速发展的时代,app凭借着自身体积小.无需安装的特点获得了良好发展生态空间,受到了很多人的喜爱,其中不乏媒体和一些政府机构.不可置否,app的强大优势让众多企业萌发了定制开发的想法,但是同样a ...
- uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下 最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图 二.解决方法 1.让其在输入框获取焦点时隐藏 百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
- 一款iPhone App推广中得来的经验教训
作者 fwish 原帖地址 http://www.cocoachina.com/bbs/read.php?tid-7017.html 这款软件在App Store上线16天,收入113.28美金 ...
- Hybrid App工作笔记0001---混合App开发过程中_Web是如何调用原生功能的_调用原理
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 vue devtool 下面这个工具是vue devtool,是一个 先说一下js代码如何给原生代 ...
- java做直播需要哪些技术_直播APP开发中需要解决哪些技术难点？千联信息
泛娱乐发展的火热,网红经济不断发酵的今天,不少企业靠着开发直播APP狠狠的赚了一波,导致很多人眼红,也想投入其中. 那么开发一款直播APP开发中需要解决哪些技术难点?小编在这里就来为大家解答: 视频直 ...
- APP开发中的UI设计
UI设计是 APP开发中一个必不可少的部分,用户体验也是影响 APP产品成功与否的重要因素,用户体验包括用户的使用感受和操作感受.就 UI设计来说,它的主要内容有:界面.图标.颜色.字体 ...
最新文章
- C++ pancake sort煎饼排序的实现算法(附完整源码)
- OA(part2)--Outlier Evaluation Techniques
- jquery设置输入框为只读_将SQL中几张表设为只读，这是什么奇怪需求？
- 又来了！深度学习PyTorch与TensorFlow到底哪家强？
- html悬浮弹窗后面背景变深,JS+CSS实现Div弹出窗口同时背景变暗的方法
- 【转】.net框架读书笔记---CLR内存管理\垃圾收集（三）
- Alpha 冲刺 （1/10）
- EasyUi之datagrid常见使用
- 管壁式换热器cad图纸_民勤图纸管板加工加工
- python filter_Python filter（）
- js动态改变iframe的高度
- DevComponents.AdvTree 相关笔记
- ESP8266文档阅读ESP8266 SDK 入门指南
- 实用工具:常用数学公式
- 常见经典音频运放（一般作前级用）
- java pptx,使用Java将文件.pptx转换为.ppt
- RealView MDK开发工具
- MATLAB运行edge函数闪退
- 儿时的动画,你看过那些？－发展时期
- IDEA+SSH ：图书管理系统实现