第一章：uni-app框架介绍及环境配置

学习目标

了解uni-app的发展背景
掌握uni-app开发环境配置
掌握uni-app项目目录结构及功能
掌握uni-app应用如何运行在不同平台
掌握uni-app如何打包
了解uni-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诞生了

这是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

uni-app框架介绍及环境配置相关推荐

【uni-app框架介绍及环境配置】
uni-app框架介绍及环境配置 1.1 uni-app的发展历程 uni-app是什么?可以用来做什么? uni,读作youni,统一的意思.DCloud(数字天堂(北京)网络技术有限公司)基于Vu ...
windows下rpc框架thrift的环境配置
windows下rpc框架thrift的环境配置引用链接: https://www.cnblogs.com/49er/p/7193829.html 最近在弄windows下的Facebook的rp ...
C语言入门系列一之C语言介绍、环境配置和运行执行
鉴于书本和教材文字过多.又难懂的缺点,所以我打算写一系列通俗移动的C语言入门教程,让大家在短时间内学习和掌握C语言,以及遇到C语言的一些问题该如何得到快速的解决.希望这些系列的教程,能够帮助到大家!该 ...
Node介绍及环境配置~超级详细哦
下面是对Node介绍及环境配置的详细整理,希望可以帮助到有需要的小伙伴~ 文章目录 Node开发概述学服务器开发的原因服务端开发要做的事情为什么选Node Node是什么 Node运行环境搭建 ...
第一个安卓app应用的开发--环境配置和第一项目创建
现在,手机可以说很普遍了,大街上,地铁上随处都可以看到低头刷手机的人.如果他们用的是安卓手机的话,那他们现在用的就是安卓app应用. 那要开发一个app需要什么呢? 配置环境给你的电脑安装Andr ...
sass详细知识点介绍（环境配置）
相关介绍一.CSS预处理器出现的原因无法嵌套书写导致代码繁重.冗杂.逻辑混乱. 没有变量和样式复用机制,属性值只能以字面量的形式重复输出. # 总结:代码复用性低:不易于维护 # 注:现在,现在的 ...
eclipse介绍，环境配置，mysql安装
J2EE 前言:时隔一个月没有发表博文了,jsp之后的文章后面再做补充,今天博文内容是J2EE基础之开发环境,我也会新建一个J2EE专栏,欢迎大家订阅支持. 目标:J2EE基础最后的一个学习结果是使用 ...
【我的第一个目标检测课题】1、课题介绍及环境配置（Windows+Keras+GPU）
我的第一篇CSDN博客来了. 新手驾到,多多指教. 2020.12.28晚记写在前面今天验收完图像处理课程的结课课题--建筑材料识别课题了.晚上决定趁热打铁,记录一下完成这次课题的全过程,还有一点 ...
人工智能入门：第一章人工智能课程介绍及环境配置
学习内容今天主要介绍人工智能,让大家对人工智能有个很好的认识.并做好环境配置,为后面的人工智能学习做准备. 关键词人工智能,监督式,非监督式,强化学习,迁移学习,机器学习,深度学习,python, ...

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

第一章：uni-app框架介绍及环境配置

学习目标

1.1 uni-app的发展历程

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

uni-app的由来

1.2 uni-app开发环境配置

1.2.1 HBuildX的介绍

1.2.2 安装HbuildX

1.2.3 创建第一个uni-app

1.2.4 运行

运行到浏览器

运行到微信小程序

运行到安卓手机

运行到苹果手机

1.3 uni-app打包

1.3.1 打包

1.3.2 发布

生成下载二维码

发布到各大应用平台

uni-app框架介绍及环境配置相关推荐

最新文章

热门文章