uni-app笔记

uni-app 使用vue的语法+小程序的标签和API

所有组件与属性名都是小写，单词之间以连字符-连接

每个vue文件的根节点必须为 <template>，且这个 <template> 下只能且必须有一个根 <view> 组件

view==div

<script lang="ts">
    //通过使用lang="ts"可以直接编写typescript代码
</script>

在computed/methods中引用data中的对象使用 ： ${对象名（变量名）}

注：只有小程序能够获得导航栏高度，app、H5是没有的，

statusBar ---------- 状态栏高度
customBar -------- 状态栏高度 + 导航栏高度

var StatusBar= this.StatusBar;//this.StatusBar状态栏高度
var CustomBar= this.CustomBar;//this.CustomBar获取状态栏高度 + 导航栏高度

  //ColorUI代码：  
onLaunch: function() {
        uni.getSystemInfo({
            success: function(e) {
                // #ifdef MP-WEIXIN
                Vue.prototype.StatusBar = e.statusBarHeight;
                let custom = wx.getMenuButtonBoundingClientRect();
                Vue.prototype.Custom = custom;
                Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
                // #endif       
            }
        })
    },

这段代码引用的ColorUI的代码。

Vue.prototype.StatusBar = e.statusBarHeight; 获取的是手机状态栏的高度。

然后在其他页面中的data中定义这个高并且赋值 barheight: this.StatusBar

最后在页面最外层的view中动态绑定这个高，:style="{paddingTop:barheight+'px'}"

这样一来，app的页面就能根据不同手机，不同状态栏高度而改变距离顶部的高度

开发规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

• 页面文件遵循 Vue 单文件组件 (SFC) 规范
• 组件标签靠近小程序规范，详见uni-app 组件规范
• 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
• 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发、

目录结构

一个uni-app工程，默认包含如下目录及文件：

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量 
    

Tips

• 编译到任意平台时，static 目录下的文件均会被完整打包进去，且不会编译。非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。
• static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
• css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。
• HbuilderX 1.9.0+ 支持在根目录创建 ext.json、sitemap.json 等小程序需要的文件。

ref和$refs和$emit

ref写在标签中，是一个属性，$refs父组件可以调用子组件的data和methods，$emit子组件可以触发父组件的事件。详见Vue笔记

<!-- index 父组件页面 -->
<template>
    <view>
        <base-input ref="usernameInput"></base-input>
        <button type="default" @click="getFocus">获取焦点</button> 
    </view>
</template>
<script>
    export default {
        methods:{
            getFocus(){
                //通过组件定义的ref调用focus方法
                this.$refs.usernameInput.focus()
                //this.$refs.usernameInputs
            }
        }
    }
</script>

组件

uni-app支持的组件分为vue组件和小程序自定义组件。

uni-app只支持 vue单文件组件（.vue 组件）

视图容器（View Container）：

基础内容（Basic Content）：

表单组件（Form）：

路由与页面跳转（Navigation）：

媒体组件（Media）：

媒体组件（Media）：

地图（Map）：

画布（Canvas）：

webview（Web-view）：

广告

页面属性配置

uniCloud

组件全局注册

• main.js 里进行全局导入和注册

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

组件局部注册

1. 传统vue规范： 在 index.vue 页面中，通过 import 方式引入组件 ，在 components 选项中定义你想要使用的组件。

    <!-- 在index.vue引入 uni-badge 组件-->
    <template>
        <view>
            <uni-badge text="1"></uni-badge><!-- 3.使用组件 -->
        </view>
    </template>
    <script>
        import uniBadge from '@/components/uni-badge/uni-badge.vue';//1.导入组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
        export default {
            components:{uniBadge }//2.注册组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）      uniBadge等价于 uniBadge:uniBadge是缩写    //仅支持驼峰法命名
        }
    </script>

2.通过uni-app的easycom： 将组件引入精简为一步。只要组件安装在项目的 components 目录下，并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用。

​

    <template>
        <view>
            <uni-badge text="1"></uni-badge><!-- 3.使用组件 -->
        </view>
    </template>
    <script>
        // 这里不用import引入，也不需要在components内注册uni-badge组件。template里就可以直接用
        export default {
            data() {
                return {
                }
            }
        }
    </script>

小程序不支持内容：

• 作用域插槽（HBuilderX 3.1.19 以下仅支持解构插槽且不可使用作用域外数据以及使用复杂的表达式）
• 动态组件
• 异步组件
• inline-template
• X-Templates
• keep-alive（App端也未支持）
• transition （可使用 animation 或 CSS 动画替代）

uni-app保留字

• a
• canvas
• cell
• content
• countdown
• datepicker
• div
• element
• embed
• header
• image
• img
• indicator
• input
• link
• list
• loading-indicator
• loading
• marquee
• meta
• refresh
• richtext
• script
• scrollable
• scroller
• select
• slider-neighbor
• slider
• slot
• span
• spinner
• style
• svg
• switch
• tabbar
• tabheader
• template
• text
• textarea
• timepicker
• transition-group
• transition
• video
• view
• web

Tips

• 除以上列表中的名称外，标准的 HTML 及 SVG 标签名也不能作为组件名。
• 在百度小程序中使用时，不要在 data 内使用 hidden ，可能会导致渲染错误。
• methods中不可使用与生命周期同名的方法名。

dataset-切换界面

常用于切换页面,内置data-(attribute)属性

使用e.currentTarget.dataset.cur获得data-cur的值

e.currentTarget获取的是哪个view触发了单击事件，传入这个对象

<tools v-if="PageCur == 'mrxc'"></tools>
<user v-if="PageCur == 'grzx'"></user>
<element v-if="PageCur == 'xcsh'"></element>
<!--v-if根据PageCur的值确定显示情况-->

<view class="action" @click="NavChange" data-cur="xcsh">
				
</view>
<view class="action" @click="NavChange" data-cur="grzx">
				
</view>
<view class="action" @click="NavChange" data-cur="mrxc">
				
</view>
<script>
    export default {
	components: {
		tools,
		user,
		element
	},
	data() {
		return {
			PageCur: 'mrxc'
		};
	},
	methods: {
        //获取data-cur
		NavChange: function(e) {
			this.PageCur = e.currentTarget.dataset.cur;
		}
        //上下两个都行！！！
        //获取data-index
        test(e){
			console.log(e.target.dataset.index);
		}
	}
};
</script>

target--（捕捉和冒泡会影响触发事件的对象组件）

触发事件的源组件。

currentTarget--常用

事件绑定的当前组件。

跳转页面

uni.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

OBJECT参数说明

// 此处是A页面
uni.navigateTo({
    url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
    url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
    delta: 2    //往前跳两次
});

uni.reLaunch(OBJECT)

关闭所有页面，打开到应用内的某个页面。

注意： 如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide

OBJECT参数说明

uni.reLaunch({
		url: '/pages/login/index',
});

slot详见Vue笔记

uni-app使用具体槽名slot有点不同

//子组件定义
<slot name="content"></slot>
//父组件调用
<block slot="content">工具</block>