微信小程序的配置

第二单元 微信小程序配置

一、昨日知识点回顾

---

二、本单元知识点概述

（Ⅰ）指定教材

无

（Ⅱ）知识点概述

---

三、本单元教学目标

（Ⅰ）重点知识目标

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	手指松开后点击态保留时间，单位毫秒

使用：

123456789

  父亲
  儿子

.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 图标

使用：

按钮
按钮
按钮
按钮

2.3.3 Text文本组件

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选，除了text组件之外，其它组件都无法长按选中（已废弃）
user-select	Boolean	false	文本是否可选，该属性会使文本节点显示为 inline-block
space	String	false	显示连续空格，可选值：ensp、emsp、nbsp
decode	Boolean	false	是否解码，可解析   < > & '

• ensp：指的是一个空格的大小为一个英文字母的大小

• emsp：指的是一个空格的大小为一个汉字的大小

• nbsp：指的是一个空格的大小为当前元素的大小

使用：

123456

  1 
  1


  3 
  4


  5 
  6

2.3.4 Input文本输入框组件

属性名	类型	默认值	说明
value	String		输入框的初始内容
type	String	"text"	input 的类型
password	Boolean	false	是否是密码类型
placeholder	String		输入框为空时占位符
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 时不限制最大长度

使用：

2.3.5 Image图片组件

• 常见的属性：

  • src ：支持本地和网络上的图片

  • mode ：指定图片裁剪、缩放的模式

• 注意：image组件默认宽度300px、高度225px

• 更 多 属 性 用 法 请 翻 阅 image 官 方 文 档 ：image | 微信开放文档

使用：

2.4. Wxss中常用的样式问题

2.4.1 wxss

1. 什么是wxss

   • wxss(WeiXin Style Sheets)是一套样式语言，用来决定 WXML 的组件应该怎么显示；

   • wxss 具有 CSS 大部分特性

   • wxss 对 CSS 进行了扩充以及修改，以适应微信小程序的开发

2. wxss扩展的特性

   • 尺寸单位

   • 样式导入

3. wsxx和css的关系

4. wxss目前支持的选择器

   • 标签选择器

   • id选择器

   • class选择器

   • 伪类选择器

   • data-*属性选择器

   • :nth-of-type() 等常用的 css3 选择器

   • 注意：在小程序当中，所有的自定义属性都是以data-开头的

5. 全局样式与局部样式

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

   • 局部样式：在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器

   • 注意：当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式效果！

代码：

123

[data-color="bg-color"] {
  background: #f00;
}

2.4.2 小程序布局单位

1. 什么是rpx尺寸单位

   • rpx（responsive pixel）: 是微信小程序独有的、解决屏幕自适应的尺寸单位

   • 可以根据屏幕宽度进行自适应。不论大小屏幕，规定屏幕宽为750rpx

   • 通过rpx设置元素和字体的大小，小程序在不同尺寸的屏幕上，可以实现自动适配

2.4.3 rpx与px

1. rpx与px之间的换算

   • 以 iPhone6 为例，iPhone6 的屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

   设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
   iPhone5	1rpx = 0.42px	1px = 2.34rpx
   iPhone6	1rpx = 0.5px	1px = 2rpx
   iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

   • 在iPhone6上，如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为 200rpx 和 40rpx

2. rpx和iphone6设计稿的关系

   • 官方建议：开发微信小程序时，设计师可以用 iPhone6 作为视觉稿的标准。如果要根据iPhone6的设计稿， 绘制小程序页面，可以直接把单位从 px 替换为 rpx 。例如，假设iPhone6设计稿上，要绘制一个 宽高为 200px 的盒子，换算为 rpx 为 200rpx

4.4 @import

• 使用 @import 语句可以导入外联样式表；

• 语法格式为：@import “wxss样式表的路径;”

• 注意：@import "路径"后面必须要有分号

2.5. 配置文件

2.5.1 App.json配置文件

1. app.json配置文件的作用

   • 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，它决定了页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等

2. 在app.json配置文件中，最主要的配置节点是

   • pages 数组：配置小程序的页面路径

   • window 对象：用于设置小程序的状态栏、导航条、标题、窗口背景色

   • tabBar 对象：配置小程序的tab栏效果

2.5.2 Pages数组的用法

• pages 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径+文件名信息

• 文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json、 .js、 .wxml 和 .wxss 四个文件进行处理

2.6. 小程序窗口

2.6.1 小程序窗口的组成部分

1. 组成部分

1. window节点常用配置项

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

2.6.2 设置导航栏标题文本

• 步骤：app.json -> window -> navigationBarTitleText

• 实现：app.json中

  {
      "window":{
          "navigationBarTitleText": "积云"
      }
  }

2.6.3 设置导航栏标题样式

• 步骤：app.json -> window -> navigationBarBackgroundColor

• 实现：

  {
      "window":{
          "navigationBarBackgroundColor": "#2b4b6b",
          "navigationBarTitleText": "积云",
          "navigationBarTextStyle":"white", // 设置导航栏标题颜色，默认是black
      }
  }

2.7. 下拉

2.7.1 全局开启下拉刷新功能

• 概念：下拉刷新是移动端的专有名词，通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为

• 步骤：app.json -> window -> 把 enablePullDownRefresh 的值设置为 true

• 实现：

  {
      "window":{
          "navigationBarBackgroundColor": "#2b4b6b",
          "navigationBarTitleText": "积云",
          "navigationBarTextStyle":"white", 
          "enablePullDownRefresh": true,
      }
  }

2.7.2 设置下拉刷新窗口的背景色

• 当全局开启下拉刷新功能之后，默认的窗口背景为白色；如果自定义下拉刷新窗口背景色

• 设置步骤为 : app.json -> window -> 为  backgroundColor 指定 16进制颜色值 #eee

• 实现：app.json

  {
      "window":{
          "navigationBarBackgroundColor": "#2b4b6b",
          "navigationBarTitleText": "积云",
          "navigationBarTextStyle":"white",
          "enablePullDownRefresh": true,
          "backgroundColor": "#eee"
      }
  }

2.7.3 设置下拉loading的样式

• 当全局开启下拉刷新功能之后，默认窗口的loading样式为白色，如果要更改loading样式的效果

• 设置步骤为 app.json -> window -> 为 backgroundTextStyle 指定 dark 值

• 实现：app.json

  {
      "window":{
          "backgroundTextStyle":"dark", // 默认是light
          "navigationBarBackgroundColor": "#2b4b6b",
          "navigationBarTitleText": "积云",
          "navigationBarTextStyle":"white",
          "enablePullDownRefresh": true,
          "backgroundColor": "#eee"
      }
  }

2.7.4 设置上拉触底的距离

• 概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为

• 步骤：app.json -> window -> 为  onReachBottomDistance 设置新的数值

• 注意：默认距离为50px，如果没有特殊需求，建议使用默认值即可

• 实现：app.json

  {
      "window":{
          "backgroundTextStyle":"dark", // 默认是light
          "navigationBarBackgroundColor": "#2b4b6b",
          "navigationBarTitleText": "积云",
          "navigationBarTextStyle":"white",
          "enablePullDownRefresh": true,
          "backgroundColor": "#eee",
          "onReachBottonDistance": 100
      }
  }

2.7.5 Tabbar的使用与配置

1. 什么是tabBar

   • tabBar是移动端常见的页面配置，用于实现多页面的快速切换。小程序中常见的tabBar分为两种

     • 顶部tabBar

     • 底部tabBar

   • 注意事项

     • tabBar中，只能配置最少2个，最多5个签页

     • 顶部tabBar不显示icon图标

2. tabBar属性

   属性	类型	必填	默认值	描述	最低版本
   color	HexColor	否		tab 上的文字默认颜色，仅支持十六进制颜色
   selectedColor	HexColor	否		tab 上的文字选中时的颜色，仅支持十六进制颜色
   backgroundColor	HexColor	否		tab 的背景色，仅支持十六进制颜色
   borderStyle	string	否	black	tabbar 上边框的颜色， 仅支持 black / white
   list	Array	是		tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
   position	string	否	bottom	tabBar 的位置，仅支持 bottom / top

   其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下

   属性	类型	必填	说明
   pagePath	string	是	页面路径，必须在 pages 中先定义
   text	string	是	tab 上按钮文字
   iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
   selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。

3. tabBar属性与页面的对应关系

4. 配置tabBar案例

   步骤：

   1. 拷贝资源

   2. 新建4个tabBar对应的页面

   3. 配置tabBar选项

   代码实现：

   1. 通过app.json中的pages节点，快速新建4个tab页面

      "pages":[
          "pages/home/home",
          "pages/cate/cate",
          "pages/cart/cart",
          "pages/my/my"
      ]

   2. 在app.json中，与window同级来配置tabBar属性

      "tabBar": {
          "list": [{
            "pagePath": "pages/home/home",
            "text": "首页",
            "iconPath": "/static/tab_icons/home.png",
            "selectedIconPath": "/static/tab_icons/home-active.png"
          },
          {
            "pagePath": "pages/cate/cate",
            "text": "分类",
            "iconPath": "/static/tab_icons/cate.png",
            "selectedIconPath": "/static/tab_icons/cate-active.png"
          },
          {
            "pagePath": "pages/cart/cart",
            "text": "购物车",
            "iconPath": "/static/tab_icons/cart.png",
            "selectedIconPath": "/static/tab_icons/cart-active.png"
          },
          {
            "pagePath": "pages/my/my",
            "text": "我的",
            "iconPath": "/static/tab_icons/my.png",
            "selectedIconPath": "/static/tab_icons/my-active.png"
          }],
          "selectedColor": "#C00",
          "position": "top" // 顶部tabBar，默认是bottom
      }

2.8. 页面配置

2.8.1 页面配置与局部配置的关系

• 小程序的页面级别配置优先于全局配置

2.8.2 页面配置属性

1. 页面配置与全局配置的关系

   • 小程序中，app.json 中的 window节点，可以全局配置小程序中每个页面的窗口表现；

   • 如果某些小程序页面，想要拥有特殊的窗口表现，此时，“页面级别的.json配置文件”就可以实现这种需求

   • 页面级别配置优先于全局配置生效

2. 页面配置可选的配置项列表

   属性	类型	默认值	描述
   navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
   navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
   navigationBarTitleText	String		导航栏标题文字内容
   backgroundColor	HexColor	#ffffff	窗口的背景色
   backgroundTextStyle	String	dark	下拉loading的样式，仅支持 dark / light

3. 注意：页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现。

2.9. 生命周期

2.9.1 小程序生命周期概念

• 生命周期（Life Cycle）是指一个对象从 创建 -> 运行 -> 销毁 的整个阶段，强调的是一个时间段

2.9.2 小程序生命周期的两种类型

• 在小程序中，包含两种类型的生命周期

• 应用生命周期：特指小程序从启动 -> 运行 -> 销毁的过程；

• 页面生命周期：特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程；

2.9.3 小程序生命周期函数

1. 什么是生命周期函数

   • 生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行

2. 生命周期函数的作用

   • 允许程序员在特定的生命周期时间点上，执行某些特定的操作。例如，页面刚加载的时候， 在生命周期函数中自动发起数据请求，获取当前页面的数据

3. 注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

2.9.4 应用生命周期函数

• app.js 是小程序执行的入口文件，在 app.js 中必须调用 App() 函数，且只能调用一次。其中，App() 函数是用 来注册并执行小程序的。

• App(Object) 函数接收一个Object参数，可以通过这个Object参数，指定小程序的生命周期函数。

1. 小程序应用生命周期函数示例

   App({
       // 小程序初始化完成时，执行此函数，可以做一些初始化的工作。
       onLaunch: function(options) {},
       // 小程序显示到屏幕上的时候，执行此函数。
       onShow	: function(options) {},
       // 小程序被最小化的时候，执行此函数。
       onHide	: function() {}
   })

2. 应用生命周期函数表

   属性	类型	描述	触发时机
   onLaunch	Function	生命周期回调 - 监听小程序初始化	小程序初始化完成时（全局只触发一次）
   onShow	Function	生命周期回调 - 监听小程序显示	小程序启动，或从后台进入前台显示时
   onHide	Function	生命周期回调 - 监听小程序隐藏	小程序从前台进入后台时

1. 页面生命周期函数

   • 每个小程序页面，必须拥有自己的 .js 文件，且必须调用 Page() 函数，否则报错。其中Page() 函数用来注册小程序页面。

   • Page(Object) 函数接收一个Object参数，可以通过这个Object参数，指定页面的生命周期函数。

2. 页面生命周期函数表

   属性	类型	描述
   onLoad	Function	生命周期回调 - 监听页面加载
   onShow	Function	生命周期回调 - 监听页面显示
   onReady	Function	生命周期回调 - 监听页面初次渲染完成
   onHide	Function	生命周期回调 - 监听页面隐藏
   onUnload	Function	生命周期回调 - 监听页面卸载

3. 小程序页面生命周期示例：

   Page({
   	onLoad: function() { // 监听页面加载
           consolelog('load')
       },
       onReady: function() { // 监听页面初次渲染完成
       	console.log('ready')
   	},
       onShow: funciton() { // 监听页面显示
       	console.log('show')
   	},
       onHide: function() { // 监听页面隐藏
           console.log('hide')
       },
       onUnload: function() { // 监听页面卸载
           console.log('unload')
       }
   })

   五、本单元知识总结

   1.明白下单的流程

   ---

   六、作业安排

   （Ⅰ）课后作业

（ Ⅱ ）预习作业

预习附录：

​