uniapp的简单使用
1、简介
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
创建项目可以使用HBuilderX或使用vue-cli
# vue-cli
vue create -p dcloudio/uni-preset-vue my-project
2、目录结构
- pages：页面存放目录
- static：静态文件资源目录
- App.vue：应用入口文件
- Main.js：应用入口文件
- manife.json：项目配置文件
- pages.json：页面配置
- Common：存放公用的文件
- components：自定义组件目录
- store：vuex目录
- unpackage：编译后的文件存放目录
3、模板语法
在模板中使用data中的变量需要使用v-bind可以简写为:和vue中一样，包括v-on简写成@
<template>
<view class="content">
<view v-bind:class="title">
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
}
}
</script>
各种语法基本上算是小程序和vue的结合版了。
4、组件
uniapp中的组件和微信小程序里的差不多
几个常用的：
- 视图容器：view、scroll-view
- 基础组件：icon、text
- 表单组件：button、input、checkbox、textarea
- 路由跳转：navigator
- 媒体组件：audio、image
- 地图组件：map
- 画布组件：canvas
各种组件可以看https://hellouniapp.dcloud.net.cn/pages/component/view/view
5、自定义组件
自定义组件创建在./components/组件名.vue，符合这个规范的可以在页面中直接引用，而不需要引文件这些操作
// ./components/card.vue 组件内
<template>
<view class="content">
<view >
card
</view>
</view>
</template>
// 使用的组件,无需import，直接标签
<template>
<view class="content">
<view :class="title">
</view>
<button @click="clickBtn">1111</button>
<card></card>
</view>
</template>
6、生命周期
应用生命周期：
- onLaunch：应用初始化完成执行，全局只执行一次
- onShow：应用显示的时候执行，或者从后台进入到前台
- onHide：应用隐藏的时候执行，或者应用从前台到后台
页面生命周期：
- onLoad：页面加载的时候触发
- onReady：页面初次渲染完成触发
- onShow：页面显示的时候触发
- onUnload：页面卸载的时候触发
- onHide：页面隐藏的时候触发
组件生命周期（和Vue生命周期一致）：
- beforeCreate：在实例初始化之后，数据观测(data observer)和event/watcher事件配置之前调用
- created：实例创建完成之后立即调用，实例上的方法属性也都配置完成，但是还没有挂载
- beforeMount：在挂载开始之前被调用
- mounted：挂载到实例上去之后调用。此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用
$nextTick - beforeUpdate：数据更新时调用
- updated：更新完成后调用
- beforeDestroy
- destroyed
初次渲染顺序：
- App onLaunch
- App onShow
- page onLoad
- page onShow
- beforeCreate
- created
- beforeMount
- mounted
- page onReady