微信小程序-页面开发

文章目录

  • 微信小程序第二章
    • 2. 页面开发
      • 2.1 创建开发页面
      • 2.2 修改项目首页
      • 2.3 页面的结构和样式设计
        • 2.3.1 WXML结构设计
          • 2.3.1.1 什么是WXML
          • 2.3.1.2 WXML的常见标签
          • 2.3.1.3 WXML的特点
        • 2.3.2 WXSS样式设计
          • 2.3.2.1 什么是WXSS
      • 2.4 组件库的使用和自定义组件
        • 2.4.1 小程序中的组件分类
        • 2.4.2 view 组件
          • 2.4.2.1 flex 横向居中布局效果图
          • 2.4.2.2 demo.wxml
          • 2.4.2.3 demo.wxss
          • 2.4.2.4 flex 纵向居中布局效果图
          • 2.4.2.5 demo.wxml
          • 2.4.2.6 demo.wxss
        • 2.4.3 scroll-view 组件
          • 2.4.3.1 scroll-view 纵向滑动效果图
          • 2.4.3.2 demo.wxml
          • 2.4.3.3 demo.wxss
          • 2.4.3.4 scroll-view 横向滚动效果图
          • 2.4.3.5 demo.wxml
          • 2 .4.3.6 demo.wxss
        • 2.4.4 swiper 组件
          • 2.4.4.1 swiper轮播图效果图
          • 2.4.4.2 demo.wxml
          • 2.4.4.3 demo.wxss
        • 2.4.5 text 组件
          • 2.4.5.1 text 文本选中效果图
          • 2.4.5.2 demo.wxml
          • 2.4.5.3 demo.wxss
        • 2.4.5 rich-text 组件
          • 2.4.5.1 rich-text 富文本效果图
          • 2.4.5.2 demo.wxml
          • 2.4.5.3 demo.wxss
        • 2.4.6 button 组件
          • 2.4.6.1 button效果图
          • 2.4.6.2 demo.wxml
          • 2.4.6.3 button 开放能力效果图
          • 2.4.5.5 demo.wxml
        • 2.4.5 image 组件
          • 2.4.5.1 image效果图
          • 2.4.5.2 demo.wxml
          • 2.4.5.3 demo.wxss
        • 2.4.6 checkbox组件
          • 2.4.6.1 checkbox效果图
          • 2.4.6.2 demo.wxml
        • 2.4.7 radio组件
          • 2.4.7.1 radio效果图
          • 2.4.7.2 demo.wxml
          • 2.4.7.3 demo.wxss
        • 2.4.8 input组件
          • 2.4.8.1 input效果图
          • 2.4.8.2 demo.wxml
          • 2.4.8.3 demo.wxss
        • 2.4.9 from组件
          • 2.4.9.1 from效果图
          • 2.4.9.2 demo.wxml
          • 2.4.9.3 demo.wxss
      • 2.5 数据绑定
        • 2.5.1 绑定内容
        • 2.5.2 动态绑定属性
        • 2.5.3 三元运算
        • 2.5.4 控制属性
        • 2.5.5 算数运算
        • 2.5.6 字符串运算
        • 2.5.7 数据路径运算
        • 2.5.8 列表渲染
      • 2.6 事件绑定
        • 2.6.1 点击事件(bindtap )
          • 2.6.1.1 demo.wxml
          • 2.6.1.2 demo.wxss
          • 2.6.1.3 demo.js
        • 2.6.2 阻止冒泡事件(catchtap)
          • 2.6.2.1 demo.wxml
          • 2.6.2.2 demo.js
          • 2.6.2.3 demo.wxss
        • 2.6.3 输入事件 (bindinput)
          • 2.6.3.1 demo.wxml
          • 2.6.3.2 demo.js
          • 2.6.3.2 demo.wxss
        • 2.6.4 失去焦点事件(bindblur)
          • 2.6.4.1 demo.wxml
          • 2.6.4.2 demo.js
          • 2.6.4.3 demo.wxml
        • 2.6.5 按钮事件(bindconfirm)
          • 2.6.5.1 demo.wxml
          • 2.6.5.2 demo.js
          • 2.6.5.3 demo.wxss
        • 2.6.6 触摸事件(bindtouchstart)
          • 2.6.6.1 demo.wxml
          • 2.6.6.2 demo.js
          • 2.6.6.3 demo.wxss
        • 2.6.7 滑动事件(bindtouchmove)
          • 2.6.7.1 demo.wxml
          • 2.6.7.2 demo.js
        • 2.6.8 离开事件(bindtouchend)
          • 2.6.8.1 demo.wxml
          • 2.6.8.2 demo.js
        • 2.6.9 提交表单事件(bindsubmit)
          • 2.6.9.1 demo.wxml
          • 2.6.9.2 demo.js
          • 2.6.9.3 demo.wxss
        • 2.6.10 重置表单事件(bindreset)
          • 2.6.10.1 demo.wxml
          • 2.6.10.2 demo.js
          • 2.6.10.3 demo.wxss
        • 2.6.11 轮播事件(bindchange)
          • 2.6.11.1 demo.wxml
          • 2.6.11.2 demo.js
        • 2.6.12 视频开始/继续事件(bindplay)
          • 2.6.12.1 demo.wxml
          • 2.6.12.2 demo.js
        • 2.6.13 视频暂停事件(bindpause)
          • 2.6.13.1 demo.wxml
          • 2.6.13.2 demo.js
        • 2.6.14 扫码事件(bindscan)
          • 2.6.14.1 demo.wxml
          • 2.6.14.2 demo.js
        • 2.6.15 页面加载事件(onLoad)
        • 2.6.16 页面显示事件(onShow)
        • 2.6.17 页面隐藏事件(onHide)
        • 2.6.18 页面卸载事件(onUnload)
      • 2.7 模板
        • 2.7.1 定义模板
        • 2.7.2 使用模板
        • 2.7.3 模板数据
      • 2.8 引用
        • 2.8.1 import
          • 2.8.1.1 demotemplate.wxml
          • 2.8.1.2 demo.wxml
          • 2.8.1.3 import的作用域
        • 2.8.2 include
          • 2.8.2.1 demo1.wxml
          • 2.8.2.2 demo2.wxml
          • 2.8.2.3 demo.wxml

微信小程序第二章

2. 页面开发

2.1 创建开发页面

可以在app.json文件的pages属性中添加,小程序开发者工具即可自动创建对应的页面文件,

微信小程序-页面开发_第1张图片

2.2 修改项目首页

在app.json文件中将pages属性中的元素前后位置,即可修改项目首页。小程序会把排在第一位的页面,

微信小程序-页面开发_第2张图片

2.3 页面的结构和样式设计

2.3.1 WXML结构设计
2.3.1.1 什么是WXML

WXML(WeiXin Markup Language)是微信小程序框架的模板语言,用于描述小程序的结构。它类似于HTML,但是针对小程序的特性进行了定制和简化。

WXML的基本语法与HTML类似,使用标签和属性来描述页面结构和内容,同时支持数据绑定、事件处理等功能。

  1. 组件化
    • WXML允许将页面拆分成多个组件,每个组件可以包含自己的模板、样式和逻辑。
    • 组件可以通过和标签进行引入和使用,提高代码复用性和可维护性。
  2. 数据绑定
    • WXML支持数据绑定,通过{{}}语法将数据模型中的变量与视图中的元素绑定起来,实现动态展示和交互。
    • 数据绑定可以实现单向绑定和双向绑定,同时支持条件渲染、列表渲染等高级功能。
  3. 事件处理
    • WXML支持事件处理,可以在元素上绑定各种事件(如点击事件、滑动事件等),并执行相应的逻辑。
    • 事件处理可以使用内置的event对象获取事件信息,并通过调用小程序提供的API实现页面交互。
  4. 模板引入
    • WXML支持模板引入,通过标签定义可复用的代码片段,并在需要的地方进行引入和使用。
    • 模板可以传递参数,实现更灵活的组件复用和代码组织。
  5. 样式处理
    • WXML与WXSS结合使用,通过描述页面结构和样式来构建小程序页面。
    • WXSS支持类似CSS的样式语法和特性,同时支持尺寸单位rpx,可以根据屏幕宽度自动适配不同设备。
2.3.1.2 WXML的常见标签
标签 等同于html 功能
view div 最基本的容器组件,用于包裹其他元素或作为页面的根元素。
text span 用于展示文本内容,但不能直接包含其他元素。
image img 用于展示图片,可以设置图片的路径、尺寸、模式等。
button button 用于创建按钮,可以绑定点击事件并执行相应的逻辑。
input input 用于创建输入框,可以接收用户的输入。
navigator a 用于创建页面跳转链接,点击后可以跳转到其他页面。
block div 用于包裹多个元素,但不会渲染为额外的节点。
template template 用于创建模板,可以定义可复用的代码片段,并通过和标签进行引入和使用。
2.3.1.3 WXML的特点
  1. 数据绑定:WXML支持数据绑定,可以通过 {{}} 插值表达式将页面的结构和数据关联起来,实现动态展示内容。
  2. 事件绑定:可以在标签上绑定各种事件处理函数,比如点击事件、滑动事件等,实现用户交互响应。
  3. 组件化:WXML支持组件化开发,可以使用自定义组件,将页面拆分为多个可复用的组件,提高代码的可维护性和复用性。
  4. 模板引入:支持通过 标签引入外部模板文件,实现页面结构的复用。
  5. 微信小程序特有标签:WXML中包含一些特有的标签,用于引入小程序的内置组件、模板和wxs脚本等。
2.3.2 WXSS样式设计
2.3.2.1 什么是WXSS

WXSS(WeiXin Style Sheets)是微信小程序框架的样式语言,用于定义小程序页面的样式和布局。类似于CSS,但有一些微信小程序特定的语法和特性。

以下是WXSS的一些基本特性和用法:

  1. 选择器
    • WXSS支持类似CSS的选择器,用于选中页面上的元素,并对其应用样式。
    • 常见的选择器包括标签选择器、类选择器、ID选择器等,可以通过组合使用实现更精确的选择。
  2. 样式属性
    • WXSS支持一系列样式属性,可以设置元素的尺寸、颜色、字体、背景等样式效果。
    • 常见的样式属性包括width、height、color、font-size、background-color等。
  3. 尺寸单位
    • WXSS引入了一种特殊的尺寸单位rpx(responsive pixel),用于实现屏幕自适应。
    • rpx会根据屏幕宽度进行换算,1rpx约等于屏幕宽度的1/750。
  4. 样式导入
    • WXSS支持样式文件的导入,通过@import语句可以引入其他WXSS文件,实现样式的复用和模块化。
  5. 样式继承
    • WXSS支持样式的继承,可以通过@extend语句将一个选择器的样式应用到另一个选择器上,减少重复的样式定义。
  6. 伪类和伪元素
    • WXSS支持一些常见的伪类和伪元素,如:hover、:first-child等,用于选中元素的特定状态或位置。

2.4 组件库的使用和自定义组件

2.4.1 小程序中的组件分类
  • 基础视图组件
    • 用于构建页面的基本结构和布局
    • 视图容器(view,scroll-view,)文本(text),图片(image),按钮(button)等
  • 表单组件
    • 用于手机用户输入的表单数据
    • 输入框(input)、多行输入框(textarea)、复选框(checkbox)、单选框(radio)、开关(switch)等。
  • 列表渲染组件
    • 用于根据数据动态渲染列表
    • 列表容器(例如 scroll-view、swiper)、列表项(例如 block、template)、下拉刷新(pull-down-refresh)等。
  • 媒体组件
    • 用于处理多媒体内容
    • 音频(audio)、视频(video)、图片预览(image-preview)、相机(camera)等。
  • 交互反馈组件
    • 用于提供用户交互的反馈效果
    • 模态弹窗(modal)、加载提示(loading)、操作菜单(action-sheet)、消息提示(toast)、进度条(progress)等。
  • 导航组件
    • 用于页面之间的导航和跳转
    • 导航栏(navigation-bar)、标签栏(tabbar)、页面跳转(navigator)等。
  • 地图组件
    • 用于显示地图和处理地理位置信息
    • 地图(map)、定位(location)等。
  • 画布组件
    • 用于绘制图形和实现动画效果
    • 画布(canvas)等
2.4.2 view 组件

组件是最基础的组件之一,用于布局和展示内容。它类似于 HTML 中的

元素,可以设置宽高、背景色、边框、内外边距等样式属性,并且可以嵌套其他组件。

2.4.2.1 flex 横向居中布局效果图

微信小程序-页面开发_第3张图片

2.4.2.2 demo.wxml
<view class="container1">
  <view>Aview>
  <view>Bview>
  <view>Cview>
view>
2.4.2.3 demo.wxss
.container1 view{
  /* 宽度 */
  width: 100px;
  /* 高度 */
  height: 100px;
  /* 文本居中对齐 */
  text-align: center;
  /* 行间距 */
  line-height: 100px;
}

/* 选择第一个view组件 */
.container1 view:nth-child(1){
  /* 背景颜色 */
  background-color: rgb(255, 255, 0);
}

/* 选择第二个view组件 */
.container1 view:nth-child(2){
  /* 背景颜色 */
  background-color: rgb(255, 0, 0);
}

/* 选择第三个view组件 */
.container1 view:nth-child(3){
  /* 背景颜色 */
  background-color: rgb(73, 255, 1);
}

.container1{
  /* 弹性布局,使得子组件可以水平排列 */
  display: flex; 
  /* 平均分布在容器中,子组件之间有空隙 */
  justify-content: space-around;
  /* 垂直居中 */
  align-items: center; 
  /* 设置高度为整个屏幕高度 */
  height: 100vh; 
}
2.4.2.4 flex 纵向居中布局效果图

微信小程序-页面开发_第4张图片

2.4.2.5 demo.wxml
<view class="container">
  <view class="item">Aview>
  <view class="item">Bview>
  <view class="item">Cview>
view>
2.4.2.6 demo.wxss
.container {
	/* 弹性布局,使得子组件可以水平排列 */
	display: flex;
	/* 平均分布在容器中,子组件之间平均分散排列 */
	justify-content: space-between;
	/* 垂直方向上居中对齐 */
	align-items: center;
	/* 高度 */
	height: 100px;
	/* 内边距 */
  padding: 100px;
}

.container view {
	/* 宽度 */
	width: 100px;
	/* 高度 */
	height: 100px;
	/* 背景颜色 */
	background-color: rgb(255, 255, 255);
	/* 边框 */
	border: 1px solid #ccc;
	/* 圆角半径 */
	border-radius: 4px;
	/* 文本内容居中对齐 */
	text-align: center;
	/* 内文本内容的行高 */
  line-height: 100px;
}
2.4.3 scroll-view 组件

组件用于实现滚动视图区域,当内容超过组件的显示区域时,可以滚动查看隐藏部分的内容。它是小程序中常用的滚动容器组件之一。

  • scroll-y属性:允许纵向滚动

  • scroll-x属性:允许纵向滚动

2.4.3.1 scroll-view 纵向滑动效果图

微信小程序-页面开发_第5张图片

2.4.3.2 demo.wxml
<scroll-view class="container1"  scroll-y >
	<view>Aview>
	<view>Bview>
	<view>Cview>
scroll-view>
2.4.3.3 demo.wxss
.container1 view{ 
	float: left;
  /* 宽度 */
  width: 100px;
  /* 高度 */
  height: 100px;
  /* 文本居中对齐 */
  text-align: center;
  /* 行间距 */
  line-height: 100px;
}

/* 选择第一个view组件 */
.container1 view:nth-child(1){
  /* 背景颜色 */
  background-color: rgb(255, 255, 0);
}

/* 选择第二个view组件 */
.container1 view:nth-child(2){
  /* 背景颜色 */
  background-color: rgb(255, 0, 0);
}

/* 选择第三个view组件 */
.container1 view:nth-child(3){
  /* 背景颜色 */
  background-color: rgb(73, 255, 1);
}

.container1{
	/*  边框 */
	border: 1px solid red;
	 height:100px;
	width: 100px; 
}
2.4.3.4 scroll-view 横向滚动效果图

微信小程序-页面开发_第6张图片

2.4.3.5 demo.wxml
<scroll-view class="container" scroll-x >
  <view>Aview>
  <view>Bview>
  <view>Cview>
scroll-view>
2 .4.3.6 demo.wxss
.container {
	/* 防止子元素换行,使得子元素在一行内显示。 */
	white-space: nowrap;
	/* 横向滚动,当内容超出容器的宽度时,会显示滚动条进行滚动。 */
	overflow-x: scroll;
	/* 容器添加内边距,使内容与容器边界产生一定的间距。 */
	padding: 20px;
	/* 容器的背景颜色 */
  background-color: #f2f2f2;
}

.container view {
	/* 元素设置为行内块级元素,使其在一行内水平排列。 */
	display: inline-block;
	/* 宽度 */
	width: 200px;
	/* 高度 */
	height: 100px;
	/* 元素的背景颜色 */
	background-color: #fff;
	/* 右侧边距,使子元素之间产生一定的间距 */
	margin-right: 10px;
	/* 文本内容居中对齐 */
	text-align: center;
	/* 文本内容的行高为 100px,使其在垂直方向上居中对齐。 */
  line-height: 100px;
}
2.4.4 swiper 组件

用于创建轮播组件,可以展示多张图片或其他内容的轮播效果

属性

属性 属性值 作用
indicator-dots true 显示轮播图提示点
false 隐藏轮播图提示点
indicator-color 颜色 指示点颜色
indicator-active-color 颜色 当前选中的指示点颜色
autoplay true 自动播放轮播图
false 不自动播放轮播图
interval 任意整数值 自动切换的时间间隔(单位为毫秒)
duration 任意整数值 轮播项切换的动画时长(单位为毫秒)
circular true 采用衔接滑动
false 不采用衔接滑动

用于包裹每个轮播项的容器。容器内可以放置一个轮播项的内容,例如图片、文本等。

2.4.4.1 swiper轮播图效果图

微信小程序-页面开发_第7张图片

2.4.4.2 demo.wxml






<swiper class="swiper-container" indicator-dots="{{true}}" autoplay="true" interval="1000" duration="500" circular="ture">
    
	<swiper-item>
		<view>Aview>
	swiper-item>
     
	<swiper-item>
		<view>Bview>
	swiper-item>
     
	<swiper-item>
		<view>Cview>
	swiper-item>
swiper>
2.4.4.3 demo.wxss
/* 设置轮播图样式 */
.swiper-container{
	/* 轮播图容器高度 */
	height: 150px;
}

/* 设置轮播项子元素样式 */
.swiper-container swiper-item view{
	/* 子元素的高度 */
	height: 100%;
	/* 子元素内容的行高 */
	line-height: 150px;
	/* 子元素文本内容居中 */
	text-align: center;
}

/* 第一个轮播项子元素样式 */
swiper-item:nth-child(1) view{
	background-color: lemonchiffon;
}

/* 第二个轮播项子元素样式 */
swiper-item:nth-child(2) view{
	background-color: rgb(0, 255, 42);
}

/* 第三个轮播项子元素样式 */
swiper-item:nth-child(3) view{
	background-color: rgb(174, 0, 255);
}
2.4.5 text 组件

组件用于显示文本内容,类似于 HTML 中的 元素或

元素。它可以用来展示静态文本、动态文本或者与其他组件结合使用。

selectable属性:用于控制文本是否选中(已废弃)

user-select属性:用于控制文本是否选中

2.4.5.1 text 文本选中效果图

微信小程序-页面开发_第8张图片

2.4.5.2 demo.wxml
<view>
长按<text user-select>Hellotext>选中
view>
2.4.5.3 demo.wxss
view{
    /* 上边距 */
	border-top: 50px solid black;
}
2.4.5 rich-text 组件

组件可以用于展示富文本内容,支持显示 HTML 标签和一些特定的样式。

nodes属性:用于指定要显示的富文本内容。nodes属性是一个数组,每个元素可以是一个字符串或一个对象,用来描述不同的节点类型。

2.4.5.1 rich-text 富文本效果图

微信小程序-页面开发_第9张图片

2.4.5.2 demo.wxml
<view>
<rich-text nodes="

标题

"
/>
view>
2.4.5.3 demo.wxss
view{
    /* 上边距 */
	border-top: 50px solid black;
}
2.4.6 button 组件