Uni-app 学习笔记

元宝的好朋友 發表於 2020-2-23 18:24:00

<p>转载自 https://www.jianshu.com/p/132a3de98238</p>
<h1>uni-app跨平台框架官方教程</h1>
<p>链接：https://ke.qq.com/course/343370</p>
<h1>一、框架简介基础知识点</h1>
<h2>uniapp生命周期</h2>
<p>onLaunch 当uniapp初始化完成时进行触发，全局只触发一次<br>
onShow当uniapp启动或者从后台进入前台显示<br>
onHide当uniapp从前台进入后台<br>
onUniNViewMessage对nvue页面发送数据进行监听</p>
<h2>uniapp页面生命周期</h2>
<p>https://uniapp.dcloud.io/frame<br>
参看文档</p>
<h2>路由</h2>
<p><code>uni-app</code> 有两种路由跳转方式：使用navigator组件跳转、调用API跳转。<br>
1.打开新页面，页面重定向===》调用 API uni.navigateTo、使用组件<navigator open-type="navigateTo"/><br>
2.页面返回调用 APIuni.navigateBack 、使用组件 <navigator open-type="navigateBack"/> 、用户按左上角返回按钮、安卓用户点击物理back按键</p>
<p>3.Tab 切换调用 APIuni.switchTab、使用组件<navigator open-type="switchTab"/>、用户切换 Tab</p>
<p>4.重加载调用 APIuni.reLaunch、使用组件<navigator open-type="reLaunch"/></p>
<p>Tips：</p>
<ul>
<li>
<code>navigateTo</code>, <code>redirectTo</code> 只能打开非 tabBar 页面。</li>
<li>
<code>switchTab</code> 只能打开 <code>tabBar</code> 页面。</li>
<li>
<code>reLaunch</code> 可以打开任意页面。</li>
<li>页面底部的 <code>tabBar</code> 由页面决定，即只要是定义为 <code>tabBar</code> 的页面，底部都有 <code>tabBar</code>。</li>
<li>不能在 <code>App.vue</code> 里面进行页面跳转。</li>
</ul>
<h2>页面样式与布局</h2>
<p>uni-app支持的通用css单位包括px、upx、vh。<br>
upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。</p>
<h3>upx2px</h3>
<p>因为upx是编译器处理的，动态绑定upx不生效<br>
可使用 uni.upx2px(Number) 转换为 px 后再赋值。<br>
例如</p>
<pre><code> return uni.upx2px(750 / 2) + 'px';
</code></pre>
<h3>样式导入</h3>
<p>使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。</p>
<pre><code>@import "../../common/uni.css";
</code></pre>
<h3>内联样式</h3>
<p>1.style：静态的样式统一写到 class 中。</p>
<pre><code><view :style="{color:color}" />
</code></pre>
<ol start="2">
<li>class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。</li>
</ol>
<pre><code><view class="normal_view" />
</code></pre>
<h3>选择器</h3>
<p>1 .class<br>
2 #id<br>
3 element选择所有 view 组件</p>
<h3>全局样式与局部样式</h3>
<p>定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。<br>
<em>注意： App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。</em></p>
<h3>CSS变量</h3>
<table>
<thead>
<tr>
<th>CSS变量</th>
<th>描述</th>
<th>5+App</th>
<th>小程序</th>
<th>H5</th>
</tr>
</thead>
<tbody>
<tr>
<td>--status-bar-height</td>
<td>系统状态栏高度</td>
<td>系统状态栏高度</td>
<td>25px</td>
<td>0</td>
</tr>
<tr>
<td>--window-top</td>
<td>内容区域距离顶部的距离</td>
<td>0</td>
<td>0</td>
<td>NavigationBar 的高度</td>
</tr>
<tr>
<td>--window-bottom</td>
<td>内容区域距离底部的距离</td>
<td>0</td>
<td>0</td>
<td>TabBar 的高度</td>
</tr>
</tbody>
</table>
<h3>固定值</h3>
<p><code>uni-app</code> 中以下组件的高度是固定的，不可修改：</p>
<table>
<thead>
<tr>
<th>组件</th>
<th>描述</th>
<th>5+App</th>
<th>H5</th>
</tr>
</thead>
<tbody>
<tr>
<td>NavigationBar</td>
<td>导航栏</td>
<td>44px</td>
<td>44px</td>
</tr>
<tr>
<td>TabBar</td>
<td>底部选项卡</td>
<td>56px</td>
<td>50px</td>
</tr>
</tbody>
</table>
<h3>Flex布局</h3>
<p>为支持跨平台，框架建议使用Flex布局</p>
<h3>背景图片</h3>
<p><code>uni-app</code> 支持使用在 css 里设置背景图片，使用方式与普通 <code>web</code> 项目相同，需要注意以下几点：</p>
<ul>
<li>支持 base64 格式图片。</li>
<li>支持网络路径图片。</li>
<li>使用本地路径背景图片需注意：
<ol>
<li><p>图片小于 40kb，<code>uni-app</code> 会自动将其转化为 base64 格式；</p></li>
<li><p>图片大于等于 40kb，需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。</p></li>
<li>
<p>本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。</p>
<pre><code> .test2 {
background-image: url('~@/static/logo.png');
}
</code></pre>
</li>
</ol>
</li>
</ul>
<h3>字体图标</h3>
<p><code>uni-app</code> 支持使用字体图标，使用方式与普通 <code>web</code> 项目相同，需要注意以下几点：</p>
<ul>
<li>支持 base64 格式字体图标。</li>
<li>支持网络路径字体图标。</li>
<li>网络路径必须加协议头 <code>https</code>。</li>
<li>从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。</li>
<li>
<code>uni-app</code> 本地路径图标字体支持情况：
<ol>
<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>
</ol>
</li>
</ul>
<h2><template/>和 <block/></h2>
<p><code>uni-app</code> 支持在 template 模板中嵌套 <code><template/></code> 和 <code><block/></code>，用来进行列表渲染和条件渲染。</p>
<p><code><template/></code> 和 <code><block/></code> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。</p>
<p><strong>代码示例</strong></p>
<pre><code><template>
<view>
   <template v-if="test">
         <view>test 为 true 时显示</view>
   </template>
   <template v-else>
         <view>test 为 false 时显示</view>
   </template>
</view>
</template>
</code></pre>
<pre><code><template>
<view>
   <block v-for="(item,index) in list" :key="index">
         <view>{{item}} - {{index}}</view>
   </block>
</view>
</template>
</code></pre>
<h2>ES6 支持</h2>
<p>uni-app 在支持绝大部分 ES6 API 的同时，也支持了 ES7 的 await/async。</p>
<h2>NPM支持</h2>
<p>uni-app支持使用<strong>npm</strong>安装第三方包。</p>
<h2>TypeScript 支持</h2>
<p>在 uni-app 中使用 ts 开发</p>
<h2>小程序组件支持</h2>
<p><code>uni-app</code> 支持在 5+App 和小程序中使用<strong>小程序组件</strong>。</p>
<p><strong>平台差异说明</strong></p>
<table>
<thead>
<tr>
<th>平台</th>
<th>支持情况</th>
<th>小程序组件存放目录</th>
</tr>
</thead>
<tbody>
<tr>
<td>H5</td>
<td>不支持</td>
<td></td>
</tr>
<tr>
<td>5+App</td>
<td>支持微信小程序组件</td>
<td>wxcomponents</td>
</tr>
<tr>
<td>微信小程序</td>
<td>支持微信小程序组件</td>
<td>wxcomponents</td>
</tr>
<tr>
<td>支付宝小程序</td>
<td>支持支付宝小程序组件</td>
<td>mycomponents</td>
</tr>
<tr>
<td>百度小程序</td>
<td>支持百度小程序组件</td>
<td>swancomponents</td>
</tr>
</tbody>
</table>
<h1>二、vue使用注意事项</h1>
<p>uni-app 在发布到H5时支持所有vue的语法；发布到App和小程序时，由于平台限制，无法实现全部vue语法，但uni-app仍是是对vue语法支持度最高的跨端框架。本文将详细讲解差异。</p>
<h2>生命周期</h2>
<p><code>uni-app</code> 完整支持 <code>Vue</code> 实例的生命周期，同时还新增应用生命周期及页面生命周期。</p>
<p>详见Vue官方文档：生命周期钩子。</p>
<p><strong>注意</strong></p>
<ul>
<li>不要在选项属性或回调上使用箭头函数，比如 <code>created: () => console.log(this.a)</code> 或 <code>vm.$watch('a', newValue => this.myMethod())</code>。因为箭头函数是和父级上下文绑定在一起的，<code>this</code> 不会是如你做预期的 <code>Vue</code> 实例，且 <code>this.a</code> 或 <code>this.myMethod</code> 也会是未定义的。</li>
<li>建议使用 <code>uni-app</code> 的 <code>onReady</code>代替 <code>vue</code> 的 <code>mounted</code>。</li>
<li>建议使用 <code>uni-app</code> 的 <code>onLoad</code> 代替 <code>vue</code> 的 <code>created</code>。</li>
</ul>
<h2>模板语法</h2>
<p><code>uni-app</code> 完整支持 <code>Vue</code> 模板语法。</p>
<p>详见Vue官方文档：模板语法。</p>
<p><strong>注意</strong> 如果使用老版的非自定义组件模式，即manifest中<code>"usingComponents":false</code>，部分模版语法不支持，但此模式已不再推荐使用，详见。</p>
<p>老版非自定义组件模式不支持情况：</p>
<ul>
<li>不支持纯 HTML</li>
<li>不支持部分复杂的 JavaScript 渲染表达式</li>
<li>不支持过滤器</li>
</ul>
<h2>data 属性</h2>
<p><code>data</code> 必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。</p>
<pre><code>//正确用法，使用函数返回对象
data() {
return {
   title: 'Hello'
}
}
</code><p><code>//错误写法，会导致再次打开页面时，显示上次数据<br>
data: {<br>
title: 'Hello'<br>
}<br>
</code></p></pre><p></p>
<h2>全局变量</h2>
<p>实现全局变量的方式需要遵循 Vue 单文件模式的开发规范。详细参考：uni-app全局变量的几种实现方式</p>
<p>lass 支持的语法:</p>
<pre><code><view :class="{ active: isActive }">111</view>
<view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view>
<view class="static" :class="">333</view>
<view class="static" v-bind:class="">444</view>
<view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>
</code></pre>
<p>style 支持的语法:</p>
<pre><code><view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>
</code></pre>
<p>非H5端不支持 Vue官方文档：Class 与 Style 绑定中的 <code>classObject</code> 和 <code>styleObject</code> 语法。</p>
<p>不支持示例：</p>
<pre><code><template>
<view :class="" :style=""></view>
</template>
</code><p><code><script><br>
export default {<br>
data() {<br>
return {<br>
activeClass: {<br>
'active': true,<br>
'text-danger': false<br>
},<br>
baseStyles: {<br>
color: 'green',<br>
fontSize: '30px'<br>
},<br>
overridingStyles: {<br>
'font-weight': 'bold'<br>
}<br>
}<br>
}<br>
}<br>
</script><br>
</code></p></pre><p></p>
<p><strong>注意：以<code>:style=""</code>这样的方式设置px像素值，其值为实际像素，不会被编译器转换。</strong></p>
<p>此外还可以用 <code>computed</code> 方法生成 <code>class</code> 或者 <code>style</code> 字符串，插入到页面中，举例说明：</p>
<pre><code><template>

<view class="container" :class="computedClassStr"></view>
<view class="container" :class="{active: isActive}"></view>
<pre><code>&lt;!-- 不支持 --&gt;
&lt;view class="container" :class="computedClassObject"&gt;&lt;/view&gt;
</code></pre>
</code><p><code></template><br>
<script><br>
export default {<br>
data () {<br>
return {<br>
isActive: true<br>
}<br>
},<br>
computed: {<br>
computedClassStr () {<br>
return this.isActive ? 'active' : ''<br>
},<br>
computedClassObject () {<br>
return { active: this.isActive }<br>
}<br>
}<br>
}<br>
</script><br>
</code></p></pre><p></p>
<p><strong>用在组件上</strong></p>
<p>非H5端暂不支持在自定义组件上使用 <code>Class</code> 与 <code>Style</code> 绑定</p>
<h2>计算属性</h2>
<p>完整支持 Vue官方文档：计算属性。</p>
<h2>条件渲染</h2>
<p>完整支持 Vue官方文档：条件渲染</p>
<h2>列表渲染</h2>
<p>完整vue列表渲染 Vue官方文档：列表渲染</p>
<h3>key</h3>
<p>如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <code><input></code> 中的输入内容，<code><switch></code> 的选中状态），需要使用 <code>:key</code> 来指定列表中项目的唯一的标识符。</p>
<p><code>:key</code> 的值以两种形式提供</p>
<ul>
<li>使用 <code>v-for</code> 循环 <code>array</code> 中 <code>item</code> 的某个 <code>property</code>，该 <code>property</code> 的值需要是列表中唯一的字符串或数字，且不能动态改变。</li>
<li>使用 <code>v-for</code> 循环中 <code>item</code> 本身，这时需要 <code>item</code> 本身是一个唯一的字符串或者数字</li>
</ul>
<p>当数据改变触发渲染层重新渲染的时候，会校正带有 <code>key</code> 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。</p>
<p><strong>如不提供 <code>:key</code>，会报一个 <code>warning</code>，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。</strong></p>
<p>注意：</p>
<p>事件映射表中没有的原生事件也可以使用，例如map组件的regionchange 事件直接在组件上写成 @regionchange,同时这个事件也非常特殊，它的 event type 有 begin 和 end 两个，导致我们无法在handleProxy 中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既<map @regionchange="functionName" @end="functionName" @begin="functionName"><map>。<br>
为兼容各端，事件需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的bind 和 catch 进行事件绑定。<br>
事件修饰符<br>
.stop：各平台均支持，使用时会阻止事件冒泡，在非 H5 端同时也会阻止事件的默认行为<br>
.prevent 仅在 H5 平台支持<br>
.self：仅在 H5 平台支持<br>
.once：仅在 H5 平台支持<br>
.capture：仅在 H5 平台支持<br>
.passive：仅在 H5 平台支持<br>
若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。<br>
<view class="mask" @touchmove.stop.prevent="moveHandle"></view><br>
按键修饰符：uni-app运行在手机端，没有键盘事件，所以不支持按键修饰符。</p>
<h2>表单控件绑定</h2>
<p>支持 Vue官方文档：表单控件绑定。</p>
<p>建议开发过程中直接使用 uni-app：表单组件。</p>
<h2>组件</h2>
<h3>Vue 组件</h3>
<p>组件是整个 <code>Vue.js</code> 中最复杂的部分，支持 Vue官方文档：组件。</p>
<p><strong>有且只能使用单文件组件（.vue 组件）的形式进行支持</strong>。其他的诸如：动态组件，自定义 <code>render</code>，和<code><script type="text/x-template"></code> 字符串模版等非H5端都不支持。</p>
<h3>uni-app组件</h3>
<p><code>uni-app</code> 提供了丰富的UI组件，比如： <code>picker</code>,<code>map</code> 等，需要注意的是原生组件上的事件绑定，需要以 <code>vue</code> 的事件绑定语法来绑定，如 <code>bindchange="eventName"</code> 事件，需要写成 <code>@change="eventName"</code></p>
<p><strong>示例</strong></p>
<pre><code><picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
<view class="picker">
   当前选择: {{date}}
</view>
</picker>
</code></pre>
<h3>全局组件</h3>
<p><code>uni-app</code> 支持配置全局组件，需在 <code>main.js</code> 里进行全局注册，注册后就可在所有页面里使用该组件。</p>
<p><strong>注意</strong>：<code>Vue.component</code> 的第一个参数必须是静态的字符串。</p>
<p><strong>示例</strong></p>
<p>main.js 里进行全局注册</p>
<pre><code>import Vue from 'vue'
import pageHead from './components/page-head.vue'
Vue.component('page-head',pageHead)
</code></pre>
<p>index.vue 里可直接使用组件</p>
<pre><code><template>
<view>
<page-head></page-head>
</view>
</template>
</code></pre>
<h2>常见问题</h2>
<ol>
<li>如何获取上个页面传递的数据</li>
<li>如何设置全局的数据和全局的方法</li>
<li>如何捕获 app 的 onError</li>
<li>组件属性设置不生效解决办法</li>
</ol>
<h1>使用nvue Weex注意事项</h1>
<h1>使用HTML5+注意事项</h1>
<h2>条件编译</h2>
<p>条件编译是里用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。</p>
<p><strong>写法：</strong>以 #ifdef 或 #ifndef 加** %PLATFORM%** 开头，以 #endif 结尾。</p>
<h3>API 的条件编译</h3>
<pre><code>// #ifdef%PLATFORM%
平台特有的API实现
// #endif
</code></pre>
<h3>组件的条件编译</h3>
<h3>pages.json 的条件编译</h3>
<h3>static 目录的条件编译</h3>
<h1>+性能优化建议</h1>
<h1>+uni-app跨端开发注意事项</h1>
<h1>+高效开发技巧</h1>
<h3>- 使用代码块直接创建组件模板</h3>
<p>为提升开发效率，HBuilderX将 uni-app 常用代码封装成了以 u 开头的代码块，如在 template 标签内输入 ulist 回车，会自动生成如下代码：</p>
<pre><code><view class="uni-list">
<view class="uni-list-cell">
   <view class="uni-list-cell-navigate uni-navigate-right" v-for="(item,index) in list" :key="index">
         {{item.value}}
   </view>
</view>
</view>
</code></pre>
<p>代码块分为Tag代码块、JS代码块，如在 script 标签内输入 uShowToast 回车，会自动生成如下代码：</p>
<pre><code>uni.showToast({
title: '',
mask: false
duration: 1500
});
</code></pre>
<p>uni-app已支持代码块见下方列表。</p>
<p>Tag代码块</p>
<pre><code>uButton
uCheckbox
uGrid
uList
uListMedia
uRadio
uSwiper
</code></pre>
<p>JS代码块</p>
<pre><code>uRequest
uGetLocation
uShowToast
uShowLoading
uHideLoading
uShowModal
uShowActionSheet
uNavigateTo
uNavigateBack
uRedirectTo
uStartPullDownRefresh
uStopPullDownRefresh
uLogin
uShare
uPay
</code></pre>
<h3>- 使用 Chrome 调试</h3>
<h3>- 使用各家小程序开发工具调试</h3>
<h3>- 关于 App 的调试</h3>
<h1>+常见问题</h1>
<p><strong>uni-app 中可使用的 UI 框架：</strong>http://ask.dcloud.net.cn/article/35489</p>
<p><strong>uni-app App整包升级检测：</strong> https://ask.dcloud.net.cn/article/34972</p>
<p><strong>uni-app 资源热更新：</strong> https://ask.dcloud.net.cn/article/35667</p>
<p><strong>uni-app 导航栏开发指南：</strong> https://ask.dcloud.net.cn/article/34921</p>
<p><strong>uni-app 实现全局变量：</strong> https://ask.dcloud.net.cn/article/35021</p>
<p><strong>微信小程序转换uni-app指南：</strong>https://ask.dcloud.net.cn/article/35786</p>
<p><strong>mpvue 项目（组件）迁移指南、示例及资源汇总：</strong> https://ask.dcloud.net.cn/article/34945</p>
<p><strong>uni-app 引用 npm 第三方库：</strong> https://ask.dcloud.net.cn/article/19727</p>
<p><strong>uni-app 中使用微信小程序第三方 SDK 及资源汇总：</strong>https://ask.dcloud.net.cn/article/35070</p>
<p><strong>uni-app 中使用 5+ 的原生界面控件（包括map、video、livepusher、barcode、nview）：</strong>https://ask.dcloud.net.cn/article/35036</p>
<p><strong>uni-app 的 H5 版使用注意事项：</strong>https://ask.dcloud.net.cn/article/35232</p>
<p><strong>uni-app各环节（HBuilderX、cli、自定义基座、本地sdk、云打包引擎）版本兼容性说明：</strong>https://ask.dcloud.net.cn/article/35845</p>
<p><strong>uni-app 中选择和上传非图像、视频文件：</strong>https://ask.dcloud.net.cn/article/35547</p>
<p>=============================================</p>
<h2>模版语法和数据绑定</h2>
<h1>实例</h1>
<h2>1.请求数据，把数据data存储入news数组，页面模版自动刷新列表</h2>
<pre><code>          uni.request({
            url: 'https://unidemo.dcloud.net.cn/api/news',
            method: 'GET',
            data: {},
            success: res => {
               console.log(res);
               this.news = res.data;
            },
            fail: () => {},
            complete: () => {}
         });
</code></pre>
<h2>2.点击传入文章id，通过uni.navigateTo url+id打开文章页</h2>
<pre><code>       @tap="tapnews" :data-newsid="item.post_id"
<pre><code>    tapnews(e){
         console.log(e);
         var newsids= e.currentTarget.dataset.newsid;
         console.log(newsids);
         uni.navigateTo({
            url: '../info/info?newsid='+ newsids
         });
         }
</code></pre>
</code><p><code></code></p></pre><p></p>
<h2>3.显示文章页面</h2>
<pre><code>          uni.request({
            url: 'https://unidemo.dcloud.net.cn/api/news/36kr/'+ e.newsid,
            method: 'GET',
            data: {},
            success: res => {
               this.title = res.data.title;
               this.strings = res.data.content;
               console.log(strings);
               uni.hideLoading();
            },
            fail: () => {},
            complete: () => {}
         });
</code></pre>
<h2>4. 根目录的pages.json严格模式可以跳转自定义页面测试</h2>
<pre><code> "condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式（list 的索引项）
"list": [{
         "name": "news", //模式名称
         "path": "pages/info/info", //启动页面，必选
         "query": "newsid=5196737" //启动参数，在页面的onLoad函数里面得到。
   }
]
}
</code></pre></article><br><br>
来源：https://www.cnblogs.com/hjsofware/p/12353127.html

頁: [1]

琼殿技术论坛's Archiver

Uni-app 学习笔记