Vue-uniapp笔记

一、Pages生命周期

uni-app 支持如下页面生命周期函数：

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序、快手小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage	用户点击右上角分享	微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
onPageScroll	监听页面滚动，参数为Object	nvue暂不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解 (opens new window)。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）	App、H5	1.6.0
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
onAddToFavorites	监听用户点击右上角收藏	微信小程序	2.8.1+

• 仅百度小程序基础库 3.260 以上支持 onInit 生命周期

• 其他版本或平台可以同时使用 onLoad 生命周期进行兼容，注意避免重复执行相同逻辑

• 不依赖页面传参的逻辑可以直接使用 created 生命周期替代

onLoad(获取参数,一次) – onShow(每次切换tabbar/回退都会触发)— created (也是一次,不能获取参数)– onReady(也是一次,,可以操作dom对象) - mounted(也是执行一次，只不过数据变更会再次触发)  

二、uniapp路由内置

vue-router 这个组件，已经内置，不需要自己手动集成

1：在pages目录下新建对应页面模板即可

2：它会自动创建好的页面模板注册到pages.json中。

3：然后我们可以在页面中或者tabbar去进行调整和转发

4：一种是标签的方式，一种是js的方式

<navigator url="../detail/detail">

open-type 默认是：navigate

保留当前页面，跳转到应用内的某个页面

特点是：在头部左上角有一个回退按钮

open-type 是：redirect

关闭当前页面，跳转到应用内的某个页面。

特点是：没有回退按钮。也没有tabbar。如果要离开就代表退出

一般用来：跳转登录，跳转注册。

open-type 是：switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

特点：如果pages.json的路径一旦使用到tabbar中，就只能使用switchTab

open-type 是：reLaunch

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

特点：它是navigate 的升级版本，因为在开发打开页面非常多，A–B–C–D–F。关闭历史步骤，类似退出页

open-type 是：navigateBack

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

特点是：自定回退，从哪里来回哪里去

open-type 有效值

值	JS方式	平台差异说明
navigate	对应 uni.navigateTo 的功能
redirect	对应 uni.redirectTo 的功能
switchTab	对应 uni.switchTab 的功能
reLaunch	对应 uni.reLaunch 的功能	字节跳动小程序与飞书小程序不支持
navigateBack	对应 uni.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效	微信2.1.0+、百度2.5.2+、QQ1.4.7+

三、UniApp和Vue-cli的开发注意事项

uniapp是改造vue，底层还是使用vue-cli做为脚手架。

认知uniapp：

1、uniapp不能去写div,span,只能用官方提供的组件标签或者自定义标签。

用view取代-div,h1 用text取代了span

2、uniapp不需要你安装组件，安装 vue，安装sass 、因为uniapp的hbuilderx会内置进去。你直接使用即可。

你在项目中压根看不到node_modules这个文件夹。

3、异步处理怎么办？

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

4、组件的注册和使用呢?

• 组件是视图层的基本组成单元。

• 组件是一个单独且可复用的功能模块的封装。

• 一个组件包括开始标签和结束标签，标签上可以写属性，并对属性赋值。内容则写在两个标签之内。

  • 根节点为 <template>，这个 <template> 下只能且必须有一个根 <view> 组件。这是vue单文件组件规范 (opens new window)。

  • 一个组件的 data 选项必须是一个函数。

四、组件注册

1、局部注册

	<!-- 在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下可以省略这步） 
		}
	</script>

2、全局注册

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

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

 页面中直接使用组件

3、插件注册

 main.js

import KsdUi from '@/components/index.js';
Vue.use(KsdUi);

index.js

import ksdTab from '@/components/ksd-table/ksd-table.vue';
export default{
    install(vm){
        vm.components("ksdTab",ksdTab);
    }
}

页面中直接使用组件

4、官网组件精简为一步

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

五、组件中$refs中的使用

子页面

<template>
	<view>
		我是一个子组件
	</view>
</template>

<script>
	export default {
		name:"pug-test",
		data() {
			return {
				
			};
		},
		methods:{
			loadComment(){
				console.log("===========okokokok===========")
			}
		}
	}
</script>

<style>

</style>

父页面

<template>
	<view>
		<view class="flex">Ref的讲解和分析</view>
		<pug-test ref="comment"></pug-test>
		<button @click="saveUser">保存</button>
				
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			saveUser(){
				this.$refs.comment.loadComment();
			}
		}
	}
</script>

<style>
	.flex{display: flex;justify-content: center;background:#ddd;
		padding:10px;
	}
	
	input[type='text']{border:1px solid #ccc;}
</style>

 六、第三方组件注册

1、导入插件到项目中

uView2.0重磅发布，利剑出鞘，一统江湖 - DCloud 插件市场

2：选择一个导入的工程

3:在uni_modules中生成uview-ui的文件夹

uni_modules 这个文件并不是node_modules，所以要注意：在导入和集成的时候一定指定目录

4：集成uview-ui到项目中

打开main.js注册uview-ui如下：

import App from './App'


// #ifndef VUE3
import Vue from 'vue'
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

5：uview-ui全局样式的导入

打开App.vue，配置如下：

• 在hbuilder安装sass/less插件

• 一定在<style lang="scss">

<style lang="scss">
	/*每个页面公共css */
	// @import '@/uni.css';
	@import '@/static/css/common.css';
	/*每个页面公共css */
	@import "@/uni_modules/uview-ui/index.scss";
</style>

6：uview-ui的全局样式变量表的导入

在项目的根目录找打uni.css。把uview-ui的theme.css。导入其中即可。

/**
 * 下方引入的为uView UI的集成样式文件，为scss预处理器，其中包含了一些"u-"开头的自定义变量
 * 使用的时候，请将下面的一行复制到您的uniapp项目根目录的uni.scss中即可
 * uView自定义的css类名和scss变量，均以"u-"开头，不会造成冲突，请放心使用 
 */

/*导入uview的样式变量参数*/
@import '@/uni_modules/uview-ui/theme.scss';

7、全局注册注册组件

在pages.json中使用easycom注册如下：

"easycom": {
      "autoscan": true,
      "custom": {
        "^ksd-(.*)": "@/components/ksd-$1/ksd-$1.vue" ,
        "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue",
        "^uni-(.*)": "@/uni_modules/uni-$1/components/uni-$1/uni-$1.vue",
        "^pug-(.*)": "@/ucomponent/pug-$1/pug-$1.vue" 
      }
    },

8：使用注册

<template>
    <view>
        <u-calendar :show="show"></u-calendar>
        <u-button @click="show = true">打开</u-button>
    </view>
</template>
​
<script>
    export default {
        data() {
            return {
                show: false,
            }
        }
    }
</script>