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

移动应用开发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案例：示例代码4

uni-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运行项目微