首页 › uni-app论坛 › uni-app小白入门自学笔记（一）

快乐刘绍武 發表於 2021-2-21 23:25:00

uni-app小白入门自学笔记（一）

<h3 id="码文不易啊转载请带上本文链接呀感谢感谢httpswwwcnblogscomechoyyap14427845html">码文不易啊，转载请带上本文链接呀，感谢感谢&nbsp;https://www.cnblogs.com/echoyya/p/14427845.html</h3>
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>码文不易啊，转载请带上本文链接呀，感谢感谢&nbsp;https://www.cnblogs.com/echoyya/p/14427845.html</li><li>环境搭建<ul><li>创建uni-app</li><li>运行uni-app</li></ul></li><li>介绍项目目录，文件作用</li><li>页面外观设置</li><li>页面底部 tabBar</li><li>启动模式配置 condition</li><li>数据及事件绑定</li><li>组件使用</li><li>uni-app中的样式</li><li>条件注释实现跨端兼容<ul><li>跨端兼容</li><li>条件编译</li></ul></li><li>续集： uni-app小白入门自学笔记（二）</li></ul></div><p></p>
<h3 id="环境搭建">环境搭建</h3>
<p>官网文档解释：<code>uni-app</code> 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。</p>
<p>需要下载开发工具：HBuilderX是通用的前端开发工具，但为<code>uni-app</code>做了特别强化。下载App开发版，可开箱即用；</p>
<ul>
<li>
<p>HBuilderX：下载地址</p>
</li>
<li>
<p>微信开发者工具：下载地址</p>
</li>
</ul>
<h4 id="创建uni-app">创建uni-app</h4>
<p>打开开发工具，HBuilderX，点击工具栏里的<strong>文件 -&gt; 新建 -&gt; 项目</strong>-&gt; 选择uni-app，输入项目名，选择模板，点击创建<br>
<img src="https://img2020.cnblogs.com/blog/1238759/202102/1238759-20210221231738980-645360391.png" alt="" loading="lazy"></p>
<h4 id="运行uni-app">运行uni-app</h4>
<ul>
<li>
<p>浏览器运行：进入项目，点击工具栏的运行 -&gt; 运行到浏览器 -&gt; 选择浏览器</p>
</li>
<li>
<p>微信开发者工具里运行：进入项目，点击工具栏的运行 -&gt; 运行到小程序模拟器 -&gt; 微信开发者工具，</p>
<ul>
<li>
<p>如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。需在输入框中输入微信开发者工具的安装路径。</p>
</li>
<li>
<p>微信开发者工具 -&gt; 设置 -&gt; 安全设置 -&gt; 安全 -&gt; 开启服务端口</p>
</li>
</ul>
</li>
</ul>
<p><img src="https://img2020.cnblogs.com/blog/1238759/202102/1238759-20210221231852268-1159948572.png" alt="" loading="lazy"></p>
<p><img src="https://img2020.cnblogs.com/blog/1238759/202102/1238759-20210221231908151-1794374334.png" alt="" loading="lazy"></p>
<h3 id="介绍项目目录文件作用">介绍项目目录，文件作用</h3>
<ul>
<li>
<p><code>pages.json</code> ：对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。</p>
</li>
<li>
<p><code>manifest.json</code> ：是应用的配置文件，用于指定应用的名称、图标、权限等</p>
</li>
<li>
<p><code>App.vue</code>：是uni-app的主组件，所有页面都是在<code>App.vue</code>下进行切换的，是页面入口文件。但其本身不是页面，这里不能编写视图元素。可以调用应用生命周期函数、配置全局样式、配置全局的存储globalData</p>
</li>
<li>
<p><code>main.js</code>：是uni-app的入口文件，主要作用是初始化<code>vue</code>实例、定义全局组件、插件等。</p>
</li>
<li>
<p><code>uni.scss</code>：为了方便整体控制应用的风格。如按钮颜色、边框风格，<code>uni.scss</code>文件里预置了一批scss变量预置。</p>
</li>
<li>
<p><code>unpackage</code>：项目打包目录，存在各个平台的打包文件</p>
</li>
<li>
<p><code>pages</code>：所有的页面存放目录</p>
</li>
<li>
<p><code>static</code>：静态资源目录，图片等</p>
</li>
<li>
<p><code>comonents</code>：组件存放目录</p>
</li>
</ul>
<h3 id="页面外观设置">页面外观设置</h3>
<p>全局配置 globalstyle :用于设置应用的状态栏、导航条、标题、窗口背景色等。列举以下常用</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">默认值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">navigationBarBackgroundColor</td>
<td style="text-align: left">HexColor</td>
<td style="text-align: left">#F7F7F7</td>
<td style="text-align: left">导航栏背景颜色（同状态栏背景色）</td>
</tr>
<tr>
<td style="text-align: left">navigationBarTextStyle</td>
<td style="text-align: left">String</td>
<td style="text-align: left">white</td>
<td style="text-align: left">导航栏标题颜色及状态栏前景颜色，仅支持 black/white</td>
</tr>
<tr>
<td style="text-align: left">navigationBarTitleText</td>
<td style="text-align: left">String</td>
<td style="text-align: left"></td>
<td style="text-align: left">导航栏标题文字内容</td>
</tr>
<tr>
<td style="text-align: left">backgroundColor</td>
<td style="text-align: left">HexColor</td>
<td style="text-align: left">#ffffff</td>
<td style="text-align: left">下拉显示出来的窗口的背景色</td>
</tr>
<tr>
<td style="text-align: left">backgroundTextStyle</td>
<td style="text-align: left">String</td>
<td style="text-align: left">dark</td>
<td style="text-align: left">下拉 loading 的样式，仅支持 dark / light</td>
</tr>
<tr>
<td style="text-align: left">enablePullDownRefresh</td>
<td style="text-align: left">Boolean</td>
<td style="text-align: left">false</td>
<td style="text-align: left">是否开启下拉刷新</td>
</tr>
<tr>
<td style="text-align: left">onReachBottomDistance</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">50</td>
<td style="text-align: left">页面上拉触底事件触发时距页面底部距离，单位只支持px</td>
</tr>
</tbody>
</table>
<p>页面配置 pageStyle</p>
<p><code>uni-app</code> 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象</p>
<ul>
<li>
<p>pages节点的第一项为应用入口页（即首页）</p>
</li>
<li>
<p><strong>应用中新增/减少页面</strong>，都需要对 pages 数组进行修改，且<strong>不需写后缀</strong>，框架会自动寻找路径下的页面资源</p>
</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">path</td>
<td style="text-align: left">String</td>
<td style="text-align: left">配置页面路径</td>
</tr>
<tr>
<td style="text-align: left">style</td>
<td style="text-align: left">Object</td>
<td style="text-align: left">配置页面窗口表现，配置项参考 pageStyle</td>
</tr>
</tbody>
</table>
<h3 id="页面底部-tabbar">页面底部 tabBar</h3>
<p>若应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。</p>
<p>在 pages.json 中提供 tabBar 配置，不仅方便快速开发导航，更重要的是在App和小程序端提升性能。</p>
<ul>
<li>
<p>当设置 position 为 top 时，将不会显示 icon</p>
</li>
<li>
<p>tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。</p>
</li>
<li>
<p>tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。</p>
</li>
</ul>
<p><strong>属性说明：</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">默认值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">color</td>
<td style="text-align: left">HexColor</td>
<td style="text-align: left">是</td>
<td style="text-align: left"></td>
<td style="text-align: left">tab 上的文字默认颜色</td>
</tr>
<tr>
<td style="text-align: left">selectedColor</td>
<td style="text-align: left">HexColor</td>
<td style="text-align: left">是</td>
<td style="text-align: left"></td>
<td style="text-align: left">tab 上的文字选中时的颜色</td>
</tr>
<tr>
<td style="text-align: left">backgroundColor</td>
<td style="text-align: left">HexColor</td>
<td style="text-align: left">是</td>
<td style="text-align: left"></td>
<td style="text-align: left">tab 的背景色</td>
</tr>
<tr>
<td style="text-align: left">borderStyle</td>
<td style="text-align: left">String</td>
<td style="text-align: left">否</td>
<td style="text-align: left">black</td>
<td style="text-align: left">tabbar 上边框的颜色，可选值 black/white</td>
</tr>
<tr>
<td style="text-align: left">list</td>
<td style="text-align: left">Array</td>
<td style="text-align: left">是</td>
<td style="text-align: left"></td>
<td style="text-align: left">tab 的列表，详见 list 属性说明，最少2个、最多5个 tab</td>
</tr>
<tr>
<td style="text-align: left">position</td>
<td style="text-align: left">String</td>
<td style="text-align: left">否</td>
<td style="text-align: left">bottom</td>
<td style="text-align: left">可选值 bottom、top</td>
</tr>
</tbody>
</table>
<p><strong>其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">pagePath</td>
<td style="text-align: left">String</td>
<td style="text-align: left">是</td>
<td style="text-align: left">页面路径，必须在 pages 中先定义</td>
</tr>
<tr>
<td style="text-align: left">text</td>
<td style="text-align: left">String</td>
<td style="text-align: left">是</td>
<td style="text-align: left">tab 上按钮文字，在 App 和 H5 平台为非必填。</td>
</tr>
<tr>
<td style="text-align: left">iconPath</td>
<td style="text-align: left">String</td>
<td style="text-align: left">否</td>
<td style="text-align: left">图片路径，当 postion 为 top 时，此参数无效，不支持网络图片和字体图标</td>
</tr>
<tr>
<td style="text-align: left">selectedIconPath</td>
<td style="text-align: left">String</td>
<td style="text-align: left">否</td>
<td style="text-align: left">选中时的图片路径，当 postion 为 top 时，此参数无效</td>
</tr>
</tbody>
</table>
<h3 id="启动模式配置-condition">启动模式配置 condition</h3>
<p>仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。</p>
<p><strong>属性说明：</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">是否必填</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">current</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">是</td>
<td style="text-align: left">当前激活的模式，list节点的索引值</td>
</tr>
<tr>
<td style="text-align: left">list</td>
<td style="text-align: left">Array</td>
<td style="text-align: left">是</td>
<td style="text-align: left">启动模式列表</td>
</tr>
</tbody>
</table>
<p><strong>list说明：</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">是否必填</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">name</td>
<td style="text-align: left">String</td>
<td style="text-align: left">是</td>
<td style="text-align: left">启动模式名称</td>
</tr>
<tr>
<td style="text-align: left">path</td>
<td style="text-align: left">String</td>
<td style="text-align: left">是</td>
<td style="text-align: left">启动页面路径</td>
</tr>
<tr>
<td style="text-align: left">query</td>
<td style="text-align: left">String</td>
<td style="text-align: left">否</td>
<td style="text-align: left">启动参数，可在页面的 onLoad 函数里获得</td>
</tr>
</tbody>
</table>
<pre><code>// pages.json
"condition":{ //模式配置，仅开发期间生效
    "current":"0", //当前激活的模式（list 的索引项）
    "list":[
      {
            "name":"详情", //模式名称
            "query":"id=80", //启动页面，必选
            "path":"pages/detail/detail" //启动参数，在页面的onLoad函数里面得到。
      }
    ]
}
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/1238759/202102/1238759-20210221231956417-560120395.png" alt="" loading="lazy"></p>
<h3 id="数据及事件绑定">数据及事件绑定</h3>
<ul>
<li>
<p>数据绑定：在页面中需要定义数据，和Vue一模一样，可以直接在data中定义数据即可，再利用插值表达式渲染，在插值表达式中支持三元运算和一些基本运算</p>
</li>
<li>
<p>动态绑定属性：同Vue，v-bind绑定，简写<code>:</code></p>
</li>
<li>
<p>事件绑定及传参：同Vue，v-on绑定，简写<code>@</code></p>
</li>
</ul>
<h3 id="组件使用">组件使用</h3>
<p>uni-app提供了一系列基础组件，类似HTML里的基础标签元素。但uni-app的组件与HTML不同，而是与小程序相同，更适合手机端使用。</p>
<p>虽然不推荐使用HTML标签，但实际上如果开发者写了<code>div</code>等标签，在编译到非H5平台时也会被编译器转换为<code>view</code>标签，类似的还有<code>span</code>转<code>text</code>、<code>a</code>转<code>navigator</code>等，包括css里的元素选择器也会转。</p>
<ul>
<li>
<p>所有组件与属性名都是小写，单词之间以连字符<code>-</code>连接。</p>
</li>
<li>
<p>根节点为 <code>&lt;template&gt;</code>，这个 <code>&lt;template&gt;</code> 下只能且必须有一个根<code>&lt;view&gt;</code>组件。这是vue单文件组件规范。</p>
</li>
<li>
<p>所有组件都有的属性：<strong>id，class，style，hidden，data-*，@EventHandler</strong></p>
</li>
</ul>
<p>列举几个常用的，但不同于传统html的组件，其余建议参考官网详细文档</p>
<ol>
<li>
<p>view：视图容器。类似于传统html中的div，用于包裹各种元素内容。</p>
</li>
<li>
<p>text：文本组件。类似于传统html中的span，用于包裹文本内容。</p>
</li>
<li>
<p>image：图片。类似于传统html中的span，用于显示图片元素。</p>
</li>
</ol>
<h3 id="uni-app中的样式">uni-app中的样式</h3>
<blockquote>
<ul>
<li>rpx 即响应式px，根据屏幕宽度自适应的单位，以750宽的屏幕为基准。750rpx恰好为屏幕宽度，屏幕变宽，rpx实际显示效果会等比放大。</li>
<li>支持基本常用选择器，class，id，element，但不能使用<code>*</code> 通配符选择器</li>
<li><code>page</code>相当于<code>body</code>节点</li>
<li>定义在App.vue中的样式为全局样式，作用于每一个页面，在pages目录下的vue文件中定义的样式为局部样式，只作用对应的页面，并会覆盖App.vue中相同的选择器</li>
<li>同样支持 Less 和 Scss，不过需要下载对应的插件</li>
<li>可通过<code>@import</code>导入外联样式表，并引用相对路径，用<code>;</code>表示语句结束</li>
<li>uni-app支持使用字体图标，使用方法与普通web项目相同，但需要注意：
<ul>
<li>字体文件小于40kb，uni-app会自动将其转化为base64格式，反之需开发者手动转换，否则将不生效</li>
<li>字体图标的引用路径推荐使用以<code>~@</code>开头的绝对路径</li>
</ul>
</li>
</ul>
</blockquote>
<pre><code>// App.vue 样式部分
&lt;style&gt;
        /*每个页面公共css */
        @import url("./static/font/iconfont.css");
&lt;/style&gt;
</code></pre>
<pre><code>// iconfont.css
@font-face {font-family: "iconfont";
src: url('~@/static/font/iconfont.eot');
}
</code></pre>
<h3 id="条件注释实现跨端兼容">条件注释实现跨端兼容</h3>
<h4 id="跨端兼容">跨端兼容</h4>
<p>uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。</p>
<ul>
<li>大量写 if else，会造成代码执行性能低下和管理混乱。</li>
<li>编译到不同的工程后二次修改，会让后续升级变的很麻烦。</li>
</ul>
<p>在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 <code>uni-app</code> 参考这个思路，为 <code>uni-app</code> 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。</p>
<h4 id="条件编译">条件编译</h4>
<p>条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。</p>
<p><strong>支持的文件</strong>：<code>·vue</code>，<code>.js</code>，<code>.css</code>，<code>pages.json</code>，各预编译语言文件，：<code>.scss、.less、.stylus、.ts、.pug</code></p>
<p><strong>注意：</strong>：条件编译是利用注释实现的，在不同语法里注释写法不一样</p>
<p><strong>写法：</strong>以 #ifdef 或 #ifndef 加 <strong>%PLATFORM%</strong> 开头，以 #endif 结尾。</p>
<ul>
<li><code>#ifdef</code>：if defined 仅在某平台存在</li>
<li><code>#ifndef</code>：if not defined 除了某平台均存在</li>
<li><code>%PLATFORM%</code>：平台名称</li>
</ul>
<table>
<thead>
<tr>
<th>条件编译写法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>#ifdef <strong>APP-PLUS</strong> 需条件编译的代码 #endif</td>
<td>仅出现在 App 平台下的代码</td>
</tr>
<tr>
<td>#ifndef <strong>H5</strong> 需条件编译的代码 #endif</td>
<td>除了 H5 平台，其它平台均存在的代码</td>
</tr>
<tr>
<td>#ifdef <strong>H5</strong> || <strong>MP-WEIXIN</strong> 需条件编译的代码 #endif</td>
<td>在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&amp;&amp;，因为没有交集）</td>
</tr>
</tbody>
</table>
<p><strong>%PLATFORM%</strong> <strong>可取值如下：</strong>全部取值可参考官方文档</p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">平台</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">APP-PLUS</td>
<td style="text-align: left">App</td>
</tr>
<tr>
<td style="text-align: left">H5</td>
<td style="text-align: left">H5</td>
</tr>
<tr>
<td style="text-align: left">MP-WEIXIN</td>
<td style="text-align: left">微信小程序</td>
</tr>
<tr>
<td style="text-align: left">MP-ALIPAY</td>
<td style="text-align: left">支付宝小程序</td>
</tr>
</tbody>
</table>
<p><img src="https://img2020.cnblogs.com/blog/1238759/202102/1238759-20210221232038812-1992939593.png" alt="" loading="lazy"></p>
<pre><code>&lt;template&gt;
        &lt;view&gt;
                &lt;!-- #ifdef H5 --&gt;
                &lt;view&gt;仅展示在H5中 &lt;/view&gt;
                &lt;!-- #endif --&gt;
                &lt;!-- #ifdef MP-WEIXIN --&gt;
                &lt;view&gt;仅展示在微信小程序中&lt;/view&gt;
                &lt;!-- #endif --&gt;
                &lt;text&gt;{{msg}}&lt;/text&gt;
        &lt;/view&gt;
&lt;/template&gt;

&lt;script&gt;
        export default {
                data() {
                        return {
                                msg: 'hello,'
                        }
                },
                onLoad() {
                        // #ifdef H5
                        this.msg += 'H5'
                        // #endif
                        // #ifdef MP-WEIXIN
                        this.msg += '微信小程序'
                        //#endif
                }
        }
&lt;/script&gt;

&lt;style&gt;
        /* 第一种写法，针对样式做注释 */
        text {
                /* #ifdef H5 */
                color: #8470FF;
                /* #endif */
                /* #ifdef MP-WEIXIN */
                color: #8DEEEE;
                /* #endif */
        }
       
        /* 第二种写法，针对选择器做注释 */
        /* #ifdef MP-WEIXIN */
        text {
                color: #8DEEEE;
        }
        /* #endif */
&lt;/style&gt;
</code></pre>
<h3 id="续集-uni-app小白入门自学笔记二">续集： uni-app小白入门自学笔记（二）</h3><br><br>
来源：https://www.cnblogs.com/echoyya/p/14427845.html

查看完整版本: uni-app小白入门自学笔记（一）