欢迎光临
感谢一路有你

uni-app学习

每个 .vue 文件最多包含一个 < template> 块。
每个 .vue 文件最多包含一个 < script> 块。
一个 .vue 文件可以包含多个 < style> 标签。

导入
< script src=”./script.js”>

uni-app框架目前仅支持长度单位 px 和 %。
PS:uni-app 的基准宽度为 750px。

样式导入

pages.json 配置(tabbar/窗口)
http://www.hcoder.net/tutorials/info_1339.html

生命周期

onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为object(用于页面传参),参考示例
onShow 监听页面显示
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnload 监听页面卸载
onPullDownRefresh 监听用户下拉动作
onReachBottom 页面上拉触底事件的处理函数
onShareAppMessage 用户点击右上角分享 微信小程序
onPageScroll 监听页面滚动
onTabItemTap 当前是 tab 页时,点击 tab 时触发。

数据绑定

列表渲染

条件渲染

hidden

class style 绑定

事件处理、事件绑定、事件传参

web uniapp 对应表
click: ‘tap’,
touchstart: ‘touchstart’,
touchmove: ‘touchmove’,
touchcancel: ‘touchcancel’,
touchend: ‘touchend’,
tap: ‘tap’,
longtap: ‘longtap’,
input: ‘input’,
change: ‘change’,
submit: ‘submit’,
blur: ‘blur’,
focus: ‘focus’,
reset: ‘reset’,
confirm: ‘confirm’,
columnchange: ‘columnchange’,
linechange: ‘linechange’,
error: ‘error’,
scrolltoupper: ‘scrolltoupper’,
scrolltolower: ‘scrolltolower’,
scroll: ‘scroll’

在 input 和 textarea 中 change 事件会被转为 blur 事件。

事件绑定 @click

事件传参

组件

基本组件 https://uniapp.dcloud.io/component/README
表单组件 http://uniapp.dcloud.io/component/button

navigator
http://www.hcoder.net/tutorials/info_1347.html

媒体组件

地图组件

uni.request(OBJECT) 发起网络请求

get

post

图片的相关接口

http://www.hcoder.net/tutorials/info_1351.html

上传

uni.uploadFile(OBJECT)
客户端发起一个 POST 请求,其中 content-type 为 multipart/form-data。

数据缓存

uni.setStorage(OBJECT) 异步
uni.setStorageSync(KEY,DATA)同步
uni.getStorage(OBJECT)异步
uni.getStorageSync(KEY)同步
uni.getStorageInfo(OBJECT)异步
uni.getStorageInfoSync()同步
uni.removeStorage(OBJECT)异步
uni.removeStorageSync(KEY)同步
uni.clearStorage()
uni.clearStorageSync()同步

设备相关

https://uniapp.dcloud.io/api/system/info

交互反馈

uni.showToast
uni.showLoading
uni.hideToast
uni.hideLoading
uni.showModal
uni.showActionSheet

http://uniapp.dcloud.io/api/system/info

设置导航条

uni.setNavigationBarTitle
uni.showNavigationBarLoading
uni.hideNavigationBarLoading
uni.setNavigationBarColor

http://uniapp.dcloud.io/api/ui/navigationbar

导航

uni.navigateTo
uni.redirectTo
uni.reLaunch
uni.switchTab
uni.navigateBack

http://uniapp.dcloud.io/api/ui/navigate?id=navigateback

下拉树新

onPullDownRefresh
需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh
当处理完数据刷新后,uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。
uni.startPullDownRefresh(OBJECT)
开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。

上拉加载更多

小程序登陆

http://www.hcoder.net/tutorials/info_1360.html

h5+app登陆

http://www.hcoder.net/tutorials/info_1361.html

自定义组件

http://www.hcoder.net/tutorials/info_1362.html

赞(0) 打赏
未经允许不得转载:王明昌博客 » uni-app学习
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏