20240909uniapp学习工作-微信小程序-VUE

小程序的 app.json 配置文档, 相当于 uniapp 的 pages.json, 

app.json:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

JSON文件在小程序代码中扮演静态配置的作用，在小程序运行之前就决定了小程序一些表现:

pages 相当于 uniapp 的 pages.json 中的 pages:

{
	"pages": [ //pages数组中第一项表示应用启动页
		{
			"path": "pages/index/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path": "pages/index/msg/msg-list/msg-list",
			"style": {
				"navigationBarTitleText": "我的消息",
				"app-plus": {
					"titleNView": {
						"buttons": [{
							"text": "全阅",
							"color": "#000",
							"float": "right",
							"fontSize": "14px"
						}]
					}
				}
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "应用名称",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"onReachBottomDistance": 50 //滑到底部的距离触发底部事件
	},
	……
}

刚刚看到这句,

"

1. 不需要专门去学习小程序的语法，uni-app使用的是vue的语法，不是小程序自定义的语法。

"
因为要快速上手, 我还是先看vue的语法吧.

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。也就是声明一下,最终显示的html就直接是js的状态.

响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。以前最开始学 iOS 的时候, 感觉最神奇的就是这种观察者模式.

一种类似 HTML 格式的文件, 称为单文件组件, 也称为 *.vue 文件. vue 的单文件组件会将一个组件的逻辑 javascript,模板html和样式css封装在同一个文件里.

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

vue 的组件可以按两种不同的风格书写: 选项是 API 和 组合式 API, 我的项目用的是选项式, 组合式有需要再看.

使用选项式 API 可以用包含多个选项的对象来描述组件的逻辑, 例如 data、methods 和 mounted.选项所定义的属性都会暴露在函数内部的 this 上, 它会指向当前的组件实例.

<script>
export default {
  // data() 返回的属性将会成为响应式的状态 也就是值一变页面就会自动变
  // 并且暴露在 `this` 上 this指的就是当前的组件
  // data 这块相当于定义对象的属性
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  // 类似ios的 viewdidload 安卓的 oncreate 之类的函数
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例:

import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
})

在我们的项目中是这样的:

import App from './App'

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
export function createApp() {
	const app = createSSRApp(App)
	app.use(ElementPlus)
	return {
		app
	}
}
// #endif

createSSRApp(app) 中的 app 对象实际上是一个组件, 每个应用都需要一个 "根组件", 其他组件将作为其子组件.

如果使用的是单文件组件, 可以直接从另一个文件中导入根组件.

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'

const app = createApp(App)

大多数真实的应用都是由一棵嵌套的、可重用的组件树组成的。例如，一个待办事项 (Todos) 应用的组件树可能是这样的：

App (root component)
├─ TodoList待办列表
│  └─ TodoItem待办条目
│     ├─ TodoDeleteButton删除按钮
│     └─ TodoEditButton编辑按钮
└─ TodoFooter底部
   ├─ TodoClearButton清除按钮
   └─ TodoStatistics统计