【成都校区】Uni-app

uni-app跨平台框架官方教程链接：https://ke.qq.com/course/343370
一、框架简介基础知识点uniapp生命周期onLaunch 当uniapp初始化完成时进行触发，全局只触发一次
onShow  当uniapp启动或者从后台进入前台显示
onHide  当uniapp从前台进入后台
onUniNViewMessage  对nvue页面发送数据进行监听
uniapp页面生命周期https://uniapp.dcloud.io/frame
参看文档
路由uni-app 有两种路由跳转方式：使用navigator组件跳转、调用API跳转。
1.打开新页面，页面重定向===》调用 API uni.navigateTo  、使用组件  <navigator open-type="navigateTo"/>
2.页面返回调用 API  uni.navigateBack 、使用组件 <navigator open-type="navigateBack"/> 、用户按左上角返回按钮、安卓用户点击物理back按键
3.Tab 切换调用 API  uni.switchTab  、使用组件  <navigator open-type="switchTab"/>  、用户切换 Tab
4.重加载调用 API  uni.reLaunch  、使用组件  <navigator open-type="reLaunch"/>
Tips：

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
不能在 App.vue 里面进行页面跳转。

页面样式与布局uni-app支持的通用css单位包括px、upx、vh。
upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。
upx2px因为upx是编译器处理的，动态绑定upx不生效
可使用 uni.upx2px(Number) 转换为 px 后再赋值。
例如

[JavaScript] 纯文本查看 复制代码

return uni.upx2px(750 / 2) + 'px';

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

[JavaScript] 纯文本查看 复制代码

@import "../../common/uni.css";

内联样式

1.style：静态的样式统一写到 class 中。

[JavaScript] 纯文本查看 复制代码

<view :style="{color:color}" />

2.class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

[JavaScript] 纯文本查看 复制代码

<view class="normal_view" />

选择器1 .class
2 #id
3 element 选择所有 view 组件
全局样式与局部样式定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
注意： App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。
CSS变量

CSS变量	描述	5+App	小程序	H5
--status-bar-height	系统状态栏高度	系统状态栏高度	25px	0
--window-top	内容区域距离顶部的距离	0	0	[backcolor=rgba(179, 179, 179, 0.15)]NavigationBar 的高度
--window-bottom	内容区域距离底部的距离	0	0	TabBar 的高度

固定值

uni-app 中以下组件的高度是固定的，不可修改：

组件	描述	5+APP	H5
NavigationBar	导航栏	44px	44px
TabBar	底部选项卡	56px	50px

Flex布局为支持跨平台，框架建议使用Flex布局
背景图片uni-app 支持使用在 css 里设置背景图片，使用方式与普通 web 项目相同，需要注意以下几点：

支持 base64 格式图片。
支持网络路径图片。
使用本地路径背景图片需注意：
- 图片小于 40kb，uni-app 会自动将其转化为 base64 格式；
- 图片大于等于 40kb，需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
- 本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）

[JavaScript] 纯文本查看 复制代码

 .test2 {
     background-image: url('~@/static/logo.png');
 }

字体图标uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：

支持 base64 格式字体图标。
支持网络路径字体图标。
网络路径必须加协议头 https。
从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。
uni-app 本地路径图标字体支持情况：
- 字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；
- 字体文件大于等于 40kb，需开发者自己转换，否则使用将不生效；
- 字体文件的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。

[JavaScript] 纯文本查看 复制代码

 @font-face {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }

<template/>和 <block/>uni-app 支持在 template 模板中嵌套 <template/> 和 <block/>，用来进行列表渲染和条件渲染。
<template/> 和 <block/> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
代码示例

[JavaScript] 纯文本查看 复制代码

<template>
    <view>
        <template v-if="test">
            <view>test 为 true 时显示</view>
        </template>
        <template v-else>
            <view>test 为 false 时显示</view>
        </template>
    </view>
</template>

[JavaScript] 纯文本查看 复制代码

<template>
    <view>
        <block v-for="(item,index) in list" :key="index">
            <view>{{item}} - {{index}}</view>
        </block>
    </view>
</template>

ES6 支持uni-app 在支持绝大部分 ES6 API 的同时，也支持了 ES7 的 await/async。
NPM支持uni-app支持使用npm安装第三方包。
TypeScript 支持在 uni-app 中使用 ts 开发
小程序组件支持uni-app 支持在 5+App 和小程序中使用小程序组件。
平台差异说明

平台	支持情况	小程序组件存放目录
H5	不支持
5+App	支持微信小程序组件	wxcomponents
微信小程序	支持微信小程序组件	wxcomponents
支付宝小程序	支持支付宝小程序组件	mycomponents
百度小程序	支持百度小程序组件	swancomponents

二、vue使用注意事项uni-app 在发布到H5时支持所有vue的语法；发布到App和小程序时，由于平台限制，无法实现全部vue语法，但uni-app仍是是对vue语法支持度最高的跨端框架。本文将详细讲解差异。
生命周期uni-app 完整支持 Vue 实例的生命周期，同时还新增应用生命周期及页面生命周期。
详见Vue官方文档：生命周期钩子。
注意

不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你做预期的 Vue 实例，且 this.a 或 this.myMethod 也会是未定义的。
建议使用 uni-app 的 onReady代替 vue 的 mounted。
建议使用 uni-app 的 onLoad 代替 vue 的 created。

模板语法uni-app 完整支持 Vue 模板语法。
详见Vue官方文档：模板语法。
注意如果使用老版的非自定义组件模式，即manifest中"usingComponents":false，部分模版语法不支持，但此模式已不再推荐使用，详见。
老版非自定义组件模式不支持情况：

不支持纯 HTML
不支持部分复杂的 JavaScript 渲染表达式
不支持过滤器

data 属性data 必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。

[JavaScript] 纯文本查看 复制代码

//正确用法，使用函数返回对象
data() {
    return {
        title: 'Hello'
    }
}

//错误写法，会导致再次打开页面时，显示上次数据
data: {
    title: 'Hello'
}

全局变量

实现全局变量的方式需要遵循 Vue 单文件模式的开发规范。详细参考：uni-app全局变量的几种实现方式

lass 支持的语法:

[JavaScript] 纯文本查看 复制代码

<view :class="{ active: isActive }">111</view>
<view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view>
<view class="static" :class="[activeClass, errorClass]">333</view>
<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>
<view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>

style 支持的语法:

[JavaScript] 纯文本查看 复制代码

<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>

非H5端不支持 Vue官方文档：Class 与 Style 绑定中的 classObject 和 styleObject 语法。

不支持示例：

[JavaScript] 纯文本查看 复制代码

<template>
    <view :class="[activeClass]" :style="[baseStyles,overridingStyles]"></view>
</template>

<script>
    export default {
        data() {
            return {
                activeClass: {
                    'active': true,
                    'text-danger': false
                },
                baseStyles: {
                    color: 'green',
                    fontSize: '30px'
                },
                overridingStyles: {
                    'font-weight': 'bold'
                }
            }
        }
    }
</script>

注意：以:style=""这样的方式设置px像素值，其值为实际像素，不会被编译器转换。

此外还可以用 computed 方法生成 class 或者 style 字符串，插入到页面中，举例说明：

[JavaScript] 纯文本查看 复制代码

<template>
    <!-- 支持 -->
    <view class="container" :class="computedClassStr"></view>
    <view class="container" :class="{active: isActive}"></view>

    <!-- 不支持 -->
    <view class="container" :class="computedClassObject"></view>
</template>
<script>
    export default {
        data () {
            return {
                isActive: true
            }
        },
        computed: {
            computedClassStr () {
                return this.isActive ? 'active' : ''
            },
            computedClassObject () {
                return { active: this.isActive }
            }
        }
    }
</script>

用在组件上
非H5端暂不支持在自定义组件上使用 Class 与 Style 绑定
计算属性完整支持 Vue官方文档：计算属性。
条件渲染完整支持 Vue官方文档：条件渲染
列表渲染完整vue列表渲染 Vue官方文档：列表渲染
key如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input> 中的输入内容，<switch> 的选中状态），需要使用 :key 来指定列表中项目的唯一的标识符。
:key 的值以两种形式提供

使用 v-for 循环 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
使用 v-for 循环中 item 本身，这时需要 item 本身是一个唯一的字符串或者数字

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 :key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
注意：
事件映射表中没有的原生事件也可以使用，例如map组件的regionchange 事件直接在组件上写成 @regionchange,同时这个事件也非常特殊，它的 event type 有 begin 和 end 两个，导致我们无法在handleProxy 中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>。
为兼容各端，事件需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的bind 和 catch 进行事件绑定。
事件修饰符
.stop：各平台均支持，使用时会阻止事件冒泡，在非 H5 端同时也会阻止事件的默认行为
.prevent 仅在 H5 平台支持
.self：仅在 H5 平台支持
.once：仅在 H5 平台支持
.capture：仅在 H5 平台支持
.passive：仅在 H5 平台支持
若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。
<view class="mask" @touchmove.stop.prevent="moveHandle"></view>
按键修饰符：uni-app运行在手机端，没有键盘事件，所以不支持按键修饰符。
表单控件绑定支持 Vue官方文档：表单控件绑定。
建议开发过程中直接使用 uni-app：表单组件。
组件Vue 组件组件是整个 Vue.js 中最复杂的部分，支持 Vue官方文档：组件。
有且只能使用单文件组件（.vue 组件）的形式进行支持。其他的诸如：动态组件，自定义 render，和<script type="text/x-template"> 字符串模版等非H5端都不支持。
uni-app组件uni-app 提供了丰富的UI组件，比如： picker,map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"
示例

[JavaScript] 纯文本查看 复制代码

<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
</picker>

全局组件uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。
注意：Vue.component 的第一个参数必须是静态的字符串。
示例
main.js 里进行全局注册

[JavaScript] 纯文本查看 复制代码

import Vue from 'vue'
import pageHead from './components/page-head.vue'
Vue.component('page-head',pageHead)

index.vue 里可直接使用组件

[JavaScript] 纯文本查看 复制代码

<template>
  <view>
    <page-head></page-head>
    </view>
</template>

常见问题

如何获取上个页面传递的数据
如何设置全局的数据和全局的方法
如何捕获 app 的 onError
组件属性设置不生效解决办法

使用nvue Weex注意事项使用HTML5+注意事项条件编译条件编译是里用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
写法：以 #ifdef 或 #ifndef 加** %PLATFORM%** 开头，以 #endif 结尾。
API 的条件编译

[JavaScript] 纯文本查看 复制代码

// #ifdef  %PLATFORM%
平台特有的API实现
// #endif

组件的条件编译pages.json 的条件编译static 目录的条件编译+性能优化建议+uni-app跨端开发注意事项+高效开发技巧- 使用代码块直接创建组件模板为提升开发效率，HBuilderX将 uni-app 常用代码封装成了以 u 开头的代码块，如在 template 标签内输入 ulist 回车，会自动生成如下代码：

[JavaScript] 纯文本查看 复制代码

<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>

代码块分为Tag代码块、JS代码块，如在 script 标签内输入 uShowToast 回车，会自动生成如下代码：

[JavaScript] 纯文本查看 复制代码

uni.showToast({
    title: '',
    mask: false
    duration: 1500
});

uni-app已支持代码块见下方列表。

Tag代码块

[JavaScript] 纯文本查看 复制代码

uButton
uCheckbox
uGrid
uList
uListMedia
uRadio
uSwiper

JS代码块

[JavaScript] 纯文本查看 复制代码

uRequest
uGetLocation
uShowToast
uShowLoading
uHideLoading
uShowModal
uShowActionSheet
uNavigateTo
uNavigateBack
uRedirectTo
uStartPullDownRefresh
uStopPullDownRefresh
uLogin
uShare
uPay

- 使用 Chrome 调试- 使用各家小程序开发工具调试- 关于 App 的调试+常见问题uni-app 中可使用的 UI 框架：http://ask.dcloud.net.cn/article/35489
uni-app App整包升级检测： https://ask.dcloud.net.cn/article/34972
uni-app 资源热更新： https://ask.dcloud.net.cn/article/35667
uni-app 导航栏开发指南： https://ask.dcloud.net.cn/article/34921
uni-app 实现全局变量： https://ask.dcloud.net.cn/article/35021
微信小程序转换uni-app指南：https://ask.dcloud.net.cn/article/35786
mpvue 项目（组件）迁移指南、示例及资源汇总： https://ask.dcloud.net.cn/article/34945
uni-app 引用 npm 第三方库： https://ask.dcloud.net.cn/article/19727
uni-app 中使用微信小程序第三方 SDK 及资源汇总：https://ask.dcloud.net.cn/article/35070
uni-app 中使用 5+ 的原生界面控件（包括map、video、livepusher、barcode、nview）：https://ask.dcloud.net.cn/article/35036
uni-app 的 H5 版使用注意事项：https://ask.dcloud.net.cn/article/35232
uni-app各环节（HBuilderX、cli、自定义基座、本地sdk、云打包引擎）版本兼容性说明：https://ask.dcloud.net.cn/article/35845
uni-app 中选择和上传非图像、视频文件：https://ask.dcloud.net.cn/article/35547
=============================================
模版语法和数据绑定实例1.请求数据，把数据data存储入news数组，页面模版自动刷新列表

[JavaScript] 纯文本查看 复制代码

            uni.request({
                url: 'https://unidemo.dcloud.net.cn/api/news',
                method: 'GET',
                data: {},
                success: res => {
                    console.log(res);
                    this.news = res.data;
                },
                fail: () => {},
                complete: () => {}
            });

2.点击传入文章id，通过uni.navigateTo url+id 打开文章页

[JavaScript] 纯文本查看 复制代码

          @tap="tapnews" :data-newsid="item.post_id"

            tapnews(e){
                console.log(e);
                var newsids= e.currentTarget.dataset.newsid;
                console.log(newsids);
                uni.navigateTo({
                    url: '../info/info?newsid='+ newsids
                });
                }

3.显示文章页面

[JavaScript] 纯文本查看 复制代码

            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: () => {} 
            });

4. 根目录的pages.json严格模式可以跳转自定义页面测试

[JavaScript] 纯文本查看 复制代码

    "condition": { //模式配置，仅开发期间生效
    "current": 0, //当前激活的模式（list 的索引项）
    "list": [{
            "name": "news", //模式名称
            "path": "pages/info/info", //启动页面，必选
            "query": "newsid=5196737" //启动参数，在页面的onLoad函数里面得到。
        }
    ]
}

帐号		自动登录	找回密码
密码			加入黑马

【成都校区】Uni-app

0 个回复