-  WXML 模板语法
-  WXSS 模板样式
- 全局配置
- 页面配置



# 一、WXML 模板语法

## 1、数据绑定

① 在 data 中定义数据

② 在 WXML 中使用数据

### 1.在 data 中定义页面的数据

在页面对应的 .js 文件中，把数据定义到 data 对象中即可：

```
Page({

  /**
   * 页面的初始数据
   */
  data: {
  	info: 'Hello word!',
  	imgSrc: '/images/漩涡鸣人.jpg',//存储图片位置路径
	randomNum: Math.random().toFixed(2) //生成一个带两位随机数,
	count: 0 ,
    msg: '你好',
    type: 2,
    flag: false,
	arr1: ['苹果','香蕉','梨'],
    arr2: [{id:'1',name:'苹果'},{id:'2',name:'香蕉'}],
  }
})
```

### 2、在 WXML 中使用数据

把data中的数据绑定到页面中渲染，使用 **Mustache 语法**（双大括号）将变量包起来即可

Mustache 语法的主要应用场景如下：

- 绑定内容
- 绑定属性
- 运算（三元运算、算术运算等）

```
#使用
<view>{{ info }}</view>
#绑定属性
<image src="{{imgSrc}}" mode="widthFix" />
#三元运算
<view>
  {{ randomNum > 5?"随机数大于5":"随机数小于5"}}
</view>
```

## 2、 事件绑定

### 1.什么是事件

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

![image-20230213103738055](https://chensh888.com:8090/file/blog/2023/20230213103742.png)

### 2.小程序常用事件

| 类型   | 绑定方式                  | 事件描述                                        |
| ------ | ------------------------- | ----------------------------------------------- |
| tap    | bindtap 或 bind:tap       | 手指触摸后马上离开，类似于 HTML 中的 click 事件 |
| input  | bindinput 或 bind:input   | 文本框的输入事件                                |
| change | bindchange 或 bind:change | 状态改变时触发                                  |

### 3.事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象event，它的详细属性如下表所示：

|	属性	|	类型	|	说明|
| ---- | ---- | ---- |
|	type	|	String	|	事件类型|
|	timeStamp	|	Integer	|	页面打开到触发事件所经过的毫秒数|
|	target	|	object	|	触发事件的组件的一些属性值集合|
|	currentTarget	|	object	|	当前组件的一些属性值集合|
|	detail	|	object	|	额外的信息|
|	touches	|	Array	|	触摸事件，当前停留在屏幕中的触摸点信息的数组|
|	changedTouches	|	Array	|	触摸事件，当前变化的触摸点信息的数组|

### 4.target 和currentTarget 的区别

**target**是**触发该事件的源头组件**，而**currentTarget**则是**当前事件所绑定的组件**。举例如下：

![image-20230213105656116](https://chensh888.com:8090/file/blog/2023/20230213105657.png)

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view 的tap 事件处理函数。

此时，对于外层的view 来说：

- e.target指向的是触发事件的源头组件，因此，e.target是内部的按钮组件
- e.currentTarget指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view 组件

### 5.bindtap的语法格式

在小程序中，不存在HTML 中的onclick 鼠标点击事件，而是通过tap 事件来响应用户的触摸行为。

①通过bindtap，可以为组件绑定tap 触摸事件，语法如下：

```
<view bindtap="outerHandler">
  <button type="primary">按钮</button>
</view>
```

②在页面的.js 文件中定义对应的事件处理函数，事件参数通过形参event（一般简写成e）来接收：

```
Page({
  
/**
 * 触发打印事件
 * @param {事件} e 
 */
  outerHandler(e){
    console.log(e);
  }
})
```

### 6.data中的数据赋值

```
Page({
    data: {
    count: 0
  },
  /**
   * 赋新值
   */
  changeCount(){
    this.setData({
      count: this.data.count + 1
    })
  }
})
```

### 7.事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。

可以为组件提供data-*自定义属性传参，其中* 代表的是参数的名字,例如:

```
<view bindtap="btnTapParm">
  <button type="primary" data-count="{{123}}">按钮</button>
</view>

#事件函数中需写入接受参数名
Page({
  
/**
 * 触发打印事件
 * @param {事件} e 
 */
  outerHandler(e){
    console.log(e);
  }
})
```

### 8.bindinput的语法格式

在小程序中，通过input 事件来响应文本框的输入事件，语法格式如下：

①通过bindinput，可以为文本框绑定输入事件：

```
<input bindinput="inputHandler"/>
<input type="text" value="{{ msg }}" bindinput="inputChange"/> 
```

②在页面的.js 文件中定义事件处理函数：

```
Page({
  /**
   * input 输入框事件函数
   */
  inputChange(e){
    console.log(e.detail.value);
  },
   /**
   * input 输入框事件函数 赋新值
   */
  inputChange(e){
    this.setData({
      msg: e.detail.value
    })
  },
})
```

### 9.条件渲染

1. **wx:if**

   ```
   <view wx:if="{{type ===1}}">男</view>
   <view wx:elif="{{type ===2}}">女</view>
   <view wx:else>其他</view>
   
   # 结合<block> 使用wx:if
   如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block> 标签上使用wx:if 控制属性，示例如下：
   
   <block wx:if="{{true}}">
   <view>男</view>
   <view>女</view>
   </block>
   ```


2. **hidden** 

   ```
   
   <view hidden="{{flag}}">hidden条件为true隐藏</view>
   ```
   **wx:if**与**hidden**的对比

   ①运行方式不同

   - wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏

   - hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏

   ②使用建议

   - 频繁切换时，建议使用hidden

   - 控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else 进行展示与隐藏的切换
3. **wx:for**

   - 使用wx:for-index 可以指定当前循环项的索引的变量名

   - 使用wx:for-item 可以指定当前项的变量名
   - 使用wx:key 提高渲染的效率

   ```
   
   
   <view wx:for="{{arr1}}" wx:key="*this">
     索引:{{index+1}},属性值:{{item}}
   </view>
   <view wx:for="{{arr2}}" wx:key="id" class="username">
     索引:{{index}},id:{{item.id}},name:{{item.name}}
   </view>
   ```

   

# 二、 模板样式

## 1. 什么是WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于美化WXML 的组件样式，类似于网页开发中的CSS。

## 2.WXSS和CSS的关系
WXSS 具有CSS 大部分特性，同时，WXSS 还对CSS 进行了扩充以及修改，以适应微信小程序的开发。与CSS 相比，WXSS 扩展的特性有：
- rpx尺寸单位

  > #1、rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。
  >
  > #2、rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，
  >
  > 在宽度上等分为750 份（即：当前屏幕的总宽度为750rpx）。
  >
  > ​	- 在较小的设备上，1rpx 所代表的宽度较小
  >
  > ​	- 在较大的设备上，1rpx 所代表的宽度较大
  >
  > 小程序在不同设备上运行的时候，会自动把rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。
  >
  > #3、**rpx** 与px之间的单位换算
  >
  > 在iPhone6 上，屏幕宽度为375px，共有750 个物理像素，等分为750rpx。则：
  >
  > 750rpx= 375px= 750 物理像素；
  >
  > 官方建议：开发微信小程序时，设计师可以用iPhone6作为视觉稿的标准。
  >
  > 开发举例：在iPhone6 上如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为200rpx 和40rpx。
- @import 样式导入
  
  >  #1、什么是样式导入
  >
  > 使用WXSS 提供的@import 语法，可以导入外联的样式表。
  >
  > #2、@import 的语法格式
  >
  > @import 后跟需要导入的外联样式表的相对路径，用;表示语句结束。示例如下：
  >
  > ```
  > /** common.wxss **/
  > .username{
  >  color: red;
  > }
  > /** index.wxss **/
  > @import "/common/common.wxss";
  > input {
  >   border: 1px solid red;
  >   margin: 5px;
  >   padding: 5px;
  >   border-radius: 5px; /*圆角*/
  > }
  > ```
  >

## 3.全局样式和局部样式

**全局样式**

定义在app.wxss 中的样式为全局样式，作用于每一个页面。

**局部样式**

在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面。

**注意**：

- 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式

- 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

# 三、全局配置

**全局配置文件及常用的配置项**

小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下：

① pages;记录当前小程序所有页面的存放路径

② window;全局设置小程序窗口的外观

③ tabBar;设置小程序底部的 tabBar 效果

④ style;是否启用新版的组件样式

## 1、**全局配置 -** window

### 1. 小程序窗口的组成部分

<img src="https://chensh888.com:8090/file/blog/2023/20230213132409.png" alt="image-20230213132407513" style="zoom: 80%;" />

### 2.window 节点常用的配置项

|	属性名	|	类型	|	默认值	|	说明|
| ---- | ---- | ---- | ---- |
|	navigationBarTitleText	|	String	|	字符串	|	导航栏标题文字内容|
|	navigationBarBackgroundColor	|	HexColor	|	#000000	|	导航栏背景颜色，如 #000000|
|	navigationBarTextStyle	|	String	|	white	|	导航栏标题颜色，仅支持 black / white|
|	backgroundColor	|	HexColor	|	#ffffff	|	窗口的背景色|
|	backgroundTextStyle	|	String	|	dark	|	下拉 loading 的样式，仅支持 dark / light|
|	enablePullDownRefresh	|	Boolean	|	false	|	是否全局开启下拉刷新|
|	onReachBottomDistance	|	Number	|	50	|	页面上拉触底事件触发时距页面底部距离，单位为 px|

## 2、**全局配置 -** tabBar

### 1. 什么是 tabBar

tabBar 是移动端应用常见的页面效果，用于实现多页面

的快速切换。小程序中通常将其分为：

- 底部 tabBar

- 顶部 tabBar

![image-20230213140808945](https://chensh888.com:8090/file/blog/2023/20230213140811.png)

**注意**：

- tabBar中只能配置最少 2 个、最多 5 个 tab 页签

- 当渲染顶部 tabBar 时，不显示 icon，只显示文本

### **2. tabBar** 的个组成部分

①backgroundColor：tabBar 的背景色

②selectedIconPath：选中时的图片路径

③borderStyle：tabBar 上边框的颜色

④iconPath：未选中时的图片路径

⑤selectedColor：tab 上的文字选中时的颜色

⑥color：tab 上文字的默认（未选中）颜色

![image-20230213140854858](https://chensh888.com:8090/file/blog/2023/20230213140856.png)

### 3.tabBar节点的配置项
|	属性	|	类型	|	必填	|	默认值	|	描述
| ---- | ---- | ---- | ---- | ---- 
|	position	|	String	|	否	|	bottom	|	tabBar 的位置，仅支持 bottom/top
|	borderStyle	|	String	|	否	|	black	|	tabBar 上边框的颜色，仅支持 black/white
|	color	|	HexColor	|	否	|		|	tab 上文字的默认 (未选中) 颜色
|	selectedColor	|	HexColor	|	否	|		|	tab 上的文字选中时的颜色
|	backgroundColor	|	HexColor	|	否	|		|	tabBar 的背景色
|	list	|	Array	|	是	|		|	tab 页签的列表,最少 2个、最多 5个 tab

### 4.每个tab项的配置选项

|	属性	|	类型	|	必填	|	描述|
| ---- | ---- | ---- | ---- |
|	pagePath	|	String	|	是	|	页面路径，页面必须在 pages 中预先定义|
|	text	|	String	|	是	|	tab 上显示的文字|
|	iconPath	|	String	| 否 |	未选中时的图标路径;当 postion 为 top 时，不显示 icon|
|	selectedlconPath	|	String	| 否 |	选中时的图标路径;当 postion 为 top 时，不显示 icon|

# 四、页面配置

## 1、页面配置文件的作用

小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

## 2、页面配置和全局配置的关系
小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。  
如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求。

注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

## 3、页面配置中常用的配置项

|	属性	|	类型	|	默认值	|	描述|
| ---- | ---- | ---- | ---- |
|	navigationBarBackgroundColor	|	HexColor	|	#000000	|	当前页面导航栏背景颜色，如 #000000|
|	navigationBarTextStvle	|	String	|	white	|	当前页面导航栏标题颜色，仅支持 black / white|
|	navigationBarTitleText	|	String	|		|	当前页面导航栏标题文字内容|
|	backgroundColor	|	HexColor	|	#ffffff	|	当前页面霞凑豺妇洁柄剥鞍啊鞍搬记绷齿北居傲的背景色|
|	backgroundTextStyle	|	String	|	dark	|	当前页面下拉 loading 的样式，仅支持 dark / light|
|	enablePullDownRefresh	|	Boolean	|	FALSE	|	是否为当前页面开启下拉刷新的效果|
|	onReachBottomDistance	|	Number	|	50	|	页面上拉触底事件触发时距页面底部距离，单位为 px|

微信小程序-模板与配置

遇到前端传入16进制颜色,如 #000000，而后台PDF处理需要RGB,所以需要把16进制转换为RGB。



#### 1、iText7官方依赖自带了转换类

```
导入iText7全家桶依赖
<dependency>
            <groupId>com.itextpdf</groupId>
            <artifactId>itext7-core</artifactId>
            <version>${itextpdf.version}</version>
            <type>pom</type>
        </dependency>
```
####  2、通过WebColors类转换

```
package com.itextpdf.kernel.colors;

DeviceRgb rgbColor = WebColors.getRGBColor("#FF0000");
```

iText7通过16进制颜色转换RGB

日常使用Typora写博客,遇到图片需要手动上传的服务器映射,Typora软件新版本支持自定义上传到图床本篇记录上传到本人服务器中。


> 实现步骤(java实现):
>
> 1、Typora使用Custom Command,请求到本地jar包main方法中，请求参数为本地图片路径
>
> 2、jar包拿到本地图片路径,请求服务器上传文件接口
>
> 3、服务器存储,并且返回url映射地址
>
> 话不多说,直接撸代码~~~

### 一、本地jar包

#### 1、idea创建SpringBoot空项目,可以不勾选任何依赖

<img src="https://chensh888.com:8090/file/blog/2023/20230117183909.png" alt="image-20230117183906997" style="zoom:50%;" />

#### 2、pom.xml配置，导入hutool包。(直接使用我的)

```
<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-logging</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.3.10</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.12.0</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
    </dependencies>
```

#### 3、创建类TyporaUploadFile，mian方法使用hutool上传到服务器接口

```
import cn.hutool.core.io.FileUtil;
import cn.hutool.http.HttpUtil;

import java.util.Arrays;
import java.util.HashMap;

/**
 * @author Chen Shaohua
 * @date 2023/1/17 15:44
 */
public class TyporaUploadFile {
    public static void main(String[] args) {
        System.out.println("本地文件:" + Arrays.toString(args));
        if (args.length == 0) return;
        for (String filePath : args) {
            HashMap<String, Object> paramMap = new HashMap<>();
            paramMap.put("file", FileUtil.file(filePath));
            String post = HttpUtil.post("Http://服务器地址:8090/file/saveFile", paramMap);
            System.out.println(post);
        }
    }
}
```

#### 4、编译jar包配置

**右上角File -> Project Structure**

![image-20230117184435403](https://chensh888.com:8090/file/blog/2023/20230117184641.png)
***
**Artifacts - > 右边+号 -> 选择第二个**

<img src="https://chensh888.com:8090/file/blog/2023/20230117184638.png" alt="image-20230117184636190" style="zoom: 80%;" />

***

**编译设置,选择后点ok**

<img src="https://chensh888.com:8090/file/blog/2023/20230117185151.png" alt="image-20230117185149811" style="zoom: 80%;" />

***

**设置完成如下**

<img src="https://chensh888.com:8090/file/blog/2023/20230117185231.png" alt="image-20230117185229931" style="zoom: 80%;" />

#### 5、编译

**最上方菜单栏点击,build -> build Artifacts -> 如图下 -> build**

![image-20230117185427395](https://chensh888.com:8090/file/blog/2023/20230117185430.png)

#### 6、编辑后jar包,放到自己常用位置

![image-20230117185503328](https://chensh888.com:8090/file/blog/2023/20230117191347.png)

### 二、服务器上传文件接口

#### 1、config配置与本地文件映射

**地址为需要和本地那个文件夹配置映射,不懂百度有详解**

<a style="color:red">注:必须以/结尾，否则上传文件完成后,url访问不到,404</a>

![image-20230117185825760](https://chensh888.com:8090/file/blog/2023/20230117191351.png)

```
package com.example.aliyuntest.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    //跨域配置，前端和后端端口不一样
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //8080前端使用的端口号
        registry.addMapping("/**");
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/file/**").addResourceLocations("file:/myData/testPro/fileTemp/");
    }
}
```



#### 2、Controller编写上传接口

```
package com.example.aliyuntest.controller;

import cn.hutool.core.date.DatePattern;
import cn.hutool.core.date.DateUtil;
import cn.hutool.core.io.FileUtil;
import cn.hutool.json.JSONObject;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;

/**
 * @author Chen Shaohua
 * @date 2022/11/15 16:53
 */
@RestController
@RequestMapping("/file")
@CrossOrigin
@Slf4j
public class FileController {

    @RequestMapping(value = "/saveFile")
    public String paddleOcr(MultipartFile file,  HttpServletRequest request) {
        if (file ==null || file.isEmpty()) {
            return "文件为空!";
        }
        String url = "http://服务器地址:" + request.getLocalPort() + "/file/";
        try {
            String name = file.getOriginalFilename();
            //获取主文件名 文件后缀
            String suffix = FileUtil.getSuffix(name);
            //文件名称为日期时间简写,如:20230117190235  年月日时分秒
            String fileName = DateUtil.format(DateUtil.date(), DatePattern.PURE_DATETIME_PATTERN) + "." + suffix;
            //一般情况为 年 月 项目名
            String fileNamePath = DateUtil.format(DateUtil.date(), "yyyy/MM/")+ fileName;;
            //创建父文件夹,不存在创建
            FileUtil.mkdir("/myData/testPro/fileTemp/" + fileNamePath + fileName);
            //创建文件
            File newFile = new File("/myData/testPro/fileTemp/" + fileNamePath  + fileName);
            //写入文件
            file.transferTo(newFile);
            //返回url地址
            return url + fileNamePath;
        } catch (Exception e) {
            log.info("保存文件异常!", e);
            return "保存文件异常!" + e.getMessage();
        }
    }
}
```

#### 3、application.yml配置

```
server:
  port: 8090

spring:
  servlet:
    multipart:
      enabled: true
      max-file-size: 10240MB   #最大文件size
      max-request-size: 10240MB #每次请求最大size
      
logging:
  file:
    name: ./log/logs.log
```

#### 4、完整项目

![image-20230117191519076](https://chensh888.com:8090/file/blog/2023/20230117191520.png)

### 三、Typora配置

打开左上角设置 -> 偏好设置，如图下

命令行代码执行本地jar包的main方法，本地必须配置环境变量(百度一大堆)

```
java -jar jar包放置位置 ...文件路径(可配多个)
```

![image-20230117183350017](https://chensh888.com:8090/file/blog/2023/20230117183352.png)

***

**点击验证图片上传选项测试**

![image-20230117191014242](https://chensh888.com:8090/file/blog/2023/20230117191023.png)

***

**编写时上传**

截屏 -> 粘贴图片 -> 右击图片点击上传

### 四、完整项目已上传到gitee中,欢迎大家使用

配置文件映射路径已做动态配置

[完整代码地址gitee](https://gitee.com/ChenShaoshao/aliyun-test)

Typora使用Custom Command自定义上传图片到图床

微信小程序学习，小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。



# 前序

> 学习微信小程序,记录小程序学习笔记，根据bilibili黑马程序员课程学习，附上链接。
>
> [黑马程序员微信小程序课程链接](https://www.bilibili.com/video/BV1834y1676P/?p=1)

# 一、小程序介绍

**小程序与普通网页开发的区别**

1. 运行环境不同

   网页运行在浏览器环境中 小程序运行在微信环境中

1. API 不同

   由于运行环境的不同，所以小程序中，无法调用DOM 和BOM 的API。但是，小程序中可以调用微信环境提供 的各种API，例如：

- 地理定位

- 扫码

- 支付


3. 开发模式不同

网页的开发模式：浏览器+ 代码编辑器 小程序有自己的一套标准开发模式： 

- 申请小程序开发账号

- 安装小程序开发者工具

- 创建和配置小程序项目


# 二、官网体验小程序

![img](https://chensh888.com:8090/file/blog/2023/20230116160535.png)

# 三、小程序代码构成 - 项目结构

**项目结构**

<div >
<img align=left src="https://chensh888.com:8090/file/blog/2023/20230116160820.png"/>
    
    1. pages 用来存放所有小程序的页面
    2. utils 用来存放工具性质的模块(例如:格式化时间的自定义模块)
    3. app.js 小程序项目的入口文件                             
    4. app.json 小程序项目的全局配置文件                        
    5. app.wxss小程序项目的全局样式文件                         
    6. project.config.json 项目的配置文件                       
    7. sitemap.json 用来配置小程序及其页面是否允许被微信索引
    
</div>

<br><br>

**小程序页面组成部分**  

<div >
<img align=left src="https://chensh888.com:8090/file/blog/2023/20230116161616.png"/>
<span>小程序官方建议把所有小程序的页面，都存放在pages 目录中，以单独的文件夹存在，如图所示:</span>
    
    其中，每个页面由 4 个基本文件组成，它们分别是:
    1. js 文件(页面的脚本文件，存放页面的数据、事件处理函数等)
    2. json 文件(当前页面的配置文件，配置窗口的外观、表现等)
    3. wxml文件(页面的模板结构文件)
    4. wxss 文件(当前页面的样式表文件)
    
</div>
<br><br>

# 四、小程序代码构成 - JSON配置文件

**通过不同的配置文件,可以对小程序项目进行不同级别的配置**  

    小程序项目中有4 种json 配置文件，分别是:
    1.项目根目录中的app.json配置文件
    2.项目根目录中的project.config.json配置文件
    3. 项目根目录中的sitemap.json配置文件
    4. 每个页面文件夹中的.json 配置文件

## 1.  app.json文件

app.json 是当前小程序的**全局配置**，包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab 等。
app.json 配置内容,4 个配置项的作用:：

1. pages：用来记录当前小程序所有页面的路径
2. window: 局定义小程序所有页面的背景色、文字颜色等
3. style: 局定义小程序组件所使用的样式版本
4. sitemapLocation: 来指明 sitemap.json 的位置

<img src="https://chensh888.com:8090/file/blog/2023/20230116162956.png" style="zoom:70%;" />

## 2. project.config.json

project.config.json 是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置，例如：

- setting 中保存了编译相关的配置

- projectname 中保存的是项目名称

- appid 中保存的是小程序的账号 ID


## 3. sitemap.json

> - 微信现已开放小程序内搜索，效果类似于 PC 网页的 SEO。sitemap.json 文件用来配置小程序页面是否允许微信索引。
>
> - 当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。
>
>
> 注意：sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件
>
> project.config.json 的 setting 中配置字段 checkSiteMap 为 false

## ![](https://chensh888.com:8090/file/blog/2023/20230116163420.png)

## 4. 页面的.json

小程序中的每一个页面，可以使用 .json 文件来对本页面的窗口外观进行配置，**页面中的配置项会覆盖**

**app.json 的 window 中相同的配置项**。

# 五、**小程序代码的构成 -** page详解

## 1.WXML 模板

### 1）什么是 WXML

WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作

用类似于网页开发中的 HTML。

### 2）WXML 和 HTML 的区别

#### ① 标签名称不同

- HTML （div, span, img, a）

- WXML（view, text, image, navigator）

#### ②属性节点不同

```
#1、<a href="#">超链接</a>
#2、<navigator url="/pages/home/home"></navigator>
```



#### ③ 提供了类似于 Vue 中的模板语法

- 数据绑定

- 列表渲染

- 条件渲染

## 2.WXSS 样式

### 1）什么是 WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，类似于网页开发中的 CSS。

### 2）WXSS 和 CSS 的区别

#### ① 新增了 rpx 尺寸单位

- CSS 中需要手动进行像素单位换算，例如 rem

- WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算


#### ② 提供了全局的样式和局部样式

- 项目根目录中的 app.wxss 会作用于所有小程序页面

- 局部页面的 .wxss 样式仅对当前页面生效


#### ③ WXSS 仅支持部分 CSS 选择器

- .class 和 #id

- element

- 并集选择器、后代选择器

- ::after 和 ::before 等伪类选择器


## 3.JS 逻辑交互

### 1）.js的作用

一个项目仅仅提供界面展示是不够的，在小程序中，我们通过 .js 文件来处理用户的操作。例如：响应用户的

点击、获取用户的位置等等。

### 2）.js文件的分类

**小程序中的 JS 文件分为三大类，分别是：**

#### ① app.js

是整个小程序项目的入口文件，通过调用 App() 函数来启动整个小程序

#### ② 页面的 .js 文件

是页面的入口文件，通过调用 Page() 函数来创建并运行页面

#### ③ 普通的 .js 文件

是普通的功能模块文件，用来封装公共的函数或属性供页面使用

微信小程序-起步

Docker容器中运行node环境,搭建hexo博客，访问速度太慢太慢了，根据网上hexo优化，图片压缩、文件压缩还是访问慢，页面也不存入缓存。

刚好学习nginx将hexo静态部署，第一次访问首页比之前快很多，后续页面也存入到浏览器缓存，大大提升访问速度，nice！



### 一、安装nginx环境

#### 1、拉取镜像

> docker pull nginx

#### 2、宿主机创建挂载目录

> mkdir -p /home/nginx/conf
> mkdir -p /home/nginx/log
> mkdir -p /home/nginx/html

#### 3、启动容器，将默认的配置复制到本地挂载目录

<h6 style="color:red;">注:复制完conf和conf.d文件会多出一层文件夹,在宿主机把下面一层挪上来,我自己没挪启动会报错。</h6>

```
#生成容器
docker run --name nginx -p 80:80 -d nginx
# 将容器nginx.conf文件复制到宿主机
docker cp nginx:/etc/nginx/nginx.conf /home/nginx/conf/nginx.conf
# 将容器conf.d文件夹下内容复制到宿主机
docker cp nginx:/etc/nginx/conf.d /home/nginx/conf/conf.d
# 将容器中的html文件夹复制到宿主机
docker cp nginx:/usr/share/nginx/html /home/nginx/
```

#### 4、提交一个博客镜像

> 主要是想提交一个新的镜像专门对博客管理，清晰可见。

##### 1) 创建新的容器

```
#删除容器
docker rm -f 镜像id 

docker run \
-p 80:80 \
--name nginx \
-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /home/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /home/nginx/log:/var/log/nginx \
-v /home/nginx/html:/usr/share/nginx/html \
-d nginx:latest
```

##### 2) 提交镜像

![image-20220531210020516](https://chensh888.com:8090/file/blog/2022/20221214164030.jpg)

```
docker commit -a="Chen Shaohua" -m="nginx部署hexo" cc1340b5b5e4 my-blog:1.0
```

##### 3) 启动容器并挂载文件

```
docker run \
-p 80:80 \
--name my-blog \
-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /home/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /home/nginx/log:/var/log/nginx \
-v /home/nginx/html:/usr/share/nginx/html \
-d my-blog:1.0
```

### 二、整合hexo

#### 1、打包hexo

> 打包完成后，目录生成public文件夹

```
hexo clean && hexo g
```

#### 2、上传到nginx的html文件夹下

![image-20220531210020516](https://chensh888.com:8090/file/blog/2022/20221214164320.jpg)

#### 3、修改配置文件nginx.conf

```
http{

    sendfile        on;   #对静态资源的处理比较有效
    tcp_nopush     on;   #如果做静态资源服务器可以打开

    keepalive_timeout  65; #连接保持，占用系统资源少，访问速度快

    #Gzip module
    gzip  on;    #文件压缩默认可以打开

   ...

server{

   ...

	location / {
        root   /usr/share/nginx/html/public; #注意加public 
        index  index.html index.htm;
   		 }
	}
}
```

### 三、查看效果

[我的博客地址欢迎访问!](https://chensh888.com)

![image-20220531210020516](https://chensh888.com:8090/file/blog/2022/20221214164511.jpg)