信息技术进阶教程3-3-4Uni-app跨平台开发实战-样章.docxVIP

PAGE2

目录

TOC\o1-2\h\u第一章认识Uni-app 2

1.1uni-app的简介 2

1.2uni-app的特点 4

1.3uni-app学习技巧 6

第二章Uni-app开发环境搭建 7

2.1下载和安装HBuilderX 7

2.2微信开发者工具安装 10

2.3创建uni-app项目 15

2.4多端运行程序 18

2.5打包发布 21

2.6vue-cli命令行 27

《Uni-app跨平台开发实战》

认识Uni-app

uni-app的简介

Uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，就可以发布到IOS、Android、Web(响应式)、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。开发者可以使用各种IDE（集成开发环境）进行软件开发，比如sublime、WebStrom，但与HbuilderX结合使用会更便捷、完美。

很多人以为小程序是微信先推出的，其实，DCloud才是这个行业的开创者。

DCloud在2012年开始研发小程序技术，优化webview的功能和性能，并加入W3C和HTML5中国产业联盟，推出了HBUilderX开发工具，为后续产业化做准备。2015年，DCloud正式商用了自己的小程序，产品名为“流应用”，它不是B/S模式的轻应用，而是能接近原生功能、性能的App，并且几点急用，第一次使用时可以做到边下载边使用。为了将该技术发扬光大，DCloud将技术标准捐献给了工信部旗下的HTML5中国产业联盟，并推进各家流量巨头接入该彼岸准，开展小程序业务。360手机助手率先介入，在其3.4版本实现应用的秒开运行。如图1-1所示。

图1-1

随后DCloud推动大众点评、携程、京东、有道词典、唯品会等众多开发者为流应用平台提供应用。在2015年9月，DCloud推进微信团队开展小城市业务，演示了流应用的秒开应用、扫码获取应用、分享链接获取应用等众多应用场景案例，以及分享了webview体验优化的经验。微信团队经过分析，于2016年初决定上线小程序业务员，但没有接入联盟标准，而是制定了自己的标准。

DCloud持续在业内普及小程序理念，推进各大流量剧透，包括手机厂商，陆续上线类似小程序/快应用等业务。部分公司接入了联盟标准，但更多的公司因利益纷争严重，标准难以统一。技术是纯粹的，不应该因为商业利益而分裂。开发者面对如此多的四有标准不是一件正确的事情。造成混乱的局面并非DCloud所愿。于是DCloud决定开发一个免费开源的框架。通过统一的uni-app框架，为开发者抹平各个平台的差异。这就是uni-app的诞生过程。

截止2024年5月，uni-app已经是业内最风靡的应用框架，拥有800多万开发真，支撑着12亿活跃用户的庞大生态。

uni-app的特点

uni-app在开发者数量、案例数量、跨平台能力、扩展灵活性、性能体验、周边生态、学习成本、开发成本8个关键指标上拥有巨大的优势。

开发者/案例数量众多

uni-app涉及几十万应用，拥有800多万开发者，支撑着12亿活跃手机用户的庞大生态，互联网上多个社群都在讨论uni-app。

跨平台能力及扩展灵活性更强

（1）开发者编写一套代码，可以发布到iOS、Android以及各种小程序平台、快应用平台。如图1-2所示。

图SEQ图\*ARABIC1-2

在跨平台的同时，通过条件编译和平台特有API调用，可以“优雅”地为某个平台编写个性化代码，调用其专有功能而不影响其他平台。

支持原生代码混写和原生SDK集成。

性能体验优秀

体验更好的Hybrid框架，加载新页面时速度更快。

App端支持Weex原生渲染，可以支撑更流畅的用户体验。

小程序端的性能优于市场上的其他框架。

周边生态丰富

插件市场拥有数千款插件，满足各种开发需求，不需要重复造轮子。

支持NPM（Node.js）包管理器，支持小程序组件和SDK，兼容mpvue组件和项目，兼容Weex组件。

微信生态的各种SDK可以直接用于跨平台App。

学习成本低

基于通用的前端技术栈，采用Vue语法和微信小程序API，无需额外学习成本。

开发成本低

招聘、管理、测试各方面的成本都大幅下降。

HBuilderX是高效的开发“神器”，熟练掌握后研发效率至少翻倍。

uni-app的功能框架如图1-3所示。

图1-3

uni-app在跨平台过程中不牺牲平台特色，可以“优雅”的调用各个平台的专有API，真正做到了统一标准又各取特色。uni-app实现了一套代码运行到多个平台，同一套代码同时运行在iOS