20240906uniapp学习工作-微信小程序

WXML 是这么写 :

<text>{{msg}}</text>

JS 只需要管理状态即可:

this.setData({ msg: "Hello World" })

通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

小程序中的页面js代码:

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

对应uniapp中的vue页面:

export default {
		data() {//这里是参与页面渲染的数据
			return {
				key: '',
				startTime: '',
				endTime: '',
				type: [1, 2, 3, 4],
			}
		},
		onLoad() {//页面渲染后执行
			this.loadList();
		},

		methods: {
			
		}
	}

Page 是一个页面构造器, 这个构造器生成了一个页面. 在生成页面的时候, 小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构.于是就得到了页面的样子.

vue页面文件中的 <template> 中的内容想单股 wxml, <script> 中的内容相当于 js 文件, 我想应该是这样吧, 继续学, 有待验证.

vue文件中, <style> 中的内容, 是页面元素的样式、宽高等:

<template>
	<view class="content"></view>
</template>

<style>
	.content {
		padding: 40px;
	}
</style>

记一下学到哪里了