第二单元 微信小程序配置
一、昨日知识点回顾
二、本单元知识点概述
(Ⅰ)指定教材
无
(Ⅱ)知识点概述
三、本单元教学目标
(Ⅰ)重点知识目标
1.小程序常用的内置UI组件 2.小程序常用的全局配置和页面配置 3.小程序的生命周期函数
(Ⅱ)能力目标
1.掌握小程序常用的内置UI组件 2.掌握小程序常用的全局配置和页面配置 3.掌握小程序的生命周期函数
四、本单元知识详讲
2.1. 小程序项目结构
2.1.1 项目结构简介
-
小程序页面项目结构简介
注意:
-
对于小程序来说:app.js 和 app.json 文件是必须的
-
对于小程序的页面来说:.js 和 .wxml 文件是必须的
-
-
小程序页面和vue组件的对比
-
每个.vue组件,是由 template 模板结构、script 行为逻辑、 style 样式3个部分组成的
-
每个小程序的页面,是由 .wxml 结构、.js 逻辑、.json 配置、.wxss 样式表 这4个文件组成的
-
2.2 小程序页面
2.2.1 小程序页面结构
-
小程序页面中每个组成部分的作用
-
.wxml : 用来描述当前这个页面的结构,同时提供了类似于Vue中指令的语法
-
.js : 用来定义当前页面中用到的数据、交互逻辑和响应用户的操作
-
.json : 用来定义当前页面的个性化配置,例如,为每个页面单独配置顶部颜色、是否允许下拉刷新等
-
.wxss : 用来定义样式来美化当前的页面
-
-
创建自己的小程序页面
-
在 pages 目录上右键,选择 “新建目录”,并将目录命名为 home
-
在新建的 home 目录上右键,选择 “新建page”,并将页面命名为 home
注意:选择“新建page”后,开发者工具会自动创建页面相关的4个文件
-
-
设置小程序的默认首页
-
打开 app.json 全局配置文件,找到 pages 节点。这个 pages 节点 是一个数组,存储了项目中所有页面的访问路径。其中,pages 数组中第一个页面路径,就是小程序项目的默认首页
-
修改 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 |