uni-app DAY09

复习:

1、uni-app中常用组件

内置组件:页面(page)、视图(view)、滚动视图(scroll-view)、文本(text)、富文本(rich-text)、图片(image)、输入框(input)、按钮(button)、导航器/超链接(navigator)、轮播(swiper)、拾取器/下拉菜单/选择器(picker)、单选按钮(radio-group/radio)、复选按钮(checkbox-group/checkbox)、视频(video)、地图(map)、摄像头(camera)
扩展组件(uni-ui库):图标(uni-icons)、宫格(uni-grid)、卡片(uni-card)、导航条(uni-nav-bar)、日期格式化(uni-dateformat)、列表(uni-list/uni-list-item)、标题字(uni-title)、简单输入框(uni-easyinput)、弹出式对话框(uni-popup)、加载更多(uni-load-more)
自定义组件:卡片(zh-card)、导航条(zh-nav-bar)、返回顶部(zh-go-top)

2、uni-app中常用API

(1)五种页面跳转方法

uni.navigateTo() / uni.navigateBack() / uni.redirectTo() / uni.switchTab() / uni.reLaunch

(2)四种消息弹出框

uni.showToast() / uni.showModal() / uni.showLoading()&uni.hideLoading() / uni.showActionSheet()

(3)异步请求

uni.request()

(4)客户端存储的设置/读取/删除/清空

uni.setStorageSync() / uni.getStorageSync() / uni.removeStorageSync() / uni.clearStorageSync()

(5)获得全局App对象

getApp()

(6)获得窗口/系统信息

uni.getSystemInfoSync()

(7)修改标题栏中的文本内容

uni.setNavigationBarTitle()

(8)返回页面顶部

uni.pageScrollTo()

(9)请求客户端付款

uni.requestPayment()

(10)创建地图上下文对象

uni.createMapContext()

(11)停止下拉刷新动画

uni.stopPullDownRefresh()

3、uni-app中的生命周期方法

第一组:整个应用级生命周期方法(App.vue):
启动、显示、隐藏
第二组:页面级生命周期方法(pages):
加载(有形参)、显示、就绪、隐藏、卸载、页面滚动、滚动到底、下拉刷新
第三组:组件级生命周期方法(components):
创建2、挂载2、更新2、卸载2

一、uni-app项目的最终发布部署

项目的两种运行模式:
①调试模式/开发模式/运行模式(Development Mode)——类似于Vue.js中的 npm start:
代码没有经过压缩和优化,所以代码体积比较大 —— 会自动连接开发服务器,即时更新
②生产模式/部署模式/发行模式(Production Mode)——类似于Vue.js中的 npm run build:
代码经过优化和压缩,所以代码体积比较小 —— 不能再自动连接开发服务器

演示1:把uni-app发布为“生产模式”的H5网站
点击当前项目,点击工具栏“发行”>“网站-PCWeb或手机H5”;
成功后,编译后的结果保存在 @/unpackage/dist/build/h5 目录下,该目录下的内容复制到任意真实的云服务器上的WEB服务器上即可。

演示2:把uni-app发布为“生产模式”的App
编辑项目清单文件manifest.json,修改应用名称 和 图标 和 高德地图Key 和 App权限配置(勾选);如果想安装到夜神模拟器,还需要勾选“App常用其它设置>支持CPU类型>x86”
点击当前项目,点击工具栏“发行”>“原生App-云打包”>修改“使用测试证书”>选择“安心打包”>点击“开始打包”;项目开始自动编译,完成后自动提交到DCloud服务器进行打包;等待一段时间…
打包成功后,会提示“APK文件创建成功,保存在@/unpackage/dist/build/apk”目录下;
可以重命名.apk文件,发布到应用商店 或者 放到自己的网站上供人下载 或者 直接把安装文件拷贝(用数据线或QQ)到自己的手机中,开始安装&启动App…

二、移动端项目中“列表页”编写的固定思路

三个功能
①页面加载时显示第一页数据
②页面滚动到底部时继续加载下一页,前面的内容要保留,最新内容追加在后面
③页面顶部下拉刷新,删除已加载的,重新显示第一页
五个变量:
①kw:要显示的数据包含的关键字;如果没有则默认显示全部数据
②dataList:加载到的所有的记录集合
③pageCount:符合条件的记录的总页数
④pageNum:当前加载到哪一页数据了,即页号
⑤isLoading:当前是否正在加载数据
一个方法三处调用:
loadNextPageData( ):加载下一页数据
①onLoad() ②onReachBottom() ③onPullDownRefresh()

三、uni-app中图片的缩放模式

1、mode=“widthFix” 宽度使用固定值,高度等比例缩放
2、mode=“heightFix” 高度使用固定值,宽度等比例缩放
3、mode=“scaleToFill” 不等比缩放图片,使图片刚好覆盖指定的区域
4、mode=“aspectFit” 图片等比例缩放,较长的边刚好放下,较短的边可能会留白

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值