开始

uni-app 是个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到ios,android,web(响应式），以及各种小程序上

最近也比较火，所以我把自己的学习过程简单的记录一下。留个参考。

项目创建

uniapp项目的创建方式分为两种

vue-cli
HBuilderX

本人使用的是HBuilderX

vue-cli

第一步当然是安装vue-cli啦

npm install -g@vue/cli@4

全局安装vue-cli

创建项目 my-project

vue create -p dcloudio/uni-preset-vue my-project

和创建vue 项目差不多下一步就是选择模板了

选择模板

运行

npm run dev:平台
npm run build:平台

具体的值可以到官网自己看

HBuilderX

HBuilderX是和uniapp配套的开发工具

使用方式也是和其他开发工具大同小异

如果不熟悉HBuilderX的键位的话也可以切换到其他工具的按键

关于项目的创建和运行就不多赘述了，在官网的文档里写的很清楚。

项目结构

uniapp的项目结构和vue的还是有一定差别的

这里贴一个官网链接如果看图看不懂可以到官网去看

开发规范

uniapp 约定了如下的开发规范

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

页面和组件文件遵循vue的规范

uni-app项目中，一个页面就是一个符合Vue SFC规范的.vue文件或.nvue文件。

.vue页面和.nvue页面，均全平台支持，差异在于当uni-app发行到App平台时，.vue文件会使用webview进行渲染，.nvue会使用原生进行渲染，详见：nvue原生渲染。

内置标签使用小程序规范

<view>块级单位，相当于html中的div</view>

数据绑定和事件处理使用vue的规范

<template>  
    <view>  
        <text>{{textvalue}}</text><!-- 这里演示了组件值的绑定 -->  
            <button :type="buttontype" @click="changetextvalue()">修改为789</button><!-- 这里演示了属性和事件的绑定 -->  
    </view>  
</template>  
<script>  
    export default {  
	data() {  
            return {  
		textvalue:"123",  
		buttontype:"primary"  
                };  
	},  
	onLoad() {  
            this.textvalue="456"//这里修改textvalue的值，其实123都来不及显示就变成了456  
	},  
	methods: {  
	changetextvalue() {  
            this.textvalue="789"//这里修改textvalue的值，页面自动刷新为789  
                }
             }  
	}  
</script>

uniapp生命周期

在uniapp中，生命周期分为三大类

应用生命周期小程序规范
页面生命周期小程序规范
组件生命周期 vue规范

应用生命周期只能在`app.vue`里

函数名	说明
onLaunch	当`uni-app` 初始化完成时触发（全局只触发一次）
onShow	当 `uni-app` 启动，或从后台进入前台显示
onHide	当 `uni-app` 从前台进入后台
onError	当 `uni-app` 报错时触发
onUniNViewMessage	对 `nvue` 页面发送的数据进行监听，可参考 nvue 向 vue 通讯(opens new window)
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化

页面生命周期

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+

组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

函数名	说明	平台差异说明
beforeCreate	在实例初始化之前被调用。详见(opens new window)
created	在实例创建完成后被立即调用。详见(opens new window)
beforeMount	在挂载开始之前被调用。详见(opens new window)
mounted	挂载到实例上去之后调用。详见 (opens new window)注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用`$nextTick`Vue官方文档(opens new window)
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见(opens new window)	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见(opens new window)	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见(opens new window)
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见(opens new window)

关于各种生命周期详细的介绍可以在官网文档中搜索查看

uniapp 入门基础1

开始