微信小程序-页面开发

已于 2024-05-10 17:40:39 修改
阅读量1.9k 收藏 35
点赞数 32
分类专栏： 微信小程序 文章标签： 微信小程序 notepad++ 小程序
于 2024-01-02 08:08:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44715376/article/details/135290374
版权

文章目录

微信小程序第二章

2. 页面开发

2.1 创建开发页面

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

在这里插入图片描述

2.2 修改项目首页

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

在这里插入图片描述

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功能
viewdiv最基本的容器组件，用于包裹其他元素或作为页面的根元素。
textspan用于展示文本内容，但不能直接包含其他元素。
imageimg用于展示图片，可以设置图片的路径、尺寸、模式等。
buttonbutton用于创建按钮，可以绑定点击事件并执行相应的逻辑。
inputinput用于创建输入框，可以接收用户的输入。
navigatora用于创建页面跳转链接，点击后可以跳转到其他页面。
blockdiv用于包裹多个元素，但不会渲染为额外的节点。
templatetemplate用于创建模板，可以定义可复用的代码片段，并通过和标签进行引入和使用。
2.3.1.3 WXML的特点
  1. 数据绑定：WXML支持数据绑定，可以通过 {{}} 插值表达式将页面的结构和数据关联起来，实现动态展示内容。
  2. 事件绑定：可以在标签上绑定各种事件处理函数，比如点击事件、滑动事件等，实现用户交互响应。
  3. 组件化：WXML支持组件化开发，可以使用自定义组件，将页面拆分为多个可复用的组件，提高代码的可维护性和复用性。
  4. 模板引入：支持通过 <import> 和 <include> 标签引入外部模板文件，实现页面结构的复用。
  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 组件

<view> 组件是最基础的组件之一，用于布局和展示内容。它类似于 HTML 中的 <div> 元素，可以设置宽高、背景色、边框、内外边距等样式属性，并且可以嵌套其他组件。

2.4.2.1 flex 横向居中布局效果图

在这里插入图片描述

2.4.2.2 demo.wxml
<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</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 纵向居中布局效果图

在这里插入图片描述

2.4.2.5 demo.wxml
<view class="container">
  <view class="item">A</view>
  <view class="item">B</view>
  <view class="item">C</view>
</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-view> 组件用于实现滚动视图区域，当内容超过组件的显示区域时，可以滚动查看隐藏部分的内容。它是小程序中常用的滚动容器组件之一。

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

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

2.4.3.1 scroll-view 纵向滑动效果图

在这里插入图片描述

2.4.3.2 demo.wxml
<scroll-view class="container1"  scroll-y >
	<view>A</view>
	<view>B</view>
	<view>C</view>
</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 横向滚动效果图

在这里插入图片描述

2.4.3.5 demo.wxml
<scroll-view class="container" scroll-x >
  <view>A</view>
  <view>B</view>
  <view>C</view>
</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 组件

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

属性

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

<swiper-item> 用于包裹每个轮播项的容器。容器内可以放置一个轮播项的内容，例如图片、文本等。

2.4.4.1 swiper轮播图效果图

在这里插入图片描述

2.4.4.2 demo.wxml
<!-- 轮播图 -->
<!-- indicator-dots="{{true}}" 表示面板提示点， 使用了双花括号，是将 JS 表达式 "{{true}}" 嵌入到了 WXML中。-->
<!-- autoplay="true" 表示自动播放 -->
<!-- interval="1000" 表示自动播放间隔时间 -->
<!-- duration="500" 表示切换动画时长 -->
<!-- circular="ture" 表示采用衔接滑动 -->
<swiper class="swiper-container" indicator-dots="{{true}}" autoplay="true" interval="1000" duration="500" circular="ture">
    <!-- 第一个轮播图 -->
	<swiper-item>
		<view>A</view>
	</swiper-item>
     <!-- 第二个轮播图 -->
	<swiper-item>
		<view>B</view>
	</swiper-item>
     <!-- 第三个轮播图 -->
	<swiper-item>
		<view>C</view>
	</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 组件

<text> 组件用于显示文本内容，类似于 HTML 中的 <span> 元素或 <p> 元素。它可以用来展示静态文本、动态文本或者与其他组件结合使用。

selectable属性：用于控制文本是否选中（已废弃）

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

2.4.5.1 text 文本选中效果图

在这里插入图片描述

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

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

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

2.4.5.1 rich-text 富文本效果图

在这里插入图片描述

2.4.5.2 demo.wxml
<view>
<rich-text nodes="<h1>标题</h1>"/>
</view>
2.4.5.3 demo.wxss
view{
    /* 上边距 */
	border-top: 50px solid black;
}
2.4.6 button 组件

<button> 组件用于创建按钮，用户可以点击按钮执行相应的操作。

属性

属性属性值作用
typeprimary按钮具有醒目的样式，适用于主要操作。
default按钮具有普通的样式，适用于次要操作。
warn按钮具有警示的样式，适用于重要的操作。
sizedefault尺寸适用于一般场景。
mini尺寸适用于有限的空间或需要更小的按钮的场景。
disabledtrue禁用按钮
false启用按钮
loadingtrue显示按钮加载状态
false不见时按钮加载状态
from-typesubmit提交表单
reset重置表单
open-typecontact打开客户会话
share用户转发
getPhoneNumber手机验证
getRealtimePhoneNumber手机号实时验证
getUserInfo获取用户信息
launchApp打开app
openSetting打开授权设置页
feedback打开意见反馈页面
chooseAvatar获取用户头像
agreePrivacyAuthorization同意隐私协议按钮
2.4.6.1 button效果图

在这里插入图片描述

2.4.6.2 demo.wxml
<button>普通按钮</button>
<button type="default">默认按钮</button>
<button type="primary">主要按钮</button>
<button type="warn">警告按钮</button>

<button size="mini">普通按钮</button>
<button type="primary" size="mini">主要按钮</button>
<button type="warn" size="mini">警告按钮</button>



<button size="mini" plain="true">普通按钮</button>
<button type="primary" size="mini" plain="true">主要按钮</button>
<button type="warn" size="mini" >警告按钮</button>

<button size="mini" disabled="true">禁用按钮</button>
<button size="mini" loading="true">加载按钮</button>
2.4.6.3 button 开放能力效果图

在这里插入图片描述

2.4.5.5 demo.wxml
<button type="default" open-type="getPhoneNumber">获取手机号</button>
<button type="default" open-type="getRealtimePhoneNumber">申请验证手机号</button>
<button type="default" open-type="contact">打开客服对话</button>
<button type="default" open-type="share">转发</button>
<button type="default" open-type="openSetting">允许授权设置</button>
<button type="default" open-type="feedback">反馈</button>
<button type="default" open-type="chooseAvatar">获取头像</button>
<button type="default" open-type="agreePrivacyAuthorization">获取手机号</button>
2.4.5 image 组件

<image> 组件用于显示图片，支持网络图片和本地图片

属性

属性属性值说明
srcURL指定要显示的图片的地址
modescaleToFill缩放模式，不保持原始宽高比，填充整个视图区域
aspectFit缩放模式，保持原始宽高比，显示完整图片，可能会留有空白
aspectFill缩放模式，保持原始宽高比，填充整个视图区域，可能会裁剪部分内容
widthFix缩放模式，宽度固定，高度自动变化，保持原始宽高比
top裁剪模式，只显示图片的顶部区域
bottom裁剪模式，只显示图片的底部区域
center裁剪模式，只显示图片的中间区域
left裁剪模式，只显示图片的左边区域
right裁剪模式，只显示图片的右边区域
top left裁剪模式，只显示图片的左上边区域
top right裁剪模式，只显示图片的右上边区域
bottom left裁剪模式，只显示图片的左下边区域
bottom right裁剪模式，只显示图片的右下边区域
lazy-loadtrue开启懒加载：当页面滚动到图片位置时，才开始加载图片，提升性能
false关闭懒加载
default-srcURL当图片加载失败时，显示指定的默认图片
2.4.5.1 image效果图

在这里插入图片描述

2.4.5.2 demo.wxml
<image src="/image/java.jpg" mode="widthFix"></image>
2.4.5.3 demo.wxss
image{
	border: 1px solid red;
}
2.4.6 checkbox组件

复选框组件

属性

属性属性值说明
valueStringcheckbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value
disabledtrue禁用选项框
false不禁用复选框
checkedtrue默认选中
false不选中
color颜色字符串checkbox的颜色，同css的color
2.4.6.1 checkbox效果图

在这里插入图片描述

2.4.6.2 demo.wxml
<checkbox-group bindchange="">
	<checkbox disabled="true">唱</checkbox>
	<checkbox checked="true">跳</checkbox>
	<checkbox >rap</checkbox>
</checkbox-group>

注意：checkbox-group多项选择器，内部由多个checkbox组成。

​ bindchange属性：是一个绑定的事件属性，用于监听复选框组的选中状态发生变化时触发的事件

2.4.7 radio组件

radio组件是用于创建单选框的组件

属性

属性属性值作用
value事件处理函数单选框的值，当被选中时会传递给绑定的事件处理函数。必填属性。
checkedtrue默认选中
false不选中
disabledtrue禁用
false不禁用
color颜色字符串单选框选中时的颜色
2.4.7.1 radio效果图

在这里插入图片描述

2.4.7.2 demo.wxml
<view class="container">
  <view class="radio-group">
    <radio-group bindchange="radioChange">
      <label class="radio-item">
        <radio value="option1" checked="true"></radio>
        <text>唱</text>
      </label>
      <label class="radio-item">
        <radio value="option2"></radio>
        <text>跳</text>
      </label>
      <label class="radio-item">
        <radio value="option3"></radio>
        <text>rap</text>
      </label>
    </radio-group>
  </view>
</view>

注意：radio-group单项选择器，内部由多个 radio组成。

​ bindchange属性：是一个绑定的事件属性，用于监听复选框组的选中状态发生变化时触发的事件

​

2.4.7.3 demo.wxss
.container {
	/* 内边距 */
  margin: 20px;
}

.radio-group {
	/* 弹性布局 */
	display: flex;
	/* 垂直排列 */
  flex-direction: column;
}

.radio-item {
		/* 弹性布局 */
	display: flex;
	/* 居中对齐 */
	align-items: center;
	/* 底边距 */
  margin-bottom: 10px;
}

.result {
	/* 上边距 */
  margin-top: 20px;
}
2.4.8 input组件
2.4.8.1 input效果图

在这里插入图片描述

2.4.8.2 demo.wxml
<view class="container">
  <form>
    <view class="form-item">
      <text>用户名：</text>
      <input type="text" placeholder="请输入用户名" />
    </view>
	<view class="form-item">
      <text>年龄：</text>
      <input type="number" placeholder="请输入用户名" />
    </view>
    <view class="form-item">
      <text>密码：</text>
      <input type="password" placeholder="请输入密码" />
    </view>
    <button class="login-btn" >登录</button>
  </form>
</view>
2.4.8.3 demo.wxss
.container {
    /* 外边距 */
  margin: 20px;
}

.form-item {
  /* 使用弹性布局 */
  display: flex; 
  /* 垂直居中对齐 */  
  align-items: center; 
    /* 底部间距 */
  margin-bottom: 10px; 
}

.form-item text {
    右边距
  margin-right: 10px;
}

.login-btn {
  /* 显示为块级元素 */
  display: block; 
  /* 宽度 */
  width: 100%; 
  /* 高度*/
  height: 40px;
  /* 行高 */
  line-height: 25px; 
  /* 文字居中对齐 */
  text-align: center; 
  /* 背景颜色 */
  background-color: #007aff; 
  /* 文字颜色 */
  color: #fff; 
  /* 边框圆角 */
  border-radius: 5px; 
  /* 字体大小 */
  font-size: 16px; 
}
2.4.9 from组件

表单。内部添加表单元素，如输入框、单选框、复选框等。

属性

属性属性值作用
actionURL地址表单提交的 URL 地址。
methodget/post表单提交的 HTTP 方法，
namestring表单名称
2.4.9.1 from效果图

在这里插入图片描述

2.4.9.2 demo.wxml
<view class="container">
  <form  >
		<view class="form-item">
      <text class="label">姓名：</text>
      <input type="text"  placeholder="请输入姓名"></input>
    </view>
		<view class="form-item">
      <text class="label">密码：</text>
      <input type="password"  placeholder="请输入密码"></input>
    </view>
    <view class="form-item">
      <text class="label">性别：</text>
      <radio-group name="gender" bindchange="">
        <label class="radio-item">
          <radio value="male" ></radio>
          <text class="radio-label">男</text>
        </label>
        <label class="radio-item">
          <radio value="female" ></radio>
          <text class="radio-label">女</text>
        </label>
      </radio-group>
    </view>
    <view class="form-item">
      <text class="label">爱好：</text>
      <checkbox-group name="hobbies" bindchange="">
        <label class="checkbox-item">
          <checkbox value="reading" ></checkbox>
          <text class="checkbox-label">唱</text>
        </label>
        <label class="checkbox-item">
          <checkbox value="music" ></checkbox>
          <text class="checkbox-label">跳</text>
        </label>
        <label class="checkbox-item">
          <checkbox value="sports" ></checkbox>
          <text class="checkbox-label">rap</text>
        </label>
      </checkbox-group>
    </view>

    <view class="btn-group">
      <button type="submit" form-type="submit" class="btn-submit">提交</button>
      <button type="reset" form-type="reset" class="btn-reset">重置</button>
    </view>
  </form>
</view>
2.4.9.3 demo.wxss
.container {
	/* 外边距 */
  margin: 20px; 
}

.form-item {
	/* 弹性布局 */
	display: flex; 
	/* 垂直居中对齐 */
	align-items: center; 
	/* 底部边距 */
  margin-bottom: 10px; 
}

.label {
	/* 宽度 */
	width: 80px;
	/* 文字右对齐 */
	text-align: right; 
	/* 右侧边距 */
  margin-right: 10px; 
}

.radio-item, 
.checkbox-item {
	/* 弹性布局 */
	display: flex; 
	/* 垂直居中对齐 */
	align-items: center; 
	/* 右侧边距 */
  margin-right: 20px;
}
.radio-label,
.checkbox-label {
	 /* 左侧边距 */
  margin-left: 5px;
}

.btn-group {
	/* 弹性布局 */
	display: flex; 
	/* 水平居中对齐 */
	justify-content: center; 
	/* 顶部边距 */
  margin-top: 20px; 
}
.btn-submit,
.btn-reset {
	/* 内边距 */
	padding: 10px 20px; 
	 /* 边框圆角 */
	border-radius: 5px;
	/* 右侧边距 */
  margin-right: 20px; 
}
.btn-submit {
	/* 背景颜色 */
	background-color: #07c160; 
	/* 字体颜色 */
  color: #fff; 
}
.btn-reset {
	/* 背景颜色 */
	background-color: #fff; 
	/* 字体颜色 */
	color: #333; 
	/* 边框 */
  border: 1px solid #999; 
}

2.5 数据绑定

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

WXML 中的动态数据均来自对应 js文件中的Page 的 data。

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

语法：

{{ 要绑定的数据名称 }}

2.5.1 绑定内容
<view>{{message}}</view>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    message: 'Hello MINA!'
  }
})
2.5.2 动态绑定属性
<image src="{{imageSrc}}"></image> 

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imageSrc:"/image/java.jpg"
  }
})
2.5.3 三元运算
<view > {{1 > 2 ? "√" : "×"}} </view>
2.5.4 控制属性
<view wx:if="{{condition}}"> 显示数据</view>

Page({
  data: {
    condition: true
  }
})
2.5.5 算数运算
<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})
2.5.6 字符串运算
<view>{{"hello" + name}}</view>

Page({
  data:{
    name: 'MINA'
  }
})
2.5.7 数据路径运算
<view>{{object.key}} {{array[0]}}</view>


Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})
2.5.8 列表渲染

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>


Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

Page({
  data: {
    array: [{
      message: '张三',
    }, {
      message: '李四'
    },{
	  message: '王五'
	}]
  }
})

wx:for 也可以嵌套，

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块。

<block wx:for="{{[1, 2, 3]}}">
 <view> {{index}}: {{item}}</view>
</block>

注意事项

当 wx:for 的值为字符串时，会将字符串解析成字符串数组

<view wx:for="array">
  {{item}}
</view>

等同于

<view wx:for="{{['a','r','r','a','y']}}">
  {{item}}
</view>

注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

等同于

<view wx:for="{{[1,2,3] + ' '}}" >
  {{item}}
</view>

2.6 事件绑定

事件是渲染层到逻辑层的通信方式，用户与页面进行交互时触发的动作，例如点击、滑动、输入等。开发者可以通过事件绑定来监听这些用户动作，并在事件发生时执行相应的处理逻辑。

事件绑定是指将页面上的用户动作与相应的处理函数进行关联，从而实现对用户交互行为的响应

常见的事件

  • 点击事件

    事件说明
    bindtap当用户点击某个元素时触发
    catchtap当用户点击某个元素时触发，但会阻止事件冒泡

  • 输入事件

    事件说明
    bindinput当用户输入内容时触发，常用于输入框等组件
    bindblur当输入框失去焦点时触发
    bindconfirm当用户点击完成按钮或按下回车键时触发

  • 滑动事件

    事件说明
    bindtouchstart当手指触摸屏幕时触发
    bindtouchmove当手指在屏幕上滑动时触发
    bindtouchend当手指离开屏幕时触发

  • 表单事件

    事件说明
    bindsubmit当用户提交表单时触发
    bindreset当用户重置表单时触发

  • 轮播事件

    事件说明
    bindchange当轮播图当前项发生改变时触发

  • 视频事件

    事件说明
    bindplay当视频开始/继续播放时触发
    bindpause当视频暂停时触发

  • 扫码事件

    事件说明
    bindscan当用户扫码成功时触发

  • 页面生命周期事件

    事件说明
    onLoad页面加载时触发
    onShow页面显示时触发
    onHide页面隐藏时触发
    onUnload页面卸载时触发
2.6.1 点击事件（bindtap ）

点击按钮自增加一

在这里插入图片描述

2.6.1.1 demo.wxml
<!-- 事件绑定 -->
<view class="container">
	<button type="primary" bindtap="btnTapHanHler">点击</button>
	<view>{{num}}</view>
</view>
2.6.1.2 demo.wxss
.container {
	/* 外边距 */
  margin: 20px; 
}
2.6.1.3 demo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
		num : 1
  },
    // 定义按钮事件处理函数
	btnTapHanHler() {
    // 当按钮被点击时，修改 num 的数值加1
    this.setData({
      num: this.data.num + 1
    });
  },
}
2.6.2 阻止冒泡事件（catchtap）

点击内圈视图冒泡，点击中圈外圈进行阻止冒泡事件

在这里插入图片描述

2.6.2.1 demo.wxml
<view class="outer" catchtap="handleOuterTap">
  外圈
  <view class="middle" catchtap="handleMiddleTap">
    中圈
    <view class="inner" bindtap="handleInnerTap">
      内圈
    </view>
  </view>
</view>
2.6.2.2 demo.js
Page({
	handleOuterTap: function () {
        console.log('外圈');
      },
      handleMiddleTap: function () {
        console.log('中圈');
      },
      handleInnerTap: function () {
        console.log('内圈');
      },
})
2.6.2.3 demo.wxss
.outer {
	/* 设置元素宽度为 300rpx */
	width: 300rpx;
	/* 设置元素高度为 200rpx */
	height: 200rpx;
	/* 设置元素背景色为淡灰色（#eee）*/
	background-color: #eee;
	/* 设置元素为 flex 布局 */
	display: flex;
	/* 在水平方向上居中元素 */
	justify-content: center;
	/* 在垂直方向上居中元素 */
	align-items: center;
}

.middle {
  width: 200rpx;
  height: 150rpx;
  background-color: #999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  width: 100rpx;
  height: 100rpx;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
2.6.3 输入事件 (bindinput)

输入框内输入内容出发输入事件，及时显示内容

在这里插入图片描述

2.6.3.1 demo.wxml
<view class="container">
  <input class="input" bindinput="handleInput" placeholder="请输入内容" />
  <view class="output">输出：{{output}}</view>
</view>
2.6.3.2 demo.js
Page({
  data: {
		output: ""
  },
  handleInput: function (event) {
    this.setData({ output: event.detail.value });
  },
})
2.6.3.2 demo.wxss
.container {
  /* 使用弹性布局 */
	display: flex;
	/* 子元素按垂直方向排列 */
  flex-direction: column;
  /* 水平和垂直方向上居中对齐子元素 */
  align-items: center;
  justify-content: center;
  /* 设置容器高度为视窗的高度 */
  height: 100vh;
}

.input {
  /* 设置输入框宽度 */
  width: 300rpx;

  /* 设置输入框高度 */
  height: 40rpx;

  /* 设置输入框内边距*/
  padding: 10rpx;

  /* 设置输入框边框样式*/
  border: 1rpx solid #ccc;

  /* 设置输入框边框圆角*/
  border-radius: 4rpx;

  /* 设置输入框字体大小 */
  font-size: 40rpx;
}

.output {
  /* 设置输出文本与上方元素的间距 */
  margin-top: 20rpx;

  /* 设置输出文本字体大小*/
  font-size: 40rpx;
}
2.6.4 失去焦点事件（bindblur）

输入框失去焦点之后显示输入内容

在这里插入图片描述

2.6.4.1 demo.wxml
<view class="container">
  <input class="input" bindblur="handleBlur" placeholder="请输入内容" />
  <view class="output">输出：{{output}}</view>
</view>
2.6.4.2 demo.js
Page({
  data: {
		 output: ""
  },
	handleBlur: function (event) {
    this.setData({ output: event.detail.value });
  },
})
2.6.4.3 demo.wxml
.container {
  /* 使用弹性布局 */
	display: flex;
	/* 子元素按垂直方向排列 */
  flex-direction: column;
  /* 水平和垂直方向上居中对齐子元素 */
  align-items: center;
  justify-content: center;
  /* 设置容器高度为视窗的高度 */
  height: 100vh;
}

.input {
  /* 设置输入框宽度 */
  width: 300rpx;

  /* 设置输入框高度 */
  height: 40rpx;

  /* 设置输入框内边距*/
  padding: 10rpx;
  /* 设置输入框边框样式*/
  border: 1rpx solid #ccc;
  /* 设置输入框边框圆角*/
  border-radius: 4rpx;
  /* 设置输入框字体大小 */
  font-size: 40rpx;
}
.output {
  /* 设置输出文本与上方元素的间距 */
  margin-top: 20rpx;

  /* 设置输出文本字体大小*/
  font-size: 40rpx;
}
2.6.5 按钮事件（bindconfirm）

输入框输入内容按回车键显示内容

在这里插入图片描述

2.6.5.1 demo.wxml
<view class="container">
  <input class="input" placeholder="请输入内容" bindconfirm="handleConfirm" />
  <view class="output">输出：{{output}}</view>
</view>
2.6.5.2 demo.js
Page({
  data: {
    output: ""
  },
  handleConfirm: function (event) {
    this.setData({ output: event.detail.value });
  }
})
2.6.5.3 demo.wxss
.container {
  /* 使用弹性布局 */
	display: flex;
	/* 子元素按垂直方向排列 */
  flex-direction: column;
  /* 水平和垂直方向上居中对齐子元素 */
  align-items: center;
  justify-content: center;
  /* 设置容器高度为视窗的高度 */
  height: 100vh;
}

.input {
  /* 设置输入框宽度 */
  width: 300rpx;

  /* 设置输入框高度 */
  height: 40rpx;

  /* 设置输入框内边距*/
  padding: 10rpx;

  /* 设置输入框边框样式*/
  border: 1rpx solid #ccc;

  /* 设置输入框边框圆角*/
  border-radius: 4rpx;

  /* 设置输入框字体大小 */
  font-size: 40rpx;
}

.output {
  /* 设置输出文本与上方元素的间距 */
  margin-top: 20rpx;

  /* 设置输出文本字体大小*/
  font-size: 40rpx;
}
2.6.6 触摸事件（bindtouchstart）

触摸视图，触发事件

在这里插入图片描述

在这里插入图片描述

2.6.6.1 demo.wxml
<view class="container" bindtouchstart="handleTouchStart">
  触摸我
</view>
2.6.6.2 demo.js
Page({
	handleTouchStart: function (event) {
    console.log('触摸开始', event);
  }
})
2.6.6.3 demo.wxss
.container {
  width: 200rpx;
  height: 200rpx;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
}
2.6.7 滑动事件（bindtouchmove）

拖动视图，大于拖动位置

在这里插入图片描述

在这里插入图片描述

2.6.7.1 demo.wxml
<view class="container" bindtouchstart="handleTouchStart" bindtouchmove="handleTouchMove">
  触摸并移动
</view>
2.6.7.2 demo.js
Page({
  // 触摸开始事件处理函数
  handleTouchStart: function (event) {
    // 记录触摸起始点的横纵坐标
    this.startX = event.touches[0].clientX;
    this.startY = event.touches[0].clientY;
  },
  // 触摸移动事件处理函数
  handleTouchMove: function (event) {
    // 获取当前触摸点的横纵坐标
    let currentX = event.touches[0].clientX;
    let currentY = event.touches[0].clientY;
    // 计算横向和纵向的移动距离
    let deltaX = currentX - this.startX;
    let deltaY = currentY - this.startY;
    // 打印出横向和纵向的移动距离
    console.log('横向移动距离：', deltaX, '纵向移动距离：', deltaY);
  }
})
2.6.8 离开事件（bindtouchend）

在这里插入图片描述

在这里插入图片描述

2.6.8.1 demo.wxml
<view class="container" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd">
  触摸并松开
</view>
2.6.8.2 demo.js
Page({
  handleTouchStart: function (event) {
    console.log('触摸开始');
  },
  handleTouchEnd: function (event) {
    console.log('触摸结束');
  }
})
2.6.9 提交表单事件（bindsubmit）

在这里插入图片描述

在这里插入图片描述

2.6.9.1 demo.wxml
<view class="container">
  <form bindsubmit="handleSubmit">
    <view class="form-item">
      <view class="form-label">用户名</view>
      <input type="text" name="username" placeholder="请输入用户名" />
    </view>
    <view class="form-item">
      <view class="form-label">密码</view>
      <input type="password" name="password" placeholder="请输入密码" />
    </view>
    <button formType="submit" class="form-submit">提交</button>
  </form>
</view>
2.6.9.2 demo.js
Page({
  // 表单提交事件处理函数
  handleSubmit: function (event) {
    // 从事件对象的detail属性中获取输入框的值
    const { username, password } = event.detail.value;
    
    // 判断用户名或密码是否为空
    if (!username || !password) {
      // 如果为空，则显示提示信息
      wx.showToast({
        title: '用户名或密码不能为空',
        icon: 'none'
      });
      return; // 结束函数执行
    }
    
    // 显示数据提交中的加载提示
    wx.showLoading({
      title: '数据提交中...'
    });
    
    // 模拟数据提交，延时2秒后隐藏加载提示并显示提交成功的提示
    setTimeout(() => {
      wx.hideLoading();
      wx.showToast({
        title: '数据提交成功'
      });
    }, 2000);
    
    // 打印用户名和密码到控制台
    console.log("用户名：" + username);
    console.log("密码：" + password);
  }
})
2.6.9.3 demo.wxss
/* 设置容器的样式 */
.container {
  width: 100%; /* 宽度 */
  height: 100%; /* 高度 */
  background-color: #f5f5f5; /* 背景颜色 */
  display: flex; /* 弹性布局 */
  justify-content: center; /* 主轴居中对齐 */
  align-items: center; /* 交叉轴居中对齐 */
}

/* 设置表单项的样式 */
.form-item {
  margin-bottom: 20rpx; /* 下边距 */
}

/* 设置表单标签的样式 */
.form-label {
  font-size: 28rpx; /* 字体大小 */
  color: #333; /* 字体颜色 */
}


/* 设置文本输入框的样式 */
input[type="text"],
input[type="password"] {
  width: 400rpx; /* 宽度 */
  height: 60rpx; /* 高度 */
  padding: 10rpx; /* 内边距 */
  border: 1rpx solid #ccc; /* 边框 */
  border-radius: 4rpx; /* 边框圆角 */
}

/* 设置提交按钮的样式 */
.form-submit {
  width: 400rpx; /* 宽度 */
  height: 80rpx; /* 高度 */
  background-color: #007aff; /* 背景颜色 */
  color: #fff; /* 字体颜色 */
  font-size: 30rpx; /* 字体大小 */
  border-radius: 4rpx; /* 边框圆角 */
}
2.6.10 重置表单事件（bindreset）

在这里插入图片描述

在这里插入图片描述

2.6.10.1 demo.wxml
<view>
  <form bindsubmit="submitForm" bindreset="resetForm">
    <input name="username" placeholder="用户名" />
    <input name="password" type="password" placeholder="密码" />
    <button formType="submit">提交</button>
    <button formType="reset">重置</button>
  </form>
</view>
2.6.10.2 demo.js
Page({
  // 提交事件处理函数
  submitForm: function (event) {
    // 表单提交逻辑
    const { username, password } = event.detail.value;
    console.log('提交的用户名：', username);
    console.log('提交的密码：', password);
  },

  // 重置事件处理函数
  resetForm: function (event) {
    // 表单重置逻辑
    console.log('表单已重置');
  }
});
2.6.10.3 demo.wxss
/* 页面整体样式 */
page {
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
}

/* 表单样式 */
input {
  width: 80%;
  margin: 10rpx;
  padding: 10rpx;
  border: 1rpx solid #ccc;
}

button {
  width: 80%;
  margin: 20rpx;
  padding: 15rpx;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5rpx;
  text-align: center;
}
2.6.11 轮播事件（bindchange）

在这里插入图片描述

在这里插入图片描述

2.6.11.1 demo.wxml
<view>
  <input bindinput="inputChange" placeholder="请输入内容"/>
  <checkbox-group bindchange="checkboxChange">
    <checkbox value="1">唱</checkbox>
    <checkbox value="2">跳</checkbox>
    <checkbox value="3">rap</checkbox>
  </checkbox-group>
  <picker mode="date" bindchange="dateChange">
    <view>选择日期</view>
  </picker>
</view>
2.6.11.2 demo.js
Page({
  inputChange: function(event) {
    console.log('输入框的值发生改变：', event.detail.value);
  },

  checkboxChange: function(event) {
    console.log('多选框的值发生改变：', event.detail.value);
  },

  dateChange: function(event) {
    console.log('日期选择器的值发生改变：', event.detail.value);
  }
});
2.6.12 视频开始/继续事件（bindplay）

在这里插入图片描述

在这里插入图片描述

2.6.12.1 demo.wxml
<view>
  <video id="myVideo" src="https://vd4.bdstatic.com/mda-pmrjw7vk3puw8gen/720p/h264/1703599347326083093/mda-pmrjw7vk3puw8gen.mp4?v_from_s=hkapp-haokan-hnb&auth_key=1703655145-0-0-abea693b3630d15753a7f6d8575a04b6&bcevod_channel=searchbox_feed&pd=1&cr=2&cd=0&pt=3&logid=1945801675&vid=18425982153835125458&klogid=1945801675&abtest=" bindplay="videoPlay"></video>
</view>
2.6.12.2 demo.js
Page({
	videoPlay: function(event) {
    console.log('视频开始播放');
  }
});
2.6.13 视频暂停事件（bindpause）

在这里插入图片描述

在这里插入图片描述

2.6.13.1 demo.wxml
<view>
  <video id="myVideo" src="https://vd4.bdstatic.com/mda-pmrjw7vk3puw8gen/720p/h264/1703599347326083093/mda-pmrjw7vk3puw8gen.mp4?v_from_s=hkapp-haokan-hnb&auth_key=1703655145-0-0-abea693b3630d15753a7f6d8575a04b6&bcevod_channel=searchbox_feed&pd=1&cr=2&cd=0&pt=3&logid=1945801675&vid=18425982153835125458&klogid=1945801675&abtest=" bindpause="videoPause"></video>
</view>
2.6.13.2 demo.js
Page({
	videoPause: function(event) {
    console.log('视频暂停播放');
  }
});
2.6.14 扫码事件（bindscan）

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2.6.14.1 demo.wxml
<view>
  <button bindtap="scanCode">扫描二维码</button>
</view>
2.6.14.2 demo.js
Page({
  scanCode: function() {
    wx.scanCode({
      success: function(res) {
        console.log('扫码结果:', res.result);
      },
      fail: function(res) {
        console.log('扫码失败:', res);
      }
    })
  }
});
2.6.15 页面加载事件（onLoad）

在这里插入图片描述

Page({
  onLoad: function(options) {
    console.log('页面加载完成');
    console.log('参数 options:', options);
  }
});
2.6.16 页面显示事件（onShow）

在这里插入图片描述

Page({
  onShow: function() {
    console.log('页面展示');
  }
});
2.6.17 页面隐藏事件（onHide）
Page({
  onHide: function() {
    // Do something when page hide
    console.log('页面隐藏');
  }
});
2.6.18 页面卸载事件（onUnload）
Page({
  onUnload: function() {
    // Do something when page unload
    console.log('页面销毁');
  }
});

2.7 模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

2.7.1 定义模板

使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
2.7.2 使用模板

使用 is 属性，声明需要的使用的模板，

使用data属性，传递一个对象数据，

使用 ... 运算符将对象的所有属性展开为模板数据

<!-- 使用了 {{...item}} 语法将对象 item 的所有属性展开为模板数据传递给模板 -->
<template is="msgItem" data="{{...item}}"/>
2.7.3 模板数据
Page({

  data: {
	item: {
      index: 0,
      msg: '这是一个模板',
      time: '2023-12-18'
    }
  },
})

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

<!-- 创建模板 -->
<template name="odd">
  <view> 奇数 </view>
</template>
<template name="even">
  <view> 偶数 </view>
</template>


<block wx:for="{{[1, 2, 3, 4, 5]}}">
<!-- 调用模板 -->
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

2.8 引用

WXML 提供两种文件引用方式import和include。

2.8.1 import

import 组件用于导入其他组件或页面。通过 import 组件，可以将其他组件或页面的功能引入到当前组件或页面中，实现代码的复用和模块化。

2.8.1.1 demotemplate.wxml
<!-- myTemplate.wxml -->
<template name="myTemplate">
  <view>
    <text>{{text}}</text>
  </view>
</template>
2.8.1.2 demo.wxml
<!-- index.wxml -->
<import src="/pages/demo/demotemplate"/>
<view>
  <template is="myTemplate" data="{{text: 'Hello, World!'}}"></template>
</view>
2.8.1.3 import的作用域

import 的作用域是局部的，它仅在当前组件或页面中有效。

demo1.wxml

<template name="demo1">
  <text> A template </text>
</template>

demo2.wxml

<import src="demo1.wxml"/>
<template name="demo2">
  <text> B template </text>
</template>

demo.wxml

<import src="demo2.wxml"/>
<template is="demo1"/>  <!-- 错误!不导入demo1时不能使用模板。 -->
<template is="demo2"/>
2.8.2 include

include 组件用于将一个 wxml 文件插入到另一个 wxml 文件中，可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，实现代码的复用和模块化。

2.8.2.1 demo1.wxml
<text>头部</text>
2.8.2.2 demo2.wxml
<view> 尾部 </view>
2.8.2.3 demo.wxml
<include src="demo1.wxml"/>
<view>主体</view>
<include src="demo2.wxml"/>
陆卿之
关注
  • 32
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
学习微信小程序的页面布局和响应式设计
吃不胖.
09-13 548
在此示例中，我们使用flex-container和flex-item样式类来构建Flex布局。在此示例中，我们使用flex-container和flex-item样式类来构建Flex布局。在此示例中，我们使用grid-container和grid-item样式类来构建Grid布局。在本文中，我们将深入研究微信小程序的页面布局和响应式设计，并提供详细的代码示例和解释。在此示例中，我们将.container的宽度设置为50%，以确保它在不同设备上按比例缩放。在微信小程序中，可以使用不同的布局方式来构建页面。
微信小程序-微信小程序-豆瓣电影
08-06
微信小程序-豆瓣电影-测试案例 1、app.js 封装请求方式函数 fetchApi 2、app.json 配置文件(配置页面样式、多少页面、菜单按钮) 3、app.wxss 全局样式文件（定义页面的全局样式） 4、效果图 5、填入appid后保错...
微信小程序个人中心-我的界面
热门推荐
wy313622821的博客
04-24 5万+
个人中心-我的界面 简介 我们在开发微信小程序的时候，基本上都会有一个个人中心的界面，简称我的界面，里面有保存每个用户的个人信息，个人设置，个人的数据记录。所以本文主要针对这个页面做了一个自己熟练的界面，下面来看看效果图： 效果图 . . . 这种效果的整体布局固定不变，如果想要更好看的效果，可以修改里面的图片小图标，还有背景颜色，又或者加上动图都是可以的，但是整体的框架基本就是这样，所以下面来...
小白如何编写微信小程序的页面结构
最新发布
qq_67153941的博客
06-10 444
一、文件结构 微信小程序的文件结构一般包括app.js、app.json、app.wxss、pages等文件夹。其中，app.js是小程序的入口文件，app.json是小程序的全局配置文件，app.wxss是全局样式文件，pages文件夹用于存放小程序的页面文件。编写微信小程序页面结构的内容，需要涵盖以下几个方面：文件结构、页面结构、组件使用、样式定义和页面交互。三、组件使用 微信小程序提供了丰富的组件，可以按照需求选择合适的组件。四、页面交互 微信小程序页面可以通过事件处理函数来实现页面交互。
微信小程序页面
AWildCat的博客
04-12 213
一个小程序页面由四个文件组成，分别是: xxx xxx.js 页面逻辑 xxx.json 页面配置 xxx.wxml 页面结构 xxx.wxss 页面样式 01.小程序框架组成 在小程序中 ，通过App()来注册一个小程序 ，通过Page()来注册一个页面 1.逻辑层 1.注册小程序 2.注册页面 3.页面生命周期 4.页面路由 5.模块化 6...
【微信小程序】认识小程序页面
hacker707的博客
09-22 4473
微信小程序之认识小程序页面，持续更新微信小程序系列专栏
微信小程序入门1--新建微信小程序页面
LCIOT的博客
02-22 4497
微信小程序入门1–新建微信小程序页面 在新建微信小程序后会自动生成一个DEMO实例，我们可以在实例中修改自己所需的内容，当内容过多时，实例中的页面不足以满足我们的需求，因此需要新建微信小程序页面。 本文内容简单，分成两个部分进行介绍： 一、页面介绍 二、新建页面 一、页面介绍 在新建一个微信小程序项目时，得到如下界面，此开发界面为微信官方提供的Demo实例。 可以看到Demo中有两个页面。分别为index页面和logs页面。 app.json是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网
微信小程序的新页面设计和逻辑编写
serena_0916的博客
07-11 4333
（1）在pages目录下新建子目录（名字可以自己定，本文以newpage为例） 建好子目录后，依次新建文件newpage.js,newpage.json,newpage.wxml,newpage.wxss.如图 注意:newpage.json建好后是空文档，使用时会报错，加入{}即可 （2）在app.json中注册新页面 注意：不要带扩展名 （3）index.wxml中添
微信小程序-微信小程序-仿豆瓣电影-demo小程序项目源码-原生开发框架-含效果截图示例.zip
05-22
源码中涵盖了微信小程序的基础架构、页面布局、功能实现等各个方面，通过详细的注释和说明，让您能够快速上手并掌握微信小程序的开发技巧。 同时，我们还提供了丰富的效果截图示例，让您能够直观地了解项目的最终...
微信小程序-美食列表源码
04-26
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的应用体验。"美食列表源码"是针对微信小程序开发者，特别是初学者的一个实践项目，它可以帮助学习者...
微信小程序-微信小程序－微赞论坛
08-06
微信小程序－微赞论坛 说明： 实现微赞论坛部分功能，包括帖子列表，发表帖子和个人信息页。 数据接口: 使用本地数据 目录结构： data — 存放本地模拟数据 images — 存放项目图片相关文件 pages — 存放项目页面...
微信小程序 ---- 组件应用和实际开发的DEMO
01-09
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的线上服务。本主题聚焦于微信小程序的组件应用与实际开发，通过一系列DEMO来深入理解其核心功能和...
手把手教你写第一个微信小程序页面
张居然的博客
08-17 9800
微信小程序，微信小程序项目，手把手教你写第一个微信小程序页面 1.首页效果以及实现步骤新建项目并梳理项目结构配置导航栏效果配置 tabBar 效果实现轮播图效果实现九宫格效果实现图片布局2.接口地址获取轮播图数据列表的接口 【GET】获取九宫格数据列表的接口 【GET】...
微信小程序之项目基本结构、页面的基础及宿主环境
浩泽学编程的博客
09-22 1410
微信小程序的项目基本结构、页面的基础及宿主环境以上就是微信小程序的基础入门，偏理论。
微信小程序首页-----布局（详细教程赶快收藏吧）
2301_76988707的博客
10-17 6806
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。网址：Flex 布局语法教程https://www.runoob.com/w3cnote
微信小程序开发界面介绍
qq_26138157的博客
02-14 643
微信小程序基础文件目录基本认识
1000个微信小程序源码分享
程序员凯小白的博客
05-10 4万+
文章目录微信小程序源代码获取开发账号注册小程序部分源码展示程序展示 微信小程序 现在的微信小程序非常火爆，网上也有很多学习资源，但是源码资源还是很少的。其实在学习开发微信小程序的时候如果有源码可以供我们借鉴，学习效率也会成倍的增加。 无论是前端开发，还是后端开发，时间长了，你总会能总结出它的一些规律的，对于前端开发主要就两条，页面展现，逻辑处理。如果是全流程开发的话，那就是，如何创建项目，页面如何实现，数据获取和逻辑处理如何实现，如何打包上线。移动端或者前端，基本开发流程就这个四个步骤。所以在在前端方面去学
第一篇：先简单了解一下微信小程序页面结构，怎么创建页面
m0_73991249的博客
02-19 1717
1、下载安装：可以去b站跟着黑马程序员视频步骤，不做过多阐述，就是在第一个windows 642、创建项目打开软件，跟着图片来版本可能不同，样子会有所不同，我懒得按照我的来截图，我用的是黑马程序员的视频截图，但是内容是一样的，图片怎么选你就怎么选就行！记住先“不适用云服务”，不要选别的那些什么【模板】，语言选【基于js】的就行，AppID在这块，链接没用你就按照下面图片来然后就出来了。
HttpClient
weixin_46589095的博客
05-12 845
小程序是一种新的开放能力，开发者可以快速地开发一个小程序。可以在微信内被便捷地获取和传播，同时具有出色的使用体验。微信小程序小程序主要运行微信内部，可通过上述网站来整体了解微信小程序的开发。首先，在进行小程序开发时，需要先去注册一个小程序，在注册的时候，它实际上又分成了不同的注册的主体。我们可以以个人的身份来注册一个小程序，当然，也可以以企业政府、媒体或者其他组织的方式来注册小程序。那么，不同的主体注册小程序，最终开放的权限也是不一样的。比如以个人身份来注册小程序，是无法开通支付权限的。
Taro开发微信小程序-用户授权
08-09
在Taro开发微信小程序中，用户授权是一个重要的功能。用户授权允许小程序获取用户的基本信息和权限，以提供更好的用户体验。 要在Taro中实现用户授权，你可以按照以下步骤进行操作： 1. 引入微信小程序的API：在Taro的页面或组件中，通过`import Taro from '@tarojs/taro'`引入微信小程序的API。 2. 获取用户授权：使用`Taro.getSetting()`方法可以获取用户的当前设置。你可以在需要授权的页面或组件中调用该方法。 3. 判断用户授权状态：通过`Taro.getSetting().then(res => {})`方法的返回值，你可以判断用户是否已经授权。如果用户已经授权，你可以进行相应的操作；如果用户未授权，则需要引导用户进行授权。 4. 引导用户进行授权：通过`Taro.authorize()`方法可以引导用户进行授权。例如，如果你需要获取用户的地理位置权限，可以调用`Taro.authorize({ scope: 'scope.userLocation' })`方法。 5. 处理授权结果：在用户完成授权操作后，会触发相应的回调函数。你可以通过`Taro.authorize().then(res => {})`方法来处理授权结果。 这些是在Taro开发微信小程序中实现用户授权的基本步骤。具体的实现方式可能会根据你的具体需求而有所不同。希望这些信息对你有所帮助！如果你还有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陆卿之

你的鼓励将是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值