uni-app 介绍及使用

火锅火锅 發表於 2023-4-17 09:10:00

<div id="content_views" class="htmledit_views">
<h2>一、什么是uni-app</h2>
<p>        <font face="monospace">uni-app</font>由dcloud公司开发的多端融合框架，是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。最大的优势一次开发，多端运行。</p>
<p>        官方学习网站uni-app官网。</p>
<h2>二、如何学习uni-app</h2>
<p>        在学习uni-app之前，建议先学习vue和小程序。uni-app技术框架为Vue语法+小程序的api，有所了解之后再使用uni-app，会更快上手。</p>
<p>        如果要开始学习，请准备：</p>
<p>        1. HBuilderx开发与编译工具;</p>
<p>        2. 微信小程序开发工具：用于微信小程序预览测试；</p>
<p>        3. 小程序模拟器：MuMu、雷电等。</p>
<h2>三、uni-app使用</h2>
<h3>3.1 创建项目</h3>
<p>        利用HBuilderX可视化创建比较简单，无需配置nodejs，Hbuilder已经有相关环境配置了。 注意要安装相对应的插件。</p>
<p class="img-center"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/db081255d2ff078c91b2d68e5d1b73c4.jpeg"></p>
<h3>3.2 运行到多端</h3>
<p>1. H5运行，即运行到内置浏览器</p>
<p class="img-center"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/795f8e5094d80645089288052353d853.jpeg"></p>
<p>2. 运行到小程序，以微信小程序为例</p>
<p>打开开发工具的服务端口设置小程序的端口</p>
<p> </p>
<p class="img-center"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/92da25ffb10d8b6803a67653a1dd8e9e.jpeg"></p>
<p>HBuilderx 配置微信开发工具的地址，运行->运行到小程序模拟器->运行设置输入微信开发者工具路径</p>
<p class="img-center"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/23a28e1acf7343507bae348c522ea868.jpeg"></p>
<p> manifest.json->微信小程序配置<img alt="" height="803" src="https://img-blog.csdnimg.cn/8ba71170e13f47e7883680a0f1c9f129.png" width="1200"></p>
<p> 运行到微信小程序</p>
<p class="img-center"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/38558b4bc867fc15a7bc407d33e854fe.jpeg"></p>
<p> 3. 运行到模拟器</p>
<p> 打开模拟器或者手机</p>
<p class="img-center"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/365cf89067ac27c9dd367f1f195880c0.jpeg"></p>
<p>配置模拟器端口，运行->运行到手机或模拟器->Android模拟器端口设置</p>
<p>夜神模拟器端口号：62001、海马模拟器端口号：26944、逍遥模拟器端口号：21503、MuMu模拟器端口号：7555、天天模拟器端口号：6555。</p>
<p class="img-center"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/5856bef400fd1a101c60707678f700fd.jpeg"></p>
<p>运行</p>
<p class="img-center"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/0973a2c607f9e0fa41c9daa99f36be50.jpeg"></p>
<h2>四、组件/标签</h2>
<p>来自：白话uni-app：https://ask.dcloud.net.cn/article/35657，将uni-app的组件/标签跟html做了一个对比。</p>
<pre data-index="0"><code class="hljs language-css"><ol class="hljs-ln" style="width: 2156px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-selector-tag">div</span> 改成 view</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-selector-tag">span</span>、<span class="hljs-attribute">font</span> 改成 text</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-selector-tag">a</span> 改成 navigator</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-selector-tag">img</span> 改成 image</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-selector-tag">input</span> 仅仅是输入框。原<span class="hljs-selector-tag">html</span>规范中<span class="hljs-selector-tag">input</span>不仅是输入框，还有radio、checkbox、时间、日期、文件选择功能。在uni-app和小程序规范中，<span class="hljs-selector-tag">input</span>仅仅是输入框。其他功能uni-app有单独的组件或API：radio组件、checkbox组件、时间选择、日期选择、图片选择、视频选择、多媒体文件选择(含图片视频)、通用文件选择。</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-selector-tag">form</span>、<span class="hljs-selector-tag">button</span>、<span class="hljs-selector-tag">label</span>、<span class="hljs-selector-tag">textarea</span>、<span class="hljs-selector-tag">canvas</span>、<span class="hljs-selector-tag">video</span> 这些还在。</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">select 改成 picker</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-selector-tag">iframe</span> 改成 web-view</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-selector-tag">ul</span>、<span class="hljs-selector-tag">li</span>没有了，都用view替代。做列表一般使用uList组件</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-selector-tag">audio</span> 不再推荐使用，改成api方式，背景音频api文档</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">其实老的<span class="hljs-selector-tag">HTML</span>标签也可以在uni-app里使用，uni-app编译器会在编译时把老标签转为新标签，比如把<span class="hljs-selector-tag">div</span>编译成view。但不推荐这种用法，调试<span class="hljs-selector-tag">H5</span>端时容易混乱。</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></div></div></li></ol></code><div class="hljs-button {2}" data-title="复制"></div></pre>
<p>除了改动外，还新增了一批手机端常用的新组件。</p>
<pre data-index="1"><code class="hljs language-cobol"><ol class="hljs-ln" style="width: 1431px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">scroll</span>-view 可区域滚动视图容器</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">swiper</span> 可滑动区域视图容器</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">icon </span>图标</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">rich</span>-text 富文本（不可执行js，但可渲染各种文字格式和图片）</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">progre</span>ss 进度条</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">slider</span> 滑块指示器</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">switch</span> 开关选择器</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">camera</span> 相机</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">live</span>-player 直播</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">map </span>地图</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">cover</span>-view 可覆盖原生组件的视图容器 cover-view需要多强调几句，uni-app的非h<span class="hljs-number">5</span>端的video、map、canvas、textarea是原生组件，层级高于其他组件。如需覆盖原生组件，则需要使用cover-view组件。</div></div></li></ol></code><div class="hljs-button {2}" data-title="复制"></div></pre>
<p>         因为uni-app的api是参考小程序的，所以和浏览器的js api有很多不同，uni-app的js api还有很多，但基本就是小程序的api，把wx.xxx改为uni.xxx即可。</p>
<pre data-index="2"><code class="hljs language-cobol"><ol class="hljs-ln" style="width: 100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">alert</span>,confirm -<span class="hljs-operator">></span>uni.showmodel</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">ajax a</span>xios -<span class="hljs-operator">></span> uni.request</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">cookie</span>、session 没有 local.storage-<span class="hljs-operator">></span>uni.storage</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">vue</span>-router-<span class="hljs-operator">></span> uni.navigateTo</div></div></li></ol></code><div class="hljs-button {2}" data-title="复制"></div></pre>
<p>         uni-app在不同的端，支持条件编译，无限制的使用各端独有的api。</p>
<h2>五、页面管理</h2>
<p>        每个可显示的页面，都必须在 pages.json 中注册。如果你开发过小程序，那么pages.json类似app.json。如果你熟悉vue，这里没有vue的路由，都是在pages.json里管理。</p>
<p>        在vue项目中首页一般是index.html或default.html，是在web server里配的。而uni-app的首页，是在pages.json里配的，page节点下第一个页面就是首页。一般在/pages/xx的目录下。</p>
<p>        app和小程序中，为了提升体验，页面提供了原生的导航栏和底部tabbar，注意这些配置是在pages.json中做，而不是在vue页面里创建，但点击事件的监听在显示的vue页面中做。</p>
</div>
<div>
查看文章链接：csdn的博主：zhangxiaobai___ 的文章：uni-app 介绍及使用
</div><br><br>
来源：https://www.cnblogs.com/fairya/p/17324740.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 介绍及使用