uniapp入门须知

type

status

date

slug

summary

一、简介

什么是uni-app？

uni-app 是由Dcloud公司开发的一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app功能框架图

特征：一套代码，多端运行

原生和uniapp对比&选择

更多专业性的区别比较，建议大家看一下官方推荐的这篇文章：vue和微信小程序的区别、比较

uni-app有什么？

1 UI组件库

uni-ui地址：https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html

uView地址：https://www.uviewui.com

2 插件市场

DCloud插件市场：https://ext.dcloud.net.cn

白话uni-app

1 网络模型的变化

以前网页大多是b/s，服务端代码混合在页面里；

现在是c/s，前后端分离，通过js api(类似ajax的uni.request)获取json数据，把数据绑定在界面上渲染。

2 文件类型变化

以前是.html文件，开发也是html，运行也是html。现在是.vue文件，开发是vue，经过编译后，运行时已经变成了js文件。现代前端开发，很少直接使用HTML，基本都是开发、编译、运行。所以uni-app有编译器、运行时的概念。

3 文件内代码架构的变化

以前一个html大节点，里面有script和style节点；

现在。这个叫vue单文件组件规范sfc。

现在template是一级节点，用于写tag组件，script和style是并列的一级节点，也就是有3个一级节点。

4 外部文件引用方式变化

以前通过script src、link href引入外部的js和css；

现在是es6的写法，import引入外部的js模块(注意不是文件)或css

以前

现在

js要require进来，变成了对象。

在hello uni-app的common目录有一个工具类util.js，可以在hello uni-app中搜索这个例子查看。

而在这个util.js里，要把之前的function封装为对象的方法

5 css外部文件导入

全局样式，在根目录下的app.vue里写入，每个页面都会加载app.vue里的样式。

另外，vue支持组件导入，可以更方便的封装一个包括界面、js、样式的库。

如需要全局导入vue组件，即每个页面都可以直接使用而不用引用和注册的话，在项目根目录下的main.js里处理。如下是hello uni-app里的例子。

uni-app推荐使用flex布局，这个布局思路和传统流式布局有点区别。但flex的特色在于，不管是什么技术都支持这种排版，web、小程序/快应用、weex/rn、原生的iOS、Android开发，全都支持flex。

6 easycom

easycom是Uniapp框架提供的一种组件自动注册机制，它可以自动扫描指定目录下的所有组件，并注册到全局组件中。这意味着我们无需手动在components中引入组件，也无需在每个页面中单独引入组件，只需要在组件的目录下创建一个index.vue文件，就可以自动注册组件并在全局中使用了。

使用easycom非常简单，只需要在项目根目录下的pages.json中配置easycom属性即可。例如：

更多内容可见该文章：uniapp中easycom用法详解

7 js的变化

js的变化，分为运行环境变化、数据绑定模式变化、api变化3部分。

运行环境从浏览器变成v8引擎

标准js语法和api都支持，比如if、for、settimeout、indexOf等。

但浏览器专用的window、document、navigator、location对象，包括cookie等存储，只有在浏览器中才有，app和小程序都不支持。

以前的dom操作，改成vue的MVVM模式

现在前端趋势是去dom化，改用mvvm模式，更简洁的写法，大幅减少代码行数，同时差量渲染性能更好。

uni-app使用vue的数据绑定方式解决js和dom界面交互的问题。

如果你想改变某个dom元素的显示内容，比如一个view的显示文字：

以前是给view设id，然后js里通过选择器获取dom元素，进一步通过js进行赋值操作，修改dom元素的属性或值。

现在的做法，是vue的绑定模式，给这个dom元素绑定一个js变量，在script中修改js变量的值，dom会自动变化，页面会自动更新渲染。

在高级用法里，vue支持给组件设ref（引用标记），这类似于之前html中给一个dom元素设id，然后在js中也可以用this.$refs.xxx来获取。如下：

二、环境准备

创建uniapp项目

点击新建 ——> 项目，然后按照下图所示新建一个项目。

这里我们使用HBuilderX可视化界面进行创建，当然用户也可以选择使用vue-cli命令行来创建项目。

认识界面

项目结构

static：静态资源目录，例如图片、Icon等。

unpackage：就是打包目录，在这里有各个平台的打包文件。

App.vue：是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

main.js：是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。

manifest.json ：文件是应用的配置文件，用于指定应用的名称、图标、权限等。

pages.json ：文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

uni.scss：文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

其他常用配置

manifest.json:微信小程序运行、版本控制

微信小程序：启动失败

定位功能

更多内容，待后续不断补充……

多端运行

1.H5网页

两种方式都可选择，但是内置的肯定看起来更加方便哈哈哈哈。

2.MP小程序

01 打开开发工具的服务端口

02 配置微信开发者工具的地址

网上很多都说要配置这个，但是截止到我写的时候，只需要安装好这个应用，然后在电脑的path中添加路径即可。不需要配置也可以正常使用

03 manifest.json中配置小程序id

（同2 我并未进行配置也跑起来了）

04 直接选择运行到微信开发者工具即可

3.APP

01 打开模拟器或者手机

02 配置模拟器的端口

各模拟器端口号：

夜神模拟器端口号：62001
海马模拟器端口号：26944
逍遥模拟器端口号：21503
MuMu模拟器端口号：7555
天天模拟器端口号：6555

03 运行到模拟器即可

（由于本人未进行这个运行配置，故此处只进行步骤概述）

打包发布

1.H5网页

h5版本的打包应该是最简单的，发布也可以按网页部署方式来，如果想用微信打开网页，最好将h5部署在外网域名所在的服务器上。

2.MP小程序

分包

上传代码

提交审核

3.APP

app打包流程比较简单，分为安卓和苹果两大平台。一般app上线都应该走云打包流程，选择发行-->原生App云打包，弹出这个对话框。

这个是安卓包，如果不需要上市场上的应用平台，就可以选择公共测试证书的打包方式。

这是苹果版本的打包，苹果打包后要上线，只有上线appstore一条路，证书相关的三个文件都不能少。

点击打包之后，进入云打包队列排队等待，成功之后会给出下载地址：

安卓版本是可以直接安装使用的，你可以放在生产环境服务器上供用户下载。如果是苹果版本，打包后的ipa文件不能直接使用，还要提交到appstore审核通过，最后才能发布，这个周期大概在一周左右。

app热更新

在app上线之后，后面的版本升级就可以用热更新方式更新了，不用每次都发布一个新的完整包。选择发行-->原生App-制作应用wgt包，弹出更新包对话框：

生成wgt后，将wgt文件放在服务器，用户在app上检测到有更新时就会下载更新包在本地热更新。

发行wgt时，manifest.json配置页面的应用版本名称与应用版本号都必须高于上一次设置的值；

检测版本是否更新，如果有更新就下载更新包、安装并重启应用，这里有个完整教程。

三、编写语言

1 配置tabBar

语法解释：

示例如下所示：

注意：底部导航栏“最多设置5个，最少设置2个”

2 globalStyle（全局样式）

用于设置应用的状态栏、导航条、标题、窗口背景色等。

以下为一个修改示例：

注意：如果你没有修改完全成功，或者都不生效，可能是设置了页面的配置样式导致的，它会覆盖掉全局样式配置中相同属性的样式。这是因为页面配置优先级高于全局配置。我们删除掉页面配置样式即可。

关于页面的具体编写，如果时间比较紧建议直接chatgpt，还是非常好用的。本人是参照教程搭出了基本页面，最后在基本页面上通过半自己写+半AI最终实现两天速成uniapp，所以，大家加油吧！
这里不提供页面编写语法学习，因为每个人的基础不同，需要的教程详实度不同，加之作者本人并没有进行系统的学习，所以这里暂时就略过啦！
后续时间精力充足的话，会进行更细致的学习，同时补充页面代码编写的一些小小总结和心得。