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” 图片等比例缩放，较长的边刚好放下，较短的边可能会留白