uni-app从入门到精通

庚茗溪澈 發表於 2022-10-7 09:59:00

<h5 id="uni-app介绍-官方网页">uni-app介绍官方网页</h5>
<p><code>uni-app</code> 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。</p>
<p>即使不跨端，<code>uni-app</code>同时也是更好的小程序开发框架。</p>
<p>具有vue和微信小程序的开发经验，可快速上手uni-app</p>
<p>为什么要去学习uni-app？</p>
<p>相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。</p>
<h5 id="环境搭建">环境搭建</h5>
<p>安装编辑器HbuilderX下载地址</p>
<p>HBuilderX是通用的前端开发工具，但为<code>uni-app</code>做了特别强化。</p>
<p>下载App开发版，可开箱即用</p>
<p>安装微信开发者工具下载地址</p>
<h5 id="利用hbuilderx初始化项目">利用HbuilderX初始化项目</h5>
<ul>
<li>
<p>点击HbuilderX菜单栏文件>项目>新建</p>
</li>
<li>
<p>选择uni-app,填写项目名称，项目创建的目录</p>
<p><img src="./images/create.jpg" alt="" loading="lazy"></p>
</li>
</ul>
<h5 id="运行项目">运行项目</h5>
<p>在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行</p>
<p>在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app</p>
<p>在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机</p>
<p><strong>注意：</strong></p>
<ul>
<li>如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功</li>
<li>微信开发者工具在设置中安全设置，服务端口开启</li>
</ul>
<h5 id="介绍项目目录和文件作用">介绍项目目录和文件作用</h5>
<p><code>pages.json</code> 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等</p>
<p><code>manifest.json</code> 文件是应用的配置文件，用于指定应用的名称、图标、权限等。</p>
<p><code>App.vue</code>是我们的跟组件，所有页面都是在<code>App.vue</code>下进行切换的，是页面入口文件，可以调用应用的生命周期函数。</p>
<p><code>main.js</code>是我们的项目入口文件，主要作用是初始化<code>vue</code>实例并使用需要的插件。</p>
<p><code>uni.scss</code>文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，<code>uni.scss</code>文件里预置了一批scss变量预置。</p>
<p><code>unpackage</code> 就是打包目录，在这里有各个平台的打包文件</p>
<p><code>pages</code> 所有的页面存放目录</p>
<p><code>static</code> 静态资源目录，例如图片等</p>
<p><code>components</code> 组件存放目录</p>
<p>为了实现多端兼容，综合考虑编译速度、运行性能等因素，<code>uni-app</code> 约定了如下开发规范：</p>
<ul>
<li>页面文件遵循 Vue 单文件组件 (SFC) 规范</li>
<li>组件标签靠近小程序规范，详见uni-app 组件规范</li>
<li>接口能力（JS API）靠近微信小程序规范，但需将前缀 <code>wx</code> 替换为 <code>uni</code>，详见uni-app接口规范</li>
<li>数据绑定及事件处理同 <code>Vue.js</code> 规范，同时补充了App及页面的生命周期</li>
<li>为兼容多端运行，建议使用flex布局进行开发</li>
</ul>
<h4 id="全局配置和页面配置">全局配置和页面配置</h4>
<h5 id="通过globalstyle进行全局配置">通过globalStyle进行全局配置</h5>
<p>用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>navigationBarBackgroundColor</td>
<td>HexColor</td>
<td>#F7F7F7</td>
<td>导航栏背景颜色（同状态栏背景色）</td>
</tr>
<tr>
<td>navigationBarTextStyle</td>
<td>String</td>
<td>white</td>
<td>导航栏标题颜色及状态栏前景颜色，仅支持 black/white</td>
</tr>
<tr>
<td>navigationBarTitleText</td>
<td>String</td>
<td></td>
<td>导航栏标题文字内容</td>
</tr>
<tr>
<td>backgroundColor</td>
<td>HexColor</td>
<td>#ffffff</td>
<td>窗口的背景色</td>
</tr>
<tr>
<td>backgroundTextStyle</td>
<td>String</td>
<td>dark</td>
<td>下拉 loading 的样式，仅支持 dark / light</td>
</tr>
<tr>
<td>enablePullDownRefresh</td>
<td>Boolean</td>
<td>false</td>
<td>是否开启下拉刷新，详见页面生命周期。</td>
</tr>
<tr>
<td>onReachBottomDistance</td>
<td>Number</td>
<td>50</td>
<td>页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期</td>
</tr>
</tbody>
</table>
<h5 id="创建新的message页面">创建新的message页面</h5>
<p>右键pages新建message目录，在message目录下右键新建.vue文件,并选择基本模板</p>
<pre><code class="language-html"><template>
<view>
这是信息页面
</view>
</template>

<script>
</script>

<style>
</style>
</code></pre>
<h5 id="通过pages来配置页面">通过pages来配置页面</h5>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>path</td>
<td>String</td>
<td></td>
<td>配置页面路径</td>
</tr>
<tr>
<td>style</td>
<td>Object</td>
<td></td>
<td>配置页面窗口表现，配置项参考 pageStyle</td>
</tr>
</tbody>
</table>
<p>pages数组数组中第一项表示应用启动页</p>
<pre><code class="language-html">"pages": [ 、
{
"path":"pages/message/message"
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
]
</code></pre>
<p>通过style修改页面的标题和导航栏背景色，并且设置h5下拉刷新的特有样式</p>
<pre><code class="language-js">"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path":"pages/message/message",
"style": {
"navigationBarBackgroundColor": "#007AFF",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": true,
"disableScroll": true,
"h5": {
"pullToRefresh": {
"color": "#007AFF"
}
}
}
}
]
</code></pre>
<h5 id="配置tabbar">配置tabbar</h5>
<p>如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。</p>
<p><strong>Tips</strong></p>
<ul>
<li>当设置 position 为 top 时，将不会显示 icon</li>
<li>tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。</li>
</ul>
<p><strong>属性说明：</strong></p>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>必填</th>
<th>默认值</th>
<th>描述</th>
<th>平台差异说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>color</td>
<td>HexColor</td>
<td>是</td>
<td></td>
<td>tab 上的文字默认颜色</td>
<td></td>
</tr>
<tr>
<td>selectedColor</td>
<td>HexColor</td>
<td>是</td>
<td></td>
<td>tab 上的文字选中时的颜色</td>
<td></td>
</tr>
<tr>
<td>backgroundColor</td>
<td>HexColor</td>
<td>是</td>
<td></td>
<td>tab 的背景色</td>
<td></td>
</tr>
<tr>
<td>borderStyle</td>
<td>String</td>
<td>否</td>
<td>black</td>
<td>tabbar 上边框的颜色，仅支持 black/white</td>
<td>App 2.3.4+ 支持其他颜色值</td>
</tr>
<tr>
<td>list</td>
<td>Array</td>
<td>是</td>
<td></td>
<td>tab 的列表，详见 list 属性说明，最少2个、最多5个 tab</td>
<td></td>
</tr>
<tr>
<td>position</td>
<td>String</td>
<td>否</td>
<td>bottom</td>
<td>可选值 bottom、top</td>
<td>top 值仅微信小程序支持</td>
</tr>
</tbody>
</table>
<p>其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>必填</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>pagePath</td>
<td>String</td>
<td>是</td>
<td>页面路径，必须在 pages 中先定义</td>
</tr>
<tr>
<td>text</td>
<td>String</td>
<td>是</td>
<td>tab 上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标</td>
</tr>
<tr>
<td>iconPath</td>
<td>String</td>
<td>否</td>
<td>图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片，不支持字体图标</td>
</tr>
<tr>
<td>selectedIconPath</td>
<td>String</td>
<td>否</td>
<td>选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效</td>
</tr>
</tbody>
</table>
<p>案例代码：</p>
<pre><code class="language-js">"tabBar": {
"list": [
{
"text": "首页",
"pagePath":"pages/index/index",
"iconPath":"static/tabs/home.png",
"selectedIconPath":"static/tabs/home-active.png"
},
{
"text": "信息",
"pagePath":"pages/message/message",
"iconPath":"static/tabs/message.png",
"selectedIconPath":"static/tabs/message-active.png"
},
{
"text": "我们",
"pagePath":"pages/contact/contact",
"iconPath":"static/tabs/contact.png",
"selectedIconPath":"static/tabs/contact-active.png"
}
]
}
</code></pre>
<h5 id="condition启动模式配置">condition启动模式配置</h5>
<p>启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。</p>
<p><strong>属性说明：</strong></p>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>是否必填</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>current</td>
<td>Number</td>
<td>是</td>
<td>当前激活的模式，list节点的索引值</td>
</tr>
<tr>
<td>list</td>
<td>Array</td>
<td>是</td>
<td>启动模式列表</td>
</tr>
</tbody>
</table>
<p><strong>list说明：</strong></p>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>是否必填</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>String</td>
<td>是</td>
<td>启动模式名称</td>
</tr>
<tr>
<td>path</td>
<td>String</td>
<td>是</td>
<td>启动页面路径</td>
</tr>
<tr>
<td>query</td>
<td>String</td>
<td>否</td>
<td>启动参数，可在页面的 onLoad 函数里获得</td>
</tr>
</tbody>
</table>
<h4 id="组件的基本使用">组件的基本使用</h4>
<p>uni-app提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接称自己的应用</p>
<p>uni-app中的组件，就像 <code>HTML</code> 中的 <code>div</code> 、<code>p</code>、<code>span</code> 等标签的作用一样，用于搭建页面的基础结构</p>
<h5 id="text文本组件的用法">text文本组件的用法</h5>
<h6 id="001---text-组件的属性">001 - text 组件的属性</h6>
<table>
<thead>
<tr>
<th style="text-align: center">属性</th>
<th style="text-align: center">类型</th>
<th style="text-align: center">默认值</th>
<th style="text-align: center">必填</th>
<th style="text-align: center">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">selectable</td>
<td style="text-align: center">boolean</td>
<td style="text-align: center">false</td>
<td style="text-align: center">否</td>
<td style="text-align: center">文本是否可选</td>
</tr>
<tr>
<td style="text-align: center">space</td>
<td style="text-align: center">string</td>
<td style="text-align: center">.</td>
<td style="text-align: center">否</td>
<td style="text-align: center">显示连续空格，可选参数：<code>ensp</code>、<code>emsp</code>、<code>nbsp</code></td>
</tr>
<tr>
<td style="text-align: center">decode</td>
<td style="text-align: center">boolean</td>
<td style="text-align: center">false</td>
<td style="text-align: center">否</td>
<td style="text-align: center">是否解码</td>
</tr>
</tbody>
</table>
<ul>
<li><code>text</code> 组件相当于行内标签、在同一行显示</li>
<li>除了文本节点以外的其他节点都无法长按选中</li>
</ul>
<h6 id="002---代码案例">002 - 代码案例</h6>
<pre><code class="language-html"><view>

<text selectable='true'>来了老弟</text>
</view>

<view>

<view>
<text space='ensp'>来了老弟</text>
</view>
<view>
<text space='emsp'>来了老弟</text>
</view>
<view>
<text space='nbsp'>来了老弟</text>
</view>
</view>

<view>
<text>skyblue</text>
</view>

<view>

<text decode='true'>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>
</view>
</code></pre>
<h5 id="view视图容器组件的用法">view视图容器组件的用法</h5>
<blockquote>
<p>View 视图容器，类似于 HTML 中的 div</p>
</blockquote>
<h6 id="001---组件的属性">001 - 组件的属性</h6>
<p><img src="./images/2view.png" alt="" loading="lazy"></p>
<h6 id="002---代码案例-1">002 - 代码案例</h6>
<pre><code class="language-html"><view class="box2" hover-class="box2_active">
<view class='box1' hover-class='active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'>

</view>
</view>
</code></pre>
<h5 id="button按钮组件的用法">button按钮组件的用法</h5>
<h6 id="001---组件的属性-1">001 - 组件的属性</h6>
<table>
<thead>
<tr>
<th style="text-align: center">属性名</th>
<th style="text-align: center">类型</th>
<th style="text-align: center">默认值</th>
<th style="text-align: center">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">size</td>
<td style="text-align: center">String</td>
<td style="text-align: center">default</td>
<td style="text-align: center">按钮的大小</td>
</tr>
<tr>
<td style="text-align: center">type</td>
<td style="text-align: center">String</td>
<td style="text-align: center">default</td>
<td style="text-align: center">按钮的样式类型</td>
</tr>
<tr>
<td style="text-align: center">plain</td>
<td style="text-align: center">Boolean</td>
<td style="text-align: center">false</td>
<td style="text-align: center">按钮是否镂空，背景色透明</td>
</tr>
<tr>
<td style="text-align: center">disabled</td>
<td style="text-align: center">Boolean</td>
<td style="text-align: center">false</td>
<td style="text-align: center">是否按钮</td>
</tr>
<tr>
<td style="text-align: center">loading</td>
<td style="text-align: center">Boolean</td>
<td style="text-align: center">false</td>
<td style="text-align: center">名称是否带 loading t图标</td>
</tr>
</tbody>
</table>
<ul>
<li><code>button</code> 组件默认独占一行，设置 <code>size</code> 为 <code>mini</code> 时可以在一行显示多个</li>
</ul>
<h6 id="002---案例代码">002 - 案例代码</h6>
<pre><code class="language-html"><button size='mini' type='primary'>前端</button>

<button size='mini' type='default' disabled='true'>前端</button>

<button size='mini' type='warn' loading='true'>前端</button>
</code></pre>
<h5 id="image组件的使用">image组件的使用</h5>
<h6 id="image">image</h6>
<p>图片。</p>
<table>
<thead>
<tr>
<th>属性名</th>
<th>类型</th>
<th>默认值</th>
<th>说明</th>
<th>平台差异说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>src</td>
<td>String</td>
<td></td>
<td>图片资源地址</td>
<td></td>
</tr>
<tr>
<td>mode</td>
<td>String</td>
<td>'scaleToFill'</td>
<td>图片裁剪、缩放的模式</td>
<td></td>
</tr>
</tbody>
</table>
<p><strong>Tips</strong></p>
<ul>
<li><code><image></code> 组件默认宽度 300px、高度 225px；</li>
<li><code>src</code> 仅支持相对路径、绝对路径，支持 base64 码；</li>
<li>页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 <code>image{will-change: transform}</code> ,可优化此问题。</li>
</ul>
<h4 id="uni-app中的样式">uni-app中的样式</h4>
<ul>
<li>
<p>rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。</p>
</li>
<li>
<p>使用<code>@import</code>语句可以导入外联样式表，<code>@import</code>后跟需要导入的外联样式表的相对路径，用<code>;</code>表示语句结束</p>
</li>
<li>
<p>支持基本常用的选择器class、id、element等</p>
</li>
<li>
<p>在 <code>uni-app</code> 中不能使用 <code>*</code> 选择器。</p>
</li>
<li>
<p><code>page</code> 相当于 <code>body</code> 节点</p>
</li>
<li>
<p>定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。</p>
</li>
<li>
<p><code>uni-app</code> 支持使用字体图标，使用方式与普通 <code>web</code> 项目相同，需要注意以下几点：</p>
<ul>
<li>
<p>字体文件小于 40kb，<code>uni-app</code> 会自动将其转化为 base64 格式；</p>
</li>
<li>
<p>字体文件大于等于 40kb，需开发者自己转换，否则使用将不生效；</p>
</li>
<li>
<p>字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。</p>
<pre><code> @font-face {
font-family: test1-icon;
src: url('~@/static/iconfont.ttf');
}
</code></pre>
</li>
</ul>
</li>
<li>
<p>如何使用scss或者less</p>
</li>
</ul>
<h4 id="uni-app中的数据绑定">uni-app中的数据绑定</h4>
<p>在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可</p>
<pre><code class="language-js">export default {
data () {
return {
   msg: 'hello-uni'
}
}
}
</code></pre>
<h5 id="插值表达式的使用">插值表达式的使用</h5>
<ul>
<li>
<p>利用插值表达式渲染基本数据</p>
<pre><code class="language-html"><view>{{msg}}</view>
</code></pre>
</li>
<li>
<p>在插值表达式中使用三元运算</p>
<pre><code class="language-html"><view>{{ flag ? '我是真的':'我是假的' }}</view>
</code></pre>
</li>
<li>
<p>基本运算</p>
<pre><code class="language-html"><view>{{1+1}}</view>
</code></pre>
</li>
</ul>
<h5 id="v-bind动态绑定属性">v-bind动态绑定属性</h5>
<p>在data中定义了一张图片，我们希望把这张图片渲染到页面上</p>
<pre><code class="language-js">export default {
data () {
return {
   img: 'http://destiny001.gitee.io/image/monkey_02.jpg'
}
}
}
</code></pre>
<p>利用v-bind进行渲染</p>
<pre><code class="language-html"><image v-bind:src="img"></image>
</code></pre>
<p>还可以缩写成:</p>
<pre><code class="language-html"><image :src="img"></image>
</code></pre>
<h5 id="v-for的使用">v-for的使用</h5>
<p>data中定以一个数组，最终将数组渲染到页面上</p>
<pre><code class="language-js">data () {
return {
arr: [
   { name: '刘能', age: 29 },
   { name: '赵四', age: 39 },
   { name: '宋小宝', age: 49 },
   { name: '小沈阳', age: 59 }
]
}
}
</code></pre>
<p>利用v-for进行循环</p>
<pre><code class="language-js"><view v-for="(item,i) in arr" :key="i">名字：{{item.name}}---年龄：{{item.age}}</view>
</code></pre>
<h4 id="uni中的事件">uni中的事件</h4>
<h5 id="事件绑定">事件绑定</h5>
<p>在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@</p>
<pre><code class="language-html"><button @click="tapHandle">点我啊</button>
</code></pre>
<p>事件函数定义在methods中</p>
<pre><code class="language-js">methods: {
tapHandle () {
console.log('真的点我了')
}
}
</code></pre>
<h5 id="事件传参">事件传参</h5>
<ul>
<li>
<p>默认如果没有传递参数，事件函数第一个形参为事件对象</p>
<pre><code>// template
<button @click="tapHandle">点我啊</button>
// script
methods: {
tapHandle (e) {
console.log(e)
}
}
</code></pre>
</li>
<li>
<p>如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据</p>
<pre><code>// template
<button @click="tapHandle(1)">点我啊</button>
// script
methods: {
tapHandle (num) {
console.log(num)
}
}
</code></pre>
</li>
<li>
<p>如果获取事件对象也想传递参数</p>
<pre><code>// template
<button @click="tapHandle(1,$event)">点我啊</button>
// script
methods: {
tapHandle (num,e) {
console.log(num,e)
}
}
</code></pre>
</li>
</ul>
<h4 id="uni的生命周期">uni的生命周期</h4>
<h5 id="应用的生命周期">应用的生命周期</h5>
<p>生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。</p>
<p>生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数</p>
<p><code>uni-app</code> 支持如下应用生命周期函数：</p>
<table>
<thead>
<tr>
<th>函数名</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>onLaunch</td>
<td>当<code>uni-app</code> 初始化完成时触发（全局只触发一次）</td>
</tr>
<tr>
<td>onShow</td>
<td>当 <code>uni-app</code> 启动，或从后台进入前台显示</td>
</tr>
<tr>
<td>onHide</td>
<td>当 <code>uni-app</code> 从前台进入后台</td>
</tr>
<tr>
<td>onError</td>
<td>当 <code>uni-app</code> 报错时触发</td>
</tr>
</tbody>
</table>
<h5 id="页面的生命周期">页面的生命周期</h5>
<p><code>uni-app</code> 支持如下页面生命周期函数：</p>
<table>
<thead>
<tr>
<th>函数名</th>
<th>说明</th>
<th>平台差异说明</th>
<th>最低版本</th>
</tr>
</thead>
<tbody>
<tr>
<td>onLoad</td>
<td>监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例</td>
<td></td>
<td></td>
</tr>
<tr>
<td>onShow</td>
<td>监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面</td>
<td></td>
<td></td>
</tr>
<tr>
<td>onReady</td>
<td>监听页面初次渲染完成。</td>
<td></td>
<td></td>
</tr>
<tr>
<td>onHide</td>
<td>监听页面隐藏</td>
<td></td>
<td></td>
</tr>
<tr>
<td>onUnload</td>
<td>监听页面卸载</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h4 id="下拉刷新">下拉刷新</h4>
<h5 id="开启下拉刷新">开启下拉刷新</h5>
<p>在uni-app中有两种方式开启下拉刷新</p>
<ul>
<li>需要在 <code>pages.json</code> 里，找到的当前页面的pages节点，并在 <code>style</code> 选项中开启 <code>enablePullDownRefresh</code></li>
<li>通过调用uni.startPullDownRefresh方法来开启下拉刷新</li>
</ul>
<h6 id="通过配置文件开启">通过配置文件开启</h6>
<p>创建list页面进行演示</p>
<pre><code class="language-html"><template>
<view>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{{item}}
</view>
</view>
</template>

<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据']
}
}
}
</script>

<style>
</style>
</code></pre>
<p>通过pages.json文件中找到当前页面的pages节点，并在 <code>style</code> 选项中开启 <code>enablePullDownRefresh</code></p>
<pre><code class="language-js">{
"path":"pages/list/list",
"style":{
   "enablePullDownRefresh": true
}
}
</code></pre>
<h6 id="通过api开启">通过API开启</h6>
<p>api文档</p>
<pre><code class="language-html">uni.startPullDownRefresh()
</code></pre>
<h5 id="监听下拉刷新">监听下拉刷新</h5>
<p>通过onPullDownRefresh可以监听到下拉刷新的动作</p>
<pre><code class="language-js">export default {
data () {
return {
   arr: ['前端','java','ui','大数据']
}
},
methods: {
startPull () {
   uni.startPullDownRefresh()
}
},
onPullDownRefresh () {
console.log('触发下拉刷新了')
}
}
</code></pre>
<h5 id="关闭下拉刷新">关闭下拉刷新</h5>
<p>uni.stopPullDownRefresh()</p>
<p>停止当前页面下拉刷新。</p>
<p>案例演示</p>
<pre><code class="language-html"><template>
<view>
<button type="primary" @click="startPull">开启下拉刷新</button>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据']
}
},
methods: {
startPull () {
uni.startPullDownRefresh()
}
},

onPullDownRefresh () {
this.arr = []
setTimeout(()=> {
this.arr = ['前端','java','ui','大数据']
uni.stopPullDownRefresh()
}, 1000);
}
}
</script>
</code></pre>
<h4 id="上拉加载">上拉加载</h4>
<p>通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px</p>
<p>通过onReachBottom监听到触底的行为</p>
<pre><code class="language-js"><template>
<view>
<button type="primary" @click="startPull">开启下拉刷新</button>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据','前端','java','ui','大数据']
}
},
onReachBottom () {
console.log('触底了')
}
}
</script>

<style>
view{
height: 100px;
line-height: 100px;
}
</style>
</code></pre>
<h4 id="网络请求">网络请求</h4>
<p>在uni中可以调用uni.request方法进行请求网络请求</p>
<p>需要注意的是：在小程序中网络相关的 API 在使用前需要配置域名白名单。</p>
<p><strong>发送get请求</strong></p>
<pre><code class="language-js"><template>
<view>
<button @click="sendGet">发送请求</button>
</view>
</template>
<script>
export default {
methods: {
sendGet () {
uni.request({
url: 'http://localhost:8082/api/getlunbo',
success(res) {
console.log(res)
}
})
}
}
}
</script>
</code></pre>
<p><strong>发送post请求</strong></p>
<h4 id="数据缓存">数据缓存</h4>
<h5 id="unisetstorage"><strong>uni.setStorage</strong></h5>
<p>官方文档</p>
<p>将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。</p>
<p>代码演示</p>
<pre><code class="language-js"><template>
<view>
<button type="primary" @click="setStor">存储数据</button>
</view>
</template>

<script>
export default {
methods: {
setStor () {
uni.setStorage({
   key: 'id',
   data: 100,
   success () {
   console.log('存储成功')
   }
})
}
}
}
</script>

<style>
</style>
</code></pre>
<h5 id="unisetstoragesync">uni.setStorageSync</h5>
<p>将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。</p>
<p>代码演示</p>
<pre><code class="language-js"><template>
<view>
<button type="primary" @click="setStor">存储数据</button>
</view>
</template>

<script>
export default {
methods: {
setStor () {
uni.setStorageSync('id',100)
}
}
}
</script>

<style>
</style>
</code></pre>
<h5 id="unigetstorage">uni.getStorage</h5>
<p>从本地缓存中异步获取指定 key 对应的内容。</p>
<p>代码演示</p>
<pre><code class="language-html"><template>
<view>
<button type="primary" @click="getStorage">获取数据</button>
</view>
</template>
<script>
export default {
data () {
return {
id: ''
}
},
methods: {
getStorage () {
uni.getStorage({
key: 'id',
success:res=>{
this.id = res.data
}
})
}
}
}
</script>
</code></pre>
<h5 id="unigetstoragesync">uni.getStorageSync</h5>
<p>从本地缓存中同步获取指定 key 对应的内容。</p>
<p>代码演示</p>
<pre><code class="language-html"><template>
<view>
<button type="primary" @click="getStorage">获取数据</button>
</view>
</template>
<script>
export default {
methods: {
getStorage () {
const id = uni.getStorageSync('id')
console.log(id)
}
}
}
</script>
</code></pre>
<h5 id="uniremovestorage">uni.removeStorage</h5>
<p>从本地缓存中异步移除指定 key。</p>
<p>代码演示</p>
<pre><code class="language-html"><template>
<view>
<button type="primary" @click="removeStorage">删除数据</button>
</view>
</template>
<script>
export default {
methods: {
removeStorage () {
uni.removeStorage({
key: 'id',
success: function () {
console.log('删除成功')
}
})
}
}
}
</script>
</code></pre>
<h5 id="uniremovestoragesync">uni.removeStorageSync</h5>
<p>从本地缓存中同步移除指定 key。</p>
<p>代码演示</p>
<pre><code class="language-html"><template>
<view>
<button type="primary" @click="removeStorage">删除数据</button>
</view>
</template>
<script>
export default {
methods: {
removeStorage () {
uni.removeStorageSync('id')
}
}
}
</script>
</code></pre>
<h4 id="上传图片预览图片">上传图片、预览图片</h4>
<h5 id="上传图片">上传图片</h5>
<p>uni.chooseImage方法从本地相册选择图片或使用相机拍照。</p>
<p>案例代码</p>
<pre><code class="language-html"><template>
<view>
<button @click="chooseImg" type="primary">上传图片</button>
<view>
<image v-for="item in imgArr" :src="item" :key="index"></image>
</view>
</view>
</template>

<script>
export default {
data () {
return {
imgArr: []
}
},
methods: {
chooseImg () {
uni.chooseImage({
count: 9,
success: res=>{
this.imgArr = res.tempFilePaths
}
})
}
}
}
</script>
</code></pre>
<h5 id="预览图片">预览图片</h5>
<p>结构</p>
<pre><code class="language-html"><view>
<image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image>
</view>
</code></pre>
<p>预览图片的方法</p>
<pre><code class="language-js">previewImg (current) {
uni.previewImage({
urls: this.imgArr,
current
})
}
</code></pre>
<h4 id="条件注释实现跨段兼容">条件注释实现跨段兼容</h4>
<p>条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。</p>
<p><strong>写法：</strong>以 #ifdef 加平台标识开头，以 #endif 结尾。</p>
<p>平台标识</p>
<table>
<thead>
<tr>
<th>值</th>
<th>平台</th>
<th>参考文档</th>
</tr>
</thead>
<tbody>
<tr>
<td>APP-PLUS</td>
<td>5+App</td>
<td>HTML5+ 规范</td>
</tr>
<tr>
<td>H5</td>
<td>H5</td>
<td></td>
</tr>
<tr>
<td>MP-WEIXIN</td>
<td>微信小程序</td>
<td>微信小程序</td>
</tr>
<tr>
<td>MP-ALIPAY</td>
<td>支付宝小程序</td>
<td>支付宝小程序</td>
</tr>
<tr>
<td>MP-BAIDU</td>
<td>百度小程序</td>
<td>百度小程序</td>
</tr>
<tr>
<td>MP-TOUTIAO</td>
<td>头条小程序</td>
<td>头条小程序</td>
</tr>
<tr>
<td>MP-QQ</td>
<td>QQ小程序</td>
<td>（目前仅cli版支持）</td>
</tr>
<tr>
<td>MP</td>
<td>微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序</td>
<td></td>
</tr>
</tbody>
</table>
<h5 id="组件的条件注释">组件的条件注释</h5>
<p>代码演示</p>
<pre><code class="language-html">
<view>
h5页面会显示
</view>


<view>
微信小程序会显示
</view>


<view>
app会显示
</view>

</code></pre>
<h5 id="api的条件注释">api的条件注释</h5>
<p>代码演示</p>
<pre><code class="language-js">onLoad () {
//#ifdef MP-WEIXIN
console.log('微信小程序')
//#endif
//#ifdef H5
console.log('h5页面')
//#endif
}
</code></pre>
<p>样式的条件注释</p>
<p>代码演示</p>
<pre><code class="language-css">/* #ifdef H5 */
view{
height: 100px;
line-height: 100px;
background: red;
}
/* #endif */
/* #ifdef MP-WEIXIN */
view{
height: 100px;
line-height: 100px;
background: green;
}
/* #endif */
</code></pre>
<h4 id="uni中的导航跳转">uni中的导航跳转</h4>
<h5 id="利用navigator进行跳转">利用navigator进行跳转</h5>
<p>navigator详细文档：文档地址</p>
<p>跳转到普通页面</p>
<pre><code class="language-html"><navigator url="/pages/about/about" hover-class="navigator-hover">
<button type="default">跳转到关于页面</button>
</navigator>
</code></pre>
<p>跳转到tabbar页面</p>
<pre><code class="language-html"><navigator url="/pages/message/message" open-type="switchTab">
<button type="default">跳转到message页面</button>
</navigator>
</code></pre>
<h5 id="利用编程式导航进行跳转">利用编程式导航进行跳转</h5>
<p>导航跳转文档</p>
<p><strong>利用navigateTo进行导航跳转</strong></p>
<p>保留当前页面，跳转到应用内的某个页面，使用<code>uni.navigateBack</code>可以返回到原页面。</p>
<pre><code class="language-html"><button type="primary" @click="goAbout">跳转到关于页面</button>
</code></pre>
<p>通过navigateTo方法进行跳转到普通页面</p>
<pre><code class="language-js">goAbout () {
uni.navigateTo({
url: '/pages/about/about',
})
}
</code></pre>
<p><strong>通过switchTab跳转到tabbar页面</strong></p>
<p>跳转到tabbar页面</p>
<pre><code class="language-html"><button type="primary" @click="goMessage">跳转到message页面</button>
</code></pre>
<p>通过switchTab方法进行跳转</p>
<pre><code class="language-js">goMessage () {
uni.switchTab({
url: '/pages/message/message'
})
}
</code></pre>
<p><strong>redirectTo进行跳转</strong></p>
<p>关闭当前页面，跳转到应用内的某个页面。</p>
<pre><code class="language-html">
<button type="primary" @click="goMessage">跳转到message页面</button>

goMessage () {
uni.switchTab({
url: '/pages/message/message'
})
}
</code></pre>
<p>通过onUnload测试当前组件确实卸载</p>
<pre><code class="language-js">onUnload () {
console.log('组件卸载了')
}
</code></pre>
<h5 id="导航跳转传递参数">导航跳转传递参数</h5>
<p>在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收</p>
<p>传递参数的页面</p>
<pre><code class="language-js">goAbout () {
uni.navigateTo({
url: '/pages/about/about?id=80',
});
}
</code></pre>
<p>接收参数的页面</p>
<pre><code class="language-js"><script>
export default {
onLoad (options) {
console.log(options)
}
}
</script>
</code></pre>
<h4 id="_"></h4>
<h4 id="uni-app中组件的创建">uni-app中组件的创建</h4>
<p>在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可</p>
<ul>
<li>
<p>创建login组件，在component中创建login目录，然后新建login.vue文件</p>
<pre><code><template>
<view>
这是一个自定义组件
</view>
</template>

<script>
</script>

<style>
</style>
</code></pre>
</li>
<li>
<p>在其他组件中导入该组件并注册</p>
<pre><code>import login from "@/components/test/test.vue"
</code></pre>
</li>
<li>
<p>注册组件</p>
<pre><code class="language-js">components: {test}
</code></pre>
</li>
<li>
<p>使用组件</p>
<pre><code><test></test>
</code></pre>
</li>
</ul>
<h5 id="组件的生命周期函数">组件的生命周期函数</h5>
<table>
<thead>
<tr>
<th>beforeCreate</th>
<th>在实例初始化之后被调用。详见</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>created</td>
<td>在实例创建完成后被立即调用。详见</td>
<td></td>
<td></td>
</tr>
<tr>
<td>beforeMount</td>
<td>在挂载开始之前被调用。详见</td>
<td></td>
<td></td>
</tr>
<tr>
<td>mounted</td>
<td>挂载到实例上去之后调用。详见注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用<code>$nextTick</code>Vue官方文档</td>
<td></td>
<td></td>
</tr>
<tr>
<td>beforeUpdate</td>
<td>数据更新时调用，发生在虚拟 DOM 打补丁之前。详见</td>
<td>仅H5平台支持</td>
<td></td>
</tr>
<tr>
<td>updated</td>
<td>由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见</td>
<td>仅H5平台支持</td>
<td></td>
</tr>
<tr>
<td>beforeDestroy</td>
<td>实例销毁之前调用。在这一步，实例仍然完全可用。详见</td>
<td></td>
<td></td>
</tr>
<tr>
<td>destroyed</td>
<td>Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h4 id="组件的通讯">组件的通讯</h4>
<h5 id="父组件给子组件传值">父组件给子组件传值</h5>
<p>通过props来接受外界传递到组件内部的值</p>
<pre><code><template>
<view>
这是一个自定义组件 {{msg}}
</view>
</template>

<script>
export default {
props: ['msg']
}
</script>

<style>
</style>
</code></pre>
<p>其他组件在使用login组件的时候传递值</p>
<pre><code><template>
<view>
<test :msg="msg"></test>
</view>
</template>

<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},

components: {test}
}
</script>
</code></pre>
<h5 id="子组件给父组件传值">子组件给父组件传值</h5>
<p>通过$emit触发事件进行传递参数</p>
<pre><code class="language-html"><template>
<view>
这是一个自定义组件 {{msg}}
<button type="primary" @click="sendMsg">给父组件传值</button>
</view>
</template>

<script>
export default {
data () {
return {
status: '打篮球'
}
},
props: {
msg: {
type: String,
value: ''
}
},
methods: {
sendMsg () {
this.$emit('myEvent',this.status)
}
}
}
</script>
</code></pre>
<p>父组件定义自定义事件并接收参数</p>
<pre><code class="language-html"><template>
<view>
<test :msg="msg" @myEvent="getMsg"></test>
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},
methods: {
getMsg (res) {
console.log(res)
}
},

components: {test}
}
</script>
</code></pre>
<h5 id="兄弟组件通讯">兄弟组件通讯</h5>
<h4 id="uni-ui的使用">uni-ui的使用</h4>
<p>uni-ui文档</p>
<p>1、进入Grid宫格组件</p>
<p>2、使用HBuilderX导入该组件</p>
<p>3、导入该组件</p>
<pre><code class="language-html">import uniGrid from "@/components/uni-grid/uni-grid.vue"
import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
</code></pre>
<p>4、注册组件</p>
<pre><code class="language-html">components: {uniGrid,uniGridItem}
</code></pre>
<p>5、使用组件</p>
<pre><code class="language-html"><uni-grid :column="3">
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
<uni-grid-item>
<text class="text">文本</text>
</uni-grid-item>
</uni-grid>
</code></pre><br><br>
来源：https://www.cnblogs.com/P1Kaj1uu/p/16759148.html

頁: [1]

琼殿技术论坛's Archiver

uni-app从入门到精通