22第9章跨平台开发uni-app（1-6节）

第9章：跨平台开发uni-app《Vue应用程序开发》

0102030Part19.1uni-app初识Part39.3uni-app的生命周期函数Part49.4uni-app的基本概念Part59.5uni-app的内置组件目录CONTENTSPart69.6uni-appAPIPart29.2创建一个uni-app项目9.1uni-app初识uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app提供丰富的组件和插件，减少开发成本，提升开发效率。同时，它拥有完善的文档和社区支持，方便学习和问题解决。9.2创建一个uni-app项目下载HBuiderX开发者工具HBuiderX下载地址为：https://www.dcloud.io/hbuilderx.html。将光标移入more会出现下拉菜单如图（2-1-1），这里有两个版本：正式版本与Alpha（测试版本）。这里根据自自己的电脑类型选择Windows或者macOS。Windows版本为免安装绿色版，下载后解压，打开HBuilderX文件，运行HBuiderX.exe文件即可。9.2创建一个uni-app项目HBuilderX可视化界面创建项目打开HBuilderX，如图2-2-1选择“文件”→“新建”→“项目”，弹出新建项目对话框。图2-2-19.2创建一个uni-app项目运行到浏览器：选择“运行”→“运行到浏览器”命令，选择需要调试的浏览器，如图2-3-2，编译完成后弹出会自动打开浏览器查看页面，如图2-3-3所示。图2-3-2图2-3-39.2创建一个新的App9.2.3编译和运行默认情况下weexcreate命令并不初始化iOS和Android项目，你可以通过执行weexplatformadd来添加特定平台的项目。9.3.4调试weex-toolkit提供了强大的调试功能，只需要执行下面的命令。9.3uni-app的生命周期函数uni-app支持的应用生命周期函数：onLaunch：当应用程序启动时，该函数被调用。UniApp应用的全局变量和全局事件可以在该函数中初始化。全局只触发一次。onShow：当应用程序从后台切换到前台时，该函数被调用。开发者可以在该函数中处理应用程序切换到前台后的一些操作，比如获取数据、刷新页面等。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面。onHide：当应用程序从前台切换到后台时，该函数被调用。开发者可以在该函数中处理应用程序切换到后台后的一些操作，比如停止播放音乐、释放资源等。onError：当应用程序发生错误时，该函数被调用。开发者可以在该函数中处理错误信息，并在应用程序崩溃前做一些资源释放或其他清理操作。onUniNViewMessage：当应用程序收到uni-app页面（包括h5和小程序端）发来的消息时，该函数会被调用。开发者可以在该函数中处理uni-app页面传来的消息。9.3uni-app的生命周期函数uni-app组件支持的生命周期：beforeCreate：在实例初始化之前被调用，在这个阶段，组件的数据和方法都还没有被初始化。created：在实例创建完成后被立即调用，它通常用来初始化页面的一些数据、监听页面生命周期等操作。beforeMount：在挂载开始之前被调用，在这个阶段，组件的模板和数据都已经初始化完成，但尚未挂载到页面上。mounted：挂载到实例上去之后调用，这个阶段发生在模板编译和渲染之后，此时可以通过DOMAPI来获取到组件的DOM节点。beforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前（仅H5平台支持）。updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子（仅H5平台支持）。9.4uni-app的基本概念pages.json

文件用来对uni-app进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等。常用配置项列表：属性类型必填描述globalStyleObject否设置默认页面的窗口表现pagesObject

Array是设置页面路径窗口表现easycomObject

否组件自动引入规则tabBarObject否设置底部tab的表现9.4uni-app的基本概念pages：通过pages节点配置应用由哪些页面组成，pages节点接收一个数组，数组每个项都是一个对象，其属性值如下：path：类型为String，配置页面路径；style：类型为Object，配置页面窗口表现；needLogin：类型为Boolean，默认为false，是否需要登录才可访问；注意：pages节点的第一项为应用入口页（即首页）；应用中新增/减少页面，都需要对pages数组进行修改；文件名不需要写后缀，框架会自动寻找路径下的页面资源。9.5uni-app的内置组件form：表单，将组件内的用户输入的<switch><input><checkbox><slider><radio><picker>提交。当点击<form>表单中formType为submit的<button>组件时，会将表单组件中的value值进行提交，需要在表单组件中加上name来作为key。普通选择器常用属性（更多属性可查看官方文档）：@submit：EventHandle，携带form中的数据触发submit事件，event.detail={value:{'name':'value'},formId:''}，report-submit为true时才会返回formId；@reset：EventHandle，表单重置时会触发reset事件;9.5uni-app的内置组件radio，单选项目。常用属性说明：value：String，表示单选框的标识值，它是单选框的唯一标识，可以用来区分不同的选项；checked：Boolean，默认值false，当前是否选中；

disabled：Boolean，默认值false，是否禁用；color：Color，radio的颜色，同css的color；backgroundColor：Color，默认值#ffffff，radio默认的背景颜色，平台差异详见官方文档；borderColor：Color，默认值#d1d1d1，radio默认的边框颜色，平台差异详见官方文档；activeBackgroundColor：Color，默认值#007AFF，radio选中时的背景颜色，平台差异详见官方文档；9.5uni-app的内置组件radio-group：单项选择器，内部由多个<radio>组成。通过把多个radio包裹在一个radio-group下，实现这些radio的单选。常用属性说明：@change：<radio-group>中的选中项发生变化时触发change事件；radio-group案例04-02：图1-1-39.5uni-app的内置组件checkbox，多选项目。常用属性说明：value：String，表示单选框的标识值，它是单选框的唯一标识，可以用来区分不同的选项；checked：Boolean，默认值false，当前是否选中；

disabled：Boolean，默认值false，是否禁用；color：Color，radio的颜色，同css的color；backgroundColor：Color，默认值#ffffff，radio默认的背景颜色，平台差异详见官方文档；borderColor：Color，默认值#d1d1d1，radio默认的边框颜色，平台差异详见官方文档；activeBackgroundColor：Color，默认值#007AFF，radio选中时的背景颜色，平台差异详见官方文档；9.5uni-app的内置组件activeBorderColor：Color，radio选中时的边框颜色，平台差异详见官方文档；iconColor：Color，默认值#ffffff，radio的图标颜色，平台差异详见官方文档；checkbox案例04-03：图1-1-6图1-1-79.5uni-app的内置组件input：单行输入框。常用属性说明（更多说明可查看官方文档）：value：String，输入框的初始内容；type：String，input的类型有效值，例：text，idcard（身份证输入键盘），number，tel（电话输入键盘）等（平台差异可查看官方文档）；confirm-type：String，设置键盘右下角按钮的文字，仅在type="text"时生效。有效值：send（右下角按钮为“发送”），search（右下角按钮为“搜索”）等；@input：EventHandle，当键盘输入时，触发input事件；@focus：EventHandle，输入框聚焦时触发；@blur：EventHandle，输入框失去焦点时触发；@confirm：EventHandle，点击完成按钮时触发;9.5uni-app的内置组件input属性type

案例04-05（微信小程序为例）：聚焦type=idcard输入框，如图1-2-2显示；聚焦type=tel输入框，如图1-2-3显示；图1-2-1图1-2-2图1-2-39.5uni-app的内置组件（表单组件）button：按钮。常用属性说明（更多属性可查看官方文档）：size：String，按钮的大小；type：String，按钮的样式类型；plain：Boolean，默认值false，按钮是否镂空，背景色透明；loading：Boolean，默认值false，名称前是否带loading图标；open-type：String，用于定义按钮的开放能力，即按钮点击后触发的特定动作或行为，如触发用户转发、获取用户信息等。具体的使用方式和有效值取决于平台的支持。@click：可以使用@click事件监听按钮的点击事件，并在事件处理函数中执行相应的逻辑;9.5uni-app的内置组件（媒体组件）uni.chooseImage(OBJECT)，从本地相册选择图片或使用相机拍照。常OBJECT参数说明(更多参数可查阅官方文档)：参数名类型必填说明countNumber否最多可以选择的图片张数，默认9sizeTypeArray<String>否original原图，compressed压缩图，默认二者都有extensionArray<String>否根据文件拓展名过滤，默认不过滤。sourceTypeArray<String>否album从相册选图，camera使用相机，默认都有。cropObject否图像裁剪参数，设置后sizeType失效successFunction是成功则返回图片的本地文件路径列表tempFilePathsfailFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）9.5uni-app的内置组件（媒体组件）uni.chooseFile(OBJECT)，从本地选择文件。常OBJECT参数说明(更多参数可查阅官方文档)：参数名类型必填说明countNumber否默认值100，最多可以选择的文件数量typeString否默认值'all'，所选的文件的类型extensionArray<String>否根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。sourceTypeArray<String>否默认值['album','camera']，album从相册选图，camera使用相机，默认都有（仅在type为image或video时可用）。successFunction是成功则返回图片的本地文件路径列表tempFilePathsfailFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）9.5uni-app的内置组件（媒体组件）uni.chooseVideo(OBJECT)，拍摄视频或从手机相册中选视频，返回视频的临时文件路径。常OBJECT参数说明(更多参数可查阅官方文档)：参数名类型必填说明sourceTypeArray<String>否album从相册选视频，camera使用相机拍摄，默认为：['album','camera']extensionArray<String>否根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。compressedBoolean否是否压缩所选的视频源文件，默认值为true，需要压缩。maxDurationNumber否拍摄视频最长拍摄时间，单位秒。最长支持60秒。cameraString否'front'、'back'，默认'back'success/failFunction否接口调用成功/失败的回调函数。completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）9.6uni-appAPI（网络API）uni.request(OBJECT)，于发起网络请求的API，类似于原生JavaScript中的XMLHttpRequest。OBJECT

常用参数说明（更多参数可查阅官方文档）：参数名类型必填默认值说明urlString是-开发者服务器接口地址dataObj/String/ArrayBuffer否-请求的参数App3.3.7以下不支持ArrayBuffer类型headerObject否-设置请求的header，header中不能设置ReferermethodString否GET有效值详见下方说明timeoutNumber否60000超时时间，单位ms9.6uni-appAPI（网络API）OBJECT

常用参数说明（续表）：参数名类型必填默认值说明dataTypeString否json如果设为json，会对返回的数据进行一次JSON.parseresponseTypeString否text设置响应的数据类型。合法值：text、arraybufferdeferBoolean否false控制当前请求是否延时至首屏内容渲染后发送successFunction否收到开发者服务器成功返回的回调函数fa