微信小程序基础学习（一）_page data定义-CSDN博客

本文链接：https://blog.csdn.net/weixin_43550660/article/details/104099969

微信小程序基础学习（一）

JSON 配置

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途。

小程序配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：

pages字段：用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在那个目录
window字段：定义小程序所有页面的顶部背景颜色，文字颜色等

工具配置 project.config.json

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

页面配置 page.json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

JSON 语法

这里说一下小程序里JSON配置的一些注意事项。

JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。

数字，包含浮点数和整数
字符串，需要包裹在双引号中
Bool值，true 或者 false
数组，需要包裹在方括号中 []
对象，需要包裹在大括号中 {}
Null

WXML 模板

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。wxml充当的就是类似的html角色

wxml：是框架设计的一套标签语言，结合组件、wxs和事件系统，可以构建出页面的结构
语法：<标签名属性名='属性名1' 属性名='属性名1'></标签名>
wxml：数据绑定、列表渲染、条件渲染、模板引用
属性名类型描述注解
data-* Any 自定义属性组件上触发的事件，会发送给事件处理函数
bind*/catch* EventHandler 组件事件
hidden Boolean 组件是否显示所有组件默认显示

属性名	类型	描述	注解
data-*	Any	自定义属性	组件上触发的事件，会发送给事件处理函数
bind/catch	EventHandler	组件事件
hidden	Boolean	组件是否显示	所有组件默认显示

列表渲染
<block wx:for="{{items}}" wx:for-item="item" wx:key="index"></block>

条件渲染
<view wx:if=""></view>
<view wx:elif=""></view>
<view wx:else></view>
 如果频繁的切换显示 使用 hidden 更好

<template name="tempItem">
	<view>
		<view>喜欢：{{color}}</view>
	</view>
</template>
引用
<template is="tempItem" data="{{...item}}"></template>

Page({
	data:{
		item:{
			color:"red"
		}
	}
})

文件引用
1. import
  1. import有作用域的概念，即只会import目标文件中定义的import，而不会import目标文件import的import
  2. 简单的来说就是值包含下一层，不会迭代
  3. C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。
2. include
  1. include可以将目标文件除了<template/> <wxs/>外的整个代码引入，相当于拷贝到include位置
3. 总结来说，import 用来导入静态块，include用来导入页面结构

WXSS 样式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
此外 WXSS 仅支持部分 CSS 选择器

wxss：是一套样式语言，用于描述wxml的组件样式

css:是一套样式语言，是一种样式表语言，用来描述html或xml文档的呈现
$屏幕分辨率： x * y PPI = 根号（x^2 + y^2）/ 屏幕尺寸 iphone6 为例根号750^2 + 1334^2 / 4.7 = 325.6$

选择器	样例	样例描述
.class	`.intro`	选择所有拥有 class=“intro” 的组件
#id	`#firstname`	选择拥有 id=“firstname” 的组件
element	`view`	选择所有 view 组件
element, element	`view, checkbox`	选择所有文档的 view 组件和所有的 checkbox 组件
::after	`view::after`	在 view 组件后边插入内容
::before	`view::before`	在 view 组件前边插入内容

`WXS`

模块、变量、注释、运算符、语句、数据类型、基础类库
模块分析：
- .wxs文件和 <wxs> 标签都是一个单独的模块，就像是block。
- 每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。
- 一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports实现。
- require函数
  - 只能引用 .wxs 文件模块，且必须使用相对路径
  - wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
  - 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。
- ```
<wxs module="m1">
	module.exports = {
		message:"heoll world"
	}
</wxs>
<view>{{m1.message}}</view>

-----------------------------------------------------
```