uni-app框架介绍及环境配置

学习目标

• 了解uni-app的发展背景

• 掌握uni-app开发配置

• 掌握uni-app项目目录及功能

• 掌握uni-app应用如何运行在不同平台

• 掌握uni-app如何打包

• 了解unni-app应用如何发布

1.1 uni-app的发展历程

uni-app是什么？可以用来做什么？

• uni，读作youni,统一的意思。DCloud(数字天堂（北京）网络技术有限公司)基于Vue，js开发的前端应用框架，开发者写一套代码，就能发布到iOS，Android,h5,以及各种小程序平台。

uni-app的由来

• 2012年，DCloud开始研发小程序技术，优化webview的功能和性能，并加入w3c和HTMl5中国产业联盟，推出了HBuilder开发工具，为后续产业化做准备
• 2015年，Dcloud正式商用了自己的小程序，产品名为“流应用”，它不是B/S模式的轻应用，而是能接近原生功能、性能的动态APP，并且即点即用。为将该技术发扬光大，DCloud将技术标准捐献给工信部旗下的HTML5中国产业联盟，并推进各家流量巨头接入该标准，开展小程序业务。
• 360手机助手率先接入
• 大众点评，携程，京东，有道词典，唯品会
• 2015年9月，DCloud推进微信团队开展小程序业务，演示了流应用的秒开应用、扫码获取应用、分享链接获取应用等众多场景案例，以及分享了webview体验优化的经验。
• 2016年微信初决定上线小程序业务，但其没有接入联盟标准，而是订制了自己的标准。
• DCloud持续在业内普及小程序理念，推进各大流量巨头，包括手机厂商，陆续上线类似小程序/快应用等业务。
• 部分公司接入了联盟标准，更多公司因利益纷争严重，标准难以统一。
• 造成混乱的局面非DCloud所愿，他们决定开发一个免费开源的框架。
• 既然各巨头无法在标准上达成一致，那么就通过这个框架为开发者抹平各平台差异。
• 所以uni-app诞生了

1.2 uni-app开发环境配置

1.2.1 HBuildX的介绍

HBuildX也是DCloud开发的一款编辑器，和uni-app是同一个公司开发的。可想而知，HBuildX对uni-appa支持程度极高，因此我们也就选用HbuildX作为uni-app开发的主编辑器。

1.2.2 安装HbuildX

• 官网下载：https://www.dcloud.io/hbuilderx.html 选择APP开发版
• 解压后即可使用
• 安装插件：工具=>插件安装（uni-app(vue2)编译、uni-app(vue3)编译、scss/sass编译）

1.2.3 创建第一个uni-app

• 启动HbuildX，文件=>新建=>项目=>选择uni-app=>填写项目名，项目路径=>选择项目模板：uni-ui项目=>点击创建

• 项目结构

  |-- components				uni-app组件目录
  |-- pages					页面目录
  |-- static					存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
  |-- main.js 				Vue入口文件
  |-- App.vue					应用全局配置文件
  |-- manifest.json 			配置应用名，打包版本，appid,logo等打包信息的配置文件
  |-- pages.json 				配置路由，导航条，选项卡等页面信息文件
  |-- index.html 				适配vue3
  |-- uni.scss 				uni-app内置的常用样式变量 
  

1.2.4 运行

运行到浏览器

• 运行到chrome浏览器：进入到uni-app=>运行=>运行到浏览器=>运行到chrome浏览器
• 运行到内置浏览器：安装“内置浏览器插件”=>运行=>运行到内置浏览器

运行到微信小程序

• 安装微信开发者工具，地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
• 打开服务端口：启动微信开发者工具，点击设置图标=>安全=>打开服务端口
• 配置微信小程序路径：打开HbuildX，点击运行=>运行到小程序模拟器=>运行设置=>找到小程序运行配置下的微信开发者工具路径进行配置
• 运行：打开HbuildX，进入项目，点击运行=>运行到小程序模拟器=>微信开发者工具=>微信小程序会自动打开并运行项目

运行到安卓手机

• 将手机通过数据线连接到计算机
• 将手机设置为USB调试模式，不同型号手机设置方式不同，大家可以去搜索一下
• 运行：打开HBuildX，进入项目，单击运行=>运行到手机或模拟器=>运行-设备:Android-*****
• 运行后，手机会安装HBuilder应用，安装完成后，就可以预览了。

运行到苹果手机

• Windows电脑连接苹果手机，要先安装iTunes，地址：https://support.apple.com/downloads/itunes
• 将手机用数据线连接到电脑=>选择“信任“。
• 打开HBuildX，进入项目，单击运行=>手机运行=>选择iphone设备，等待编译完成，就可以预览了。

1.3 uni-app打包

我们将使用HBuildX的云打包功能生成安装包，并且将生成的安装包发布至公网，供用户下载安装。

1.3.1 打包

• 打开HBuildX，单击发行=>原生App=>云打包
• 登录HBuilder账号，并完成实名认证，实名认证地址:https://dev.dcloud.net.cn/user/profile
• 配置打包选项，使用公共测试证书
• 使用安心打包，会提示安装插件，点击安装。
• 安装完成后，点击打包，等待打包完成。
• 打包完成后，控制台会返回安装包目录，进入目录就能看到安装包了，将安装包发送至手机，就可安装使用了。

1.3.2 发布

生成下载二维码

打包完成后，点击[一键上传到uniCloud（免费cdn、长期稳定）]，新建阿里云服务空间，创建完成后，选择服务空间，就可进行上传。上传完成后，通过二维码生成器，将下载链接生成二维码，即可分享给朋友进行下载。

二维码生成器：https://cli.im/

发布到各大应用平台

由于每个平台发布规则都不太相同，这里就不为大家一一介绍了，这有篇文章说的很详细，大家有需要可以查阅一下。https://zhuanlan.zhihu.com/p/148957563