微信小程序的配置

第二单元 微信小程序配置

一、昨日知识点回顾

---

二、本单元知识点概述

（Ⅰ）指定教材

无

（Ⅱ）知识点概述

---

三、本单元教学目标

（Ⅰ）重点知识目标

1.小程序常用的内置UI组件
2.小程序常用的全局配置和页面配置
3.小程序的生命周期函数

（Ⅱ）能力目标

1.掌握小程序常用的内置UI组件
2.掌握小程序常用的全局配置和页面配置
3.掌握小程序的生命周期函数

---

四、本单元知识详讲

2.1. 小程序项目结构

2.1.1 项目结构简介

1. 小程序页面项目结构简介

   注意：

   • 对于小程序来说：app.js 和 app.json 文件是必须的

   • 对于小程序的页面来说：.js 和 .wxml 文件是必须的

2. 小程序页面和vue组件的对比

   • 每个.vue组件，是由 template 模板结构、script 行为逻辑、 style 样式3个部分组成的

   • 每个小程序的页面，是由 .wxml 结构、.js 逻辑、.json 配置、.wxss 样式表 这4个文件组成的

2.2 小程序页面

2.2.1 小程序页面结构

1. 小程序页面中每个组成部分的作用

   • .wxml : 用来描述当前这个页面的结构，同时提供了类似于Vue中指令的语法

   • .js : 用来定义当前页面中用到的数据、交互逻辑和响应用户的操作

   • .json : 用来定义当前页面的个性化配置，例如，为每个页面单独配置顶部颜色、是否允许下拉刷新等

   • .wxss : 用来定义样式来美化当前的页面

2. 创建自己的小程序页面

   1. 在 pages 目录上右键，选择 “新建目录”，并将目录命名为 home

   2. 在新建的 home 目录上右键，选择 “新建page”,并将页面命名为 home

   注意：选择“新建page”后，开发者工具会自动创建页面相关的4个文件

3. 设置小程序的默认首页

   1. 打开 app.json 全局配置文件，找到 pages 节点。这个 pages 节点 是一个数组，存储了项目中所有页面的访问路径。其中，pages 数组中第一个页面路径，就是小程序项目的默认首页

   2. 修改 pages 数组中路径的顺序，即可修改小程序的默认首页

注意：在小程序页面的.js文件当中，即使我们没有任何的逻辑要写，也要在js文件中写一个页面初始化的Page({})函数

// pages/index.js
Page({
    
})

2.3. 小程序组件

• 小程序提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼合成自己的小程序。

• 小程序中的组件，就像HTML中的div，p标签的作用一样，用于搭建页面的基础结构。

• 注意：小程序中的所有组件标签都必须闭合

2.3.1 View视图容器组件用法

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop- propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击状态
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

使用：

<view hover-class="v1" hover-start-time="2000" hover-stay-time="2000">123456789</view>
<view hover-class="v1">
  父亲
  <view hover-class="v2" hover-stop-propagation>儿子</view>
</view>

.v1 {
  background: #f00;
}
.v2 {
  background: #ff0;
}

2.3.2 Button按钮组件的用法

属性名	类型	默认值	说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标

使用：

<button type="default" size="mini">按钮</button>
<button type="primary" size="mini">按钮</button>
<button plain type="warn" size="mini">按钮</button>
<button size="mini">按钮</button>

2.3.3 Text文本组件

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选，除了text组件之外，其它组件都无法长按选中（已废弃）
user-select	Boolean	false	文本是否可选，该属性会使文本节点显示为 inline-block
space	String	false