uni-app移动应用开发课件 1-初识uni-app

移动应用

开发UniApp初始uni-app第

一

章学习目标

知识目标1.了解uni-app的发展历程2.熟悉uni-app项目的开发工具3.掌握uni-app项目搭建4.熟悉uni-app项目的目录结构

能力目标1.能够熟练使用HBuilderX开发工具2.能够创建并运行uni-app项目3.能够熟悉uni-app项目目录结构4.能够实现uni-app项目打包

素质目标1.具有良好的软件编码规范素养2.培养学生技能报国的爱国主义情怀、精益求精的工匠精神3.激发学生对本课程学习的兴趣目录CONTENTS第一个uni-app应用uni-app打包uni-app发展历程123案例：示例代码4uni-app发展历程第

一

节Dcloud：行业开创者2012年：研发小程序技术，优化webview功能和性能，推出HBuilder开发工具。2015年：正式商用自己的小程序，产品名为“流应用”。2015年9月：推进微信团队开展小程序业务，分享webview体验优化的经验。2016年初：上线小程序业务。1.1.1uni-app的由来360手机助手小程序经过多年积累，截至2021年3月，DCloud已拥有900多万开发者；1DCloud一直都有小程序的iOS、Android引擎，因此uni-app的App端和小程序端保持高度一致；2DCloud在引擎上的持续投入，所以uni-app的App端功能、性能比大多数小程序引擎都优秀；3DCloud对各平台小程序太了解了，因此uni-app能成为抹平各端差异的跨端框架。4uni-app成功的因素1.1.1uni-app的由来1.1.2uni-app的特点1.平台能力不受限3.性能体验优秀5.学习及开发成本低2.一套代码运行到多个平台4.周边生态丰富第1个uni-app应用第

二

节vscode、HBuilderX、webstorm、sublimetext前端界主流开发工具1.2.1uni-app开发工具uni-app的开发工具1.2.1uni-app开发工具HBuilderX编辑的特点采用C++的架构，性能远超Java或Electron架构绿色发行包只有10MB，很轻巧对vue做了大量优化投入，开发体验远超其他开发工具可新建小程序等项目唯一一个新建文件默认类型是markdown的编辑器界面比其他工具更清爽简洁现代js开发中大量json结构的写法，提供了比其他工具更高效的操作支持java、nodejs插件，并兼容了很多vscode的插件及代码块。1.2.2新建项目创建项目的实现步骤选择【文件】-【新建】-【项目】选项在弹出的【新建项目】对话框中选择【uni-app】类型，输入项目名称，并单击【浏览】按钮，选择项目存放地址；选择相应uni-app项目模板，点击创建1.2.3项目目录结构uni-ui项目目录结构Hellouni-app项目目录结构1.2.3项目目录结构文件（夹）名称作用common存放公共js和css的文件夹components存放组件的文件夹pages存放所有页面的文件夹static存放静态资源的文件夹platforms存放各平台专用页面的文件夹unpackage打包目录，新建项目是没有的App.vue项目的全局配置文件，用来配置App全局样式以及监听应用生命周期main.js是项目的初始化入口文件manifest.json应用配置文件，用于配置应用名称、appid、logo、版本等打包信息pages.json全局配置文件，用于配置页面路由、导航条、选项卡等页面类信息uni.scssuni-app的样式包，整体控制应用的风格主要的文件（夹）目录结构1.2.3项目目录结构跨平台支持组件存放目录AppwxcomponentsH5wxcomponents微信小程序wxcomponents支付宝小程序mycomponents百度小程序swancomponents字节跳动小程序ttcomponentsQQ小程序wxcomponents跨平台自定义组件存放目录1.2.4运行项目浏览器运行1运行到浏览器浏览器中运行效果1.2.4运行项目真机运行2运行到真机1.2.4运行项目在微信开发者工具里运行3运行到微信开发者工具1.2.4运行项目说明：运行到“微信小程序模拟器”“微信开发者工具”必须搭建微信小程序环境。在“微信公众平台”上申请小程序账号下载安装“微信开发者工具”1.2.4运行项目微信小程序注册页面申请一个小程序帐号小程序管理平台开发设置1.2.4运行项目微信开发者工具下载下载安装微信开发者工具1.2.4运行项目微信开发者工具界面配置微信开发者工具微信开发者工具安全设置uni-app打包第

三

节1.3.1打包原生App（云端）设置打包选项配置微信开发者工具打包日志打包成功提示1.3.2打包原生App（本地）原生App-本地打包配置微信开发者工具1.3.3发布为H5manifest.json可视化界面配置微信开发者工具发行为H5操作1.3.3发布为H5申请小程序帐号并获取AppID：在HBuilderX中选择【发行】-【小程序-微信（仅适用于uni-app）】选项，在弹出的微信小程序发行对话框中对应的文本框内输入小程序名称和AppID，单击【发行】按钮，即可在工程目录unpackage/dist/build/mp-weixin中生成微信小程序项目代码。在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照“提交审核”“发布”小程序标准流程，逐步操作即可。如在发行界面勾选了自动上传微信平台，则无需再打开微信工具手动操作，将直接上传到微信服务器提交审核。实验步骤案例：示例代码第

四

节制作步骤：1.新建项目。选择【uni-app】-【hellouni-app】

2.熟悉项目目录结构，并将项目运行在浏览器、真机、微信小程序，并通过云打包生成.apk文件uni-app成功的因素本章小结

主要讲解uni-app的发展历程，uni-app项目的开发环境、目录结构、项目新建、项目运行、项目打包等内容。学习并掌握uni-app项目的基本搭建。