本篇文章给大家谈谈uniapp项目模板，以及uniapp 模版对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、uniapp搭建
• 2、二、uni-app模板块常用写法以及注意事项
• 3、五子棋（1）——uniapp 小程序项目搭建
• 4、uni-app 入门到精通 （二）
• 5、uniappvue3vue2性能
• 6、新手怎么用uniapp制作图中小程序的样式？

uniapp搭建

1.uniapp搭建首选项是通过hbuildx去新建项目

2.如果新手可以先选择hello uni-app这个模板，里面涵盖了uniapp里的各种组件、API和框架的介绍，能够让你更快速的对uniapp有一个视觉上的认知。如果你想直接开发不需要框架里的多余文件，那你可以选择默认模板，这模板是精简版的只有几个简单的目录，当然你也可以选择uni-template或者其他模板，根据自己需要自己创建。下面是两种模板的对比

3.创建完成后就可以点击hbuilder的运行来启动项目了。

二、uni-app模板块常用写法以及注意事项

v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

第一个参数 item 则是被迭代的数组元素的别名。

第二个参数，即当前项的索引 index ，是可选的。

结果

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

显示效果

此时把Y的 switch 进行打开，显示效果

随后更改数据源为 datList2 ，显示效果为

此时发现本来是Y打开，顶部新增一个元素后变成是X打开，这就是所谓的就地更新每个元素，每个索引位置进行正确渲染，而 switch 是没有被重新渲染的（因为数据源没有控制 switch 开关状态的保存），所以显示的位置就不对了。

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容， switch 的选中状态），需要使用 :key 来指定列表中项目的唯一的标识符。

重复如上操作，显示为正确

如不提供 :key ，会报一个 warning ， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

#注意# 当同一个页面同时存在两个或两个以上的 v-for 遍历的时候， key 值不能重复否则 H5 报错

五子棋（1）——uniapp 小程序项目搭建

1.HbuilderX创建项目，选择uni-app，选择默认模板1.HbuilderX创建项目，选择uni-app，选择默认模板

2.配置appId

3.vuex

uni-app 内置了 vuex。但是需要结合第三方来一起协作。默认的模板项目首先是没有node-modules模块依赖的，首先需要初始化webpack，然后建store文件夹，在main.js中引入

4.创建自己习惯的目录结构

5.配置微信开发者工具路径

点击 运行 - 运行到小程序模拟器 - 微信开发者工具

uni-app 入门到精通 （二）

18 年时候有幸接触到 uniapp , 写了一篇 《uni-app 入门到精通》 ，由于一些原因，该方案并没有执行，该项目一系列文章也就没有再写下去，所以遭受到了许多人评论的吐槽，到如今公司项目的需求又要根据 uniapp 写 H5 嵌入到 app 中，所以想根据项目实际开发分享一下，有兴趣的伙伴可以参考和吐槽。

这一篇文章主要分享一下内容

uniapp 模板项目有两种初始化方式

由于无法舍弃 VSCode ，我们采用 vue-cli 来初始化项目， HBuilderX 大家可以参照官方文档

这种方式是可以通过 vue 脚手架命令指定模板，这个是 dcloudio 的官方提供模板

我们选择默认模板即可，

成功后我们执行

打开浏览器地址，直接运行即可。

一般刚接触前端的小伙伴可能会对 postcss 不太了解，这里简单介绍一下，

当然 PostCSS 具体使用是需要引入一些插件的，例如常用的是 autoprefixer postcss-preset-env 等, 具体如何使用大家可以自行参考资料，毕竟这块知识还是挺多的就不具体展开解释了。

通常我们在写移动端时候需要做的是页面适配方案的确定， uni-app 支持的通用 css 单位包括 px、rpx ， 之前的 upx 方案已经被废弃掉，官方解释是目前市面上已经基本上支持了微信的 rpx 方案，所以 upx 中转方案已经意义不大了，不过还可以继续使用，不过已经不再推荐。

rpx 之初是由微信小程序提出一种方案，即根据宽度来进行适配以 750 宽屏幕为基准， 750rpx 恰好为屏幕宽度, uni-app 规定屏幕基准宽度 750rpx 。所以说如果你们的UI 设计以 750*1334 iphone 6/6s 为基准设计的话，你只需要将屏幕上 px 写为 rpx 即可，不用做任何换算，如果不是的话，你就需要做如下换算：

uniapp 有自己一套路由管理机制，而未采用 vue-route 方案，个人认为这套方案还是比较成熟和好用的，以及可以满足我们日常的需求:

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

2.uni.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

3.uni.reLaunch(OBJECT)

关闭所有页面，打开到应用内的某个页面。

注意： 如果调用了 uni.preloadPage(OBJECT)) 不会关闭，仅触发生命周期 onHide

4.uni.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

注意： 如果调用了 uni.preloadPage(OBJECT)不会关闭，仅触发生命周期 onHide

5.uni.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

5.uni.preloadPage(OBJECT)

预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。

以上路由API 已经满足我们的需求，当然进行路由跳转的前提是我们需要在 pages.json 进行路由配置, 包括路由和具体的样式配置

而进行具体路由跳转我们需要如下，需要多加一个 /

需要特别注意的一点是, 利用浏览器 在 进行 移动H5页面调试时候，会出现页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。

uniapp 提供网络请求的 api 是 uni.request ，具体支持的请求方法可以参考官网 method 有效值

不过我们通常不会直接使用，而是进过一系列的封装以方便我们的使用，具体封装接口使用会在随根据页面数据请求一并展示。

uniappvue3vue2性能

新版 uni-app 框架主要做了三大改进：

重写框架内核：基于vue3 + ts重写内置组件和API，实现更彻底、更高效的tree-shaking；

新增支持 Vite 构建工具，在H5平台实现秒开预览；

新增支持 Vue3.x，实现更灵活的开发方式，及更高的运行性能；

基于这三大改进，uni-app项目获得了多快好省四大收益：

更多的语法支持，支持组合式API，业务聚焦，开发效率更高；

更快的编译速度，H5平台十倍加速，小程序、App加速30%以上；

更好的运行性能，用户端响应更快，体验更好；

更小的代码体积，瘦身30%以上，更省体积、更省流量

更多的语法支持

新版uni-app支持Vue 3.x框架，支持组合式API，可实现更聚焦的业务开发。

Vue 3.x的一些新增特性，uni-app也已经完全支持，如：

支持script setup

支持style scoped、style module、State-Driven Dynamic CSS(v-bind)

支持jsx、tsx（h5,app 平台支持，小程序不支持）

另外，在小程序平台，新版uni-app也扩展了更多的语法，如：

更完善的模板语法支持（如 class、style 支持函数、变量等，不再局限数组、对象类型）

更完整的 props 支持（如传递函数）

更完善的 slot 支持（如作用域插槽）

更快的编译速度

开发者日常工作中，最无聊的就是等待编译构建。

某乎上还有一个”程序员在等待编译的时候都做什么？“的讨论帖，可见编译时间对开发者而言，是一个多么尴尬无聊的碎片时间。

uni-app本次升级vue3 Vite后，在编译时间上有多少改进？带给开发者多少福利？我们安排真实测试，以数据说话。

测试环境说明：

硬件：RedmiBook 14 二代

处理器：Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz

内存：16.0 GB

操作系统：Windows 11 专业版 64 位操作系统

关于编译速度，我们做了两个维度的对比：

纵向对比：挑选uni-app常用项目模板，在H5、小程序、App平台，分别测试vue 2.6和vue 3.x的编译时间

横向对比：使用业内优秀的其它跨端框架，创建默认项目模板，记录其编译时间，和uni-app的vue 3.x版本进行对比

uni-app 历史版本纵向对比

我们选择uni-app默认模板、uni-starter、hello-uniapp三个项目模板，分别测试vue 2.6和vue 3.x的编译时间。

uni-app项目编译时间的采集方式：

vue 2.6版本编译时间 = webpack 的 stats.endTime - stats.startTime

vue 3.x版本编译时间 = 构建工具入口处记录 global.vite_start_time = performance.now()，构建工具编译完成时：performance.now() - global.vite_start_time

H5平台

对uni-app的三个项目模板分别运行到H5平台，进行多次编译测试，并求其均值后，获得如下数据：



由此，我们可以观察到：

在vue 2.6环境下，随着项目复杂度的提升，H5首页预览所需编译时间会直线增加；这是因为在vue 2.6版本下，虽然仅预览首页，但依然会使用 webpack 编译整个项目资源；故项目越复杂，编译时间越长；

在vue 3.x环境下，H5首页预览的编译时间跟项目复杂度也有关系，但增幅不大；这是因为在vue 3.x版本下，使用 Vite 进行构建，预览首页时仅编译首页及首页所依赖资源，不会编译其它页面资源。

通过图表对比，我们可以直观得出结论：vue 3.x环境下的首页编译时间，平均不到vue 2.6环境下的十分之一。

换言之，vue 3.x版本下的首页编译速度，相比vue 2.6版本，有十倍效率提升。

这个十倍效率提升，主要得益于新版采用Vite作为构建工具，由此带来了两大好处：

使用原生 ESM 文件，无需打包，实现极速的服务启动；

预览（运行）使用esbuild作为打包工具，相比vue 2.6环境下的webpack，构建速度快 10-100 倍（这不是我们夸大，详见esbuild）

本着这个十倍效率提升，小伙伴们还不赶紧上手试试？

小程序平台

对uni-app的三个模板项目运行到小程序平台，多次编译测试，并求其均值后，获得如下数据：



从上图对比数据来看，我们可以得出结论：小程序平台，vue 3.x版本下的运行编译，相比vue 2.6版本，编译性能至少提升30%；且项目越复杂，编译性能提升越明显，可以达到40% ~ 50%。

App平台

对uni-app的三个项目模板继续运行到App平台，多次编译测试，并求其均值后，获得如下数据：



从上图对比数据来看，我们可以得出结论：App平台，vue 3.x版本下的运行编译，相比vue 2.6版本，编译性能提升将近50%。

虽没有H5平台的十倍效率提升那么刺激，但将近50%的速度提升，经常开发小程序/App的小伙伴，还不心动？

业内优秀框架横向对比

除了采用不同版本的uni-app进行纵向对比外，我们还使用业内优秀的跨端框架Taro，创建空的项目模板，进行横向对比测试。

具体测试方案：

安装Taro的最新cli，本文测试时使用的版本为"@Tarojs/Taro": "3.3.16"

使用Taro init命令，分别选择react、vue、vue3框架，创建三个默认项目模板，三个项目名称分别为taro3-react、taro3-vue、taro3-vue3，如下图：



使用npm run dev:h5，运行到H5平台进行预览，记录每次预览编译时间，重复执行，求其均值

关于Taro编译时间的计算方案：

开发一个Taro扩展插件，插件规范参考Taro官网 - 插件功能

在ctx.onBuildStart中记录开始编译时间

在ctx.onBuildFinish中记录编译结束时间

两者的时间差，即为编译过程消耗时间

然后使用uni-app的cli命令行，创建基于vue3.x的空项目模板，项目命名为uni-app-vue3。

我们使用各自框架的命令行，将如上创建的5个项目分别编译到H5平台和小程序平台，多次测试，并求其均值。

同框架版本在H5平台上的编译时间，结果如下：



从图中可以看出，uni-app的vue3版本，在H5平台上的首页编译预览性能是遥遥领先的。这个遥遥有多远呢？这么讲吧，你都编译20次了，友商第一次还没完呢。

继续编译到小程序平台，多次测试，求其均值，结果如下：



从图中可以看出，uni-app的vue3版本，在小程序平台上的编译性能也是遥遥领先的，这个遥遥也不近。

更好的运行速度

开发环节编译快了，那面向最终用户的软件，运行性能怎么样？

我们进入性能测试章节。

测试方案：

开发内容：开发一个仿微博小程序首页的复杂长列表，支持下拉刷新、上拉翻页、点赞。

界面如下：



测试机型：小米 Mi 10 pro、MIUI 12.5 (21.11.3 开发版) 、微信版本 8.0.16

准备工作：每次开始测试前，杀掉各App进程、清空内存，保证测试机环境基本一致；每次从本地读取静态数据，屏蔽网络差异。

评测点：长列表中的某个组件，比如点赞组件，点击时是否能及时的修改未赞和已赞状态？

测试计时方式：

选中某微博，点击“点赞”按钮，实现点赞状态状态切换（已赞高亮、未赞灰色），

点赞按钮 onclick函数开头开始计时，setData回调函数开头结束计时；

在小米手机上进行多次测试，求其平均值，结果如下：

记录条数 200 400 600 800 1000

vue2 30ms 43ms 56ms 72ms 90ms

vue3 8ms 9ms 9ms 8ms 9ms

从表格中可以看出：

随着页面记录的增加，vue 2.6版本的uni-app项目，点赞组件响应时间快速增加，响应越来越慢；

基于vue 3.x的uni-app项目，点赞组件的响应时间跟页面条数无关，一直保持极高的响应灵敏度，性能体验远高于vue 2.6版本。

从这个常见的长列表组件响应实验来看，vue 3.x的性能体验要远高于vue 2.6版本。

更小的代码体积

项目发行后的代码体积，是一个很重要的考量指标：

H5平台：更小的代码体积，可以帮助开发者节省服务端带宽及CDN流量，可实现更快的资源加载及页面渲染；

小程序平台：更小的代码体积，可加速小程序包的下载（甚至可能免了分包加载的繁琐），帮助用户更快进入小程序业务界面；

App平台：更小的代码体积，可实现更快的App启动，帮助用户更快进入App首页

为了测试vue 3.x新版升级后，代码体积的变化，我们同样做了两个维度的测试：

纵向对比：选择uni-app常用项目模板，在H5、小程序、App平台，分别测试vue 2.6和vue 3.x的编译包大小

横向对比：使用业内优秀的其它跨端框架，创建默认项目模板，记录其编译后的包体积大小，和uni-app版本进行对比

Tips：

开发阶段重在编译速度，对应npm run dev操作

发行阶段重在编译包大小，对应npm run build操作

uni-app 不同版本纵向对比

我们复用之前创建的uni-app默认模板、uni-starter、hello-uniapp三个项目模板，分别测试vue 2.6和vue 3.x的编译包体积。

uni-app项目编译包体积的采集方式：编译到对应平台后，记录编译后文件夹的大小。

H5平台

H5平台编译后代码体积记录如下：



从统计结果来看，uni-app的vue3.x版本，在H5平台上的编译包体积至少瘦身30%以上。

H5平台的瘦身优化，主要得益于uni-app框架的底层全面重构，实现了更彻底的摇树优化。

小程序平台

小程序平台编译后代码体积记录如下：



从统计结果来看，uni-app的vue3.x版本，在小程序平台上也有大幅瘦身。

新手怎么用uniapp制作图中小程序的样式？

很多新手在开始制作小程序的时候都想快速做一个功能看起来不错的小程序，那么怎么做呢？下面小编给大家分享一下。

方法/步骤

首先大家要下载按照Hbuilder软件，点击新建下面的项目

接着项目类型里面选择uni-app，然后选择一个模板，如下图所示

然后就创建好了项目的目录，如下图所示

接着打开Hbuilder的设置界面，配置小程序开发工具的路径，如下图所示

然后打开小程序开发工具，选择安全设置

接着开启服务端口，如下图所示

接下来我们点击Hbuilder的运行菜单，选择运行到小程序模拟器的微信开发者工具上，如下图所示

最后就可以看到一个小程序就快速制作完成了，如下图所示

uniapp项目模板的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于uniapp 模版、uniapp项目模板的信息别忘了在本站进行查找喔。