uniapp（vue3-ts）入门
一、安装
1、启动
# 最好使用hbuilderx开发
# 需要用到的插件会自动安装，比如：sass插件（dart-sass编译）、ts插件（typescript语言服务）
# vite暂不支持微信小程序，vue3的template暂不支持多标签
npx degit dcloudio/uni-preset-vue#vite-ts 项目名
npm i
npm run 脚本
2、代码格式化风格修改
a、缩进为2
工具->设置->常用配置->制表符长度：2
b、import大括号不换行
工具->设置->插件配置->自定义jsbeautify格式化规则->"brace_style": "collapse,preserve-inline"
二、知识点
1、规范
* 页面文件遵循Vue单文件组件规范
* 组件标签靠近小程序规范
* 接口能力（JS API）靠近微信小程序规范
* 数据绑定及事件处理使用Vue.js规范
2、条件编译
| 条件编译写法 | 说明 |
|---|---|
| #ifdef APP-PLUS 代码 #endif |
仅在app平台下的代码 |
| #ifndef H5 代码 #endif |
除了h5平台下的代码 |
| #ifdef H5 || MP-WEIXIN 代码 #endif |
在h5或小程序平台下的代码 |
3、目录结构
| 目录 | 作用 |
|---|---|
| pages | 页面存放目录 |
| static | 静态文件资源目录 |
| App.vue | 应用入口文件和小程序app.js类似 |
| main.js | 应用入口文件，注册vue等 |
| manifest.json | 项目配置 |
| pages.json | 页面配置 |
| -------- | -------- |
| common | 存放公用的文件 |
| components | 自定义组件目录 |
| store | vuex目录 |
| unpackage | 编译后的文件存放目录 |
4、模板语法
a、指令
v-bind：可以简写成:，组件属性要使用data（推荐函数方式定义）中定义的数据变量。
或者组件属性要是使用表达式，要使用v-bind指定
v-on：可以简写成@绑定事件
v-model：数据双向绑定
v-if：条件判断，决定某个内容或者区块是否挂载
v-show：条件判断，是否显示
v-for：列表渲染
b、标签
| uniapp | vue |
|---|---|
| view | div |
| text | span |
| image | img |
| block | template（非.vue文件的根标签） |
c、单位
* 可以使用微信小程序单位：屏幕宽度（750rpx）
d、模板
<template>
<view class="view-style">
<text class="text-color">{{ title }}</text>
<button @click="clickHandle">按钮</button>
</view>
</template>
<!-- 支持setup语法糖，但是暂时还不怎么好用 -->
<script lang="ts">
// @表示是在src目录下（main.js所在目录），引入的ts文件后缀名可省略
import { parseTime } from "@/common/utils"
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const title = ref('Hello')
const clickHandle = function() {
console.log(title.value = parseTime(new Date()))
}
return {
title,
clickHandle
}
}
});
</script>
<style lang="scss" scoped>
.view-style {
375rpx;
}
.text-color {
// uni.scss全局样式文件，无需@import导入
color: $uni-color-primary;
}
</style>
e、自定义组件
- main.js
import App from './App'
import { createSSRApp } from 'vue'
/**
* 1、自定义组件无需在全局注册
* 2、必须在components目录下定义组件，没有则新建目录
* 3、请使用vue3推荐的深度选择器（:deep()）
*/
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
5、生命周期
- 应用生命周期（App.vue）
<script>
export default {
//应用初始化完成执行，全局只执行一次
onLaunch: function() {
console.log('App Launch')
},
//应用显示的时候执行，或者从后台进入前台
onShow: function() {
console.log('App Show')
},
//应用隐藏的时候执行，或者从前台进入后台
onHide: function() {
console.log('App Hide')
}
}
</script>
- 页面生命周期（pages目录）
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
// 页面加载的时候触发
onLoad() {
console.log("page onLoad")
},
// 页面初次渲染完成触发
onReady() {
console.log("page onReady")
},
// 页面显示的时候触发
onShow() {
console.log("page onShow")
},
// 页面隐藏的时候触发
onHide() {
console.log("page onHide")
},
// 页面卸载的时候触发
onUnload() {
console.log("page onUnload")
},
});
</script>
- 组件生命周期（components目录）
与vue3生命周期一致