微信小程序Day2笔记

news2025/1/17 14:02:15

1、WXML模板语法

1. 数据绑定

  1. 数据绑定的基本原则
  • 在data中定义数据
  • 在WXML中使用数据

2. 在data中定义页面的数据

在页面对应的.js文件中，把数据定义到data对象中。

3. Mustache语法的格式

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式为：
<view>{{ 要绑定的数据名称 }}</view>

4. Mustache语法的应用场景

  • 绑定内容
  • 绑定属性
  • 运算（三元运算、算术运算等）

5. 动态绑定内容

<view>{{ info }}</view>
Page({
  data: {
    info: 'helloworld',
  },
})

6. 动态绑定属性

<image src="{{ imgSrc }}"></image>
Page({
  data: {
    imgSrc: 'http://www.itheima.com/images/logo.png'
  },
})

7. 三元运算

<view>{{ randomNum >=5 ? '随机数字大于或等于5':'随机数字小于5' }}</view>
Page({
  data: {
    randomNum: Math.random()*10 // 生成10以内的随机数
  },
})

8. 算数运算

<view>{{ randomNum * 100 }}</view>
Page({
  data: {
    randomNum: Math.random().toFixed() // 生成带两位小数的随机数
  },
})

2、事件绑定

1. 什么是事件

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

2. 小程序中常用的事件

类型绑定方式事件描述
tapbindtap 或 bind:tap手指触摸后马上离开，类似于HTML中的click事件
inputbindinput 或 bind:input文本框的输入事件
changebindchange 或 bind:change状态改变时触发

3. 事件对象的属性列表

当事件回调触发的时候，会受到一个事件对象event，它的详细属性如下表所示：

属性类型说明
typeString事件类型
timeStampInteger页面打开到触发事件所经过的毫秒数
targetObject触发事件的组件的一些属性值集合
currentTargetObject当前组件的一些属性值集合
detailObject额外的信息
touchesArray触摸事件，当前停留在屏幕中的触摸点信息的数组
changeTouchesArray触摸事件，当前变化的触摸点信息的数组

4. target和currentTarget的区别

target是触发该事件的源头组件，currentTarget是当前事件所绑定的组件。举例如下：

<view bindtap="handler">
  <button></button>
</view>

e.target指的是button，但是e.currentTarget是view组件。触摸button通过冒泡，触发了handler事件处理函数。

5. bindtap的语法格式

在小程序中，不存在HTML中的onclick鼠标点击事件，而通过tap事件来响应用户的触摸行为。

  1. 通过bindtap，可以为组件绑定tap触摸事件
    <button type="primary" bindtap="btnTapHandler"></button>
  2. 在页面的.js文件中定义对应的事件处理函数，事件参数通过形参event（一般简写成e）来接收：
btnTapHandler(e) { // 按钮的tap事件处理函数
    console.log(e); // 打印事件参数对象e
  },

6. 在事件处理函数中为data中的数据赋值

调用this.setData(dataObject)方法，给页面data中的数据重新赋值。

<view>{{ count }}</view>
<button bindtap="changeCount" type="primary">修改count的值</button>

// index.js
// 获取应用实例
const app = getApp()
Page({
  data: {
    count: 0
  },
  changeCount() {
    this.setData({
      count: this.data.count+1
    });
  },
})

7. 事件传参

不能在绑定事件的同时为事件处理函数传递参数。因为小程序会把bindtap的属性值，统一当作事件处理函数名称来处理。
可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字。
<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>
info 会被解析为 参数的名字
数值 2 会被解析为 参数的值
在事件处理函数中，通过event.target.dataset.参数名获取到具体参数的值。

8. bindinput 的语法格式

通过input事件响应文本框的输入事件，语法格式如下：

  • 通过bindinput，可以为文本框绑定输入事件：
    <input bindinput="inputHandler"></input>
  • 在页面的.js文件中定义事件处理函数：
  inputHandler(e) {
    // e.detail.value 是变化过后，文本框最新的值
    console.log(e.detail.value);
  }

9. 实现文本框和data之间的数据同步

实现步骤：

  1. 定义数据
  2. 渲染结构
  3. 美化样式
  4. 绑定input事件处理函数

3、条件渲染

1. wx:if

在小程序中，使用wx:if=“{{condition}}”来判断是否需要渲染该代码块。
<view wx:if="{{condition}}">True</view>
也可以用wx:elif和wx:else来添加else判断。

<view wx:if="{{type===1}}"> 男 </view>
<view wx:elif="{{type===2}}"> 女 </view>
<view wx:else> 未知 </view>

2. 结合使用wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在标签上使用wx:if控制属性，示例如下：

<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

3. hidden

使用hidden=“{{condition}}”条件是true 则隐藏，false 则不隐藏。
<view hidden="{{false}}">条件为false则不隐藏，为true则隐藏</view>

4. wx:if与hidden的对比

  1. 运行方式不同
  • wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏
  • hidden以切换样式的方式(display:none/block;)，控制元素的显示与隐藏
  1. 使用建议
  • 频繁切换 时，建议使用hidden
  • 控制条件复杂 时，建议使用wx:if 搭配wx:elif、wx:else进行展示与隐藏的切换

4、列表渲染

1. wx:for

通过wx:for可以根据指定的数组，循环渲染重复的组件结构，语法实例如下：

<view wx:for="{{array}}">
  索引是：{{index}}， 当前项是:{{item}}
</view>

2. 手动指定索引和当前项的变量名

  • 使用wx:for-index可以指定当前循环项的索引的变量名
  • 使用wx:for-item可以指定当前项的变量名
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  索引是：{{idx}}，当前项是：{{itemName}}
</view>

3. wx:key 的使用

类似于Vue列表渲染中的:key，小程序在实现列表渲染时，建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率。

data: {
  userList:[
    {id:1, name: 'hot'},
    {id:2, name: 'cold'},
    {id:3, name: 'white'}
  ]
}

<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

5、 WXSS模板样式

1. 什么是WXSS

WXSS是一套样式语言，类似于CSS

2. WXSS和CSS的关系

WXSS具有CSS大部分特性，同时，WXSS对CSS进行了扩充以及修改，以适应微信小程序的开发。
与CSS相比，WXSS扩展的特性有：

  1. rpx尺寸单位
  2. @import 样式导入

3. rpx

  1. 什么是rpx尺寸单位
    rpx是微信小程序独有的，用来解决屏适配的尺寸单位。
  2. rpx的实现原理
    鉴于不同的设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即：当前屏幕的总宽度为750rpx）。
  • 在较小的设备上，1rpx所代表的宽度较小
  • 在较大的设备上，1rpx所代表的宽度较大
    小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。
  1. rpx和px之间的单位换算
    在iPhone6，屏幕宽度为375px，共有750个物理像素，等分为750rpx。因此：
    750rpx=375px=750个物理像素
    1rpx=0.5px=1物理像素
    1rpx=0.5px
设备换算
iphone51rpx=0.42px
iphone61rpx=0.5px
iphone6 Plus1rpx=0.552px

4. 样式导入

  1. 什么是样式导入
    使用WXSS提供的@import语法，导入外联的样式表。
  2. @import语法格式
    @import后面跟需要导入的外联样式表的相对路径，用;表示结束。示例如下：
// common.wxss
.small {
  padding: 5px;
}
// app.wxss
@import "common.wxss";

5. 全局样式和局部样式

  1. 全局样式
    定义在app.wxss中的样式，是全局样式，会作用于小程序的每一个页面。
  2. 局部样式
    在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面。
    注意：
  • 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式。
  • 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式。

6、 全局配置

1. 全局配置文件及常用的配置项

小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下：

  1. pages：记录当前小程序所有页面的存放路径（新建页面会用到）
  2. window：全局设置小程序窗口的外观
  3. tabBar：设置小程序底部的tabBar效果
  4. style：是否启用新版的组件样式

2. window

  1. 小程序窗口的组成部分：从上到下依次为：navigationBar 、background（默认不可见，下拉才显示） 、页面主体区域，前两个都可以通过window节点设置
  2. window节点常用的配置项
属性名类型默认值说明
navigationBarTitleTextString字符串导航栏标题文字内容
navigationBarBackgroundColorHexColor#000000导航栏背景颜色
navigationBarTextStyleStringwhite导航栏标题颜色，仅支持black/white
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringlight下拉loading的颜色，仅支持dark/light
enablePullDownRefreshBooleanfalse是否全局开启下拉刷新
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位为px
  1. 设置导航栏的标题内容
    步骤： app.json->window->navigationBarTitleText
  "window":{
    "navigationBarTitleText": "微信小程序",
  },
  1. 设置导航栏的背景色(一定要 十六进制)
    步骤： app.json->window->navigationBarBackgroundColor
  "window":{
    "navigationBarBackgroundColor": "#2b4b6b",
  },
  1. 设置导航栏的标题颜色(仅支持 white 或 black)
    步骤： app.json->window->navigationBarTextStyle
  "window":{
    "navigationBarTextStyle": "white",
  },
  1. 全局开启下拉刷新功能
    设置步骤：app.json->window->enablePullDownRefresh设置值为true。
    在app.json中启用该功能，会作用于每个页面。
  2. 设置下拉刷新时窗口的背景色(只能 十六进制)
    app.json -> window -> backgroundColor ，指定颜色
  3. 设置下拉刷新时，loading的样式(只能是 dark 或 light)
    app.json -> window -> backgroundTextStyle ,指定 dark 或 light。
  4. 设置上拉触底的距离
    上拉触底：通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
    设置步骤：app.json -> window -> onReachBottomDistance
    默认距离为50px，如果没有特殊需求，使用默认值即可。

3. tabBar

  1. 什么是tabBar
    tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：
  • 底部tabBar
  • 顶部tabBar
    注意：
  • tabBar中只能配置最少2个、最大5个tab页签
  • 当渲染顶部tabBar时，不显示icon，只显示文本
  1. tabBar 的6个组成部分
  • backgroundColor：tabBar的背景颜色
  • selectedIconPath：选中时的图片路径
  • borderStyle：tabBar上边框的颜色
  • iconPath：未选中时 图片的路径
  • color：tab上文字默认（未选中）颜色
  • selectedColor：tab上的文字选中时的颜色
  1. tabBar节点配置项(在app.json中和window平级: “tabBar”: {})
属性类型必填默认值描述
positionstring否默认值tabBar的位置，仅支持 bottom / top
borderStylestring否默认值tabBar 上边框的颜色，仅支持 black / white
colorHexColor否默认值tabBar上文字的默认（未选择）颜色
selectedColorHexColor否默认值tabBar上的文字选中时的颜色
backgroundColorHexColor否默认值tabBar的背景色
listarray是tab页签的列表，最少2个，最多5个tab
  1. 每个tab项（list中数组的每个元素）的配置选项
属性类型必填描述
pagePathstring是页面路径，页面必须在pages中事先定义
textstring是tab上显示的文字
iconPathstring否未选中时的图标路径；当position为top时 不显示icon
selectedIconPathstring否选中时的图标路径；当position为top时 不显示icon

7、 页面配置

1. 页面配置文件的作用

每个页面有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

2. 页面配置和全局配置的关系

小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现，此时，页面级别的.json配置文件可以实现这种需求。
注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

3. 页面配置中常用的配置项

属性名类型默认值说明
navigationBarTitleTextString当前导航栏标题文字内容
navigationBarBackgroundColorHexColor#000000当前页面导航栏背景颜色
navigationBarTextStyleStringwhite当前页面导航栏标题颜色，仅支持black/white
backgroundColorHexColor#ffffff当前窗口的背景色
backgroundTextStyleStringlight当前页面下拉loading的颜色，仅支持dark/light
enablePullDownRefreshBooleanfalse是否为当前页面开启下拉刷新
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位为px

8、网络数据请求

1. 小程序中网络数据请求的限制

出于安全性方面的考虑，小程序官方对数据接口的请求做出了以下两个限制：

  • 只能请求HTTPS类型的接口
  • 必须将接口的域名添加到信任列表中

2. 配置request合法域名

需求描述：假设在自己的微信小程序中，希望请求 https://www.escook.cn/域名下的接口
配置步骤：登录微信小程序管理后台 -> 开发管理 -> 开发设置 -> 服务器域名 -> 修改request合法域名
注意事项：

  • 域名只支持https协议
  • 域名不能使用IP地址或localhost
  • 域名必须经过ICP备案
  • 服务器域名一个月内最多可申请5次修改

3. 发起GET / POST请求

调用微信小程序提供的wx.request()方法，发起GET数据请求。示例代码如下：

wx.request({
  url: 'https://www.escook.cn/api/get', // 请求的接口地址，必须基于https协议
  method: 'GET', // 请求的方式
  data: { // 发送到服务器的数据
    name: '小红'，
    age: 18
  },
  success: (res)=>{ // 请求成功之后的回调函数
    console.log(res);
  }
})

4. 在页面刚加载时请求数据

在页面刚加载的时候，自动请求一些初始化的数据，需要在页面的onLoad事件中调用获取数据的函数。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/997942.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

不推介使用裸指针的几种情况

不推介使用裸指针的几种情况

情况一&#xff1a; //原生指针没有所有权 void f() {// 不好: 原生指针拥有了所有权int* p1 new int{7}; // ... }template<typename T> class X {public:T* p; // 不好: 不清楚 p 所有权T* q; // 不好: 不清楚 q 所有权// ... };// 不好: 不清楚返回值所有权 Gadget*…
阅读更多...
机器学习：自然语言处理上的对抗式攻击

机器学习：自然语言处理上的对抗式攻击

Attacks in NLP 相关话题 Introduction 以前的攻击专注于图像和语音上&#xff0c;而NLP上的内容比较少。而NLP的复杂度跟词典有关系&#xff1a; NLP只能在embedding后的特征上加噪声 Evasion Attacks 电影的评论情感分类&#xff0c;将film换成films后&#xff0c;评论从…
阅读更多...
637. 二叉树的层平均值

637. 二叉树的层平均值

637. 二叉树的层平均值 题目-简单难度示例1. bfs 题目-简单难度 给定一个非空二叉树的根节点 root , 以数组的形式返回每一层节点的平均值。与实际答案相差 10-5 以内的答案可以被接受。 示例 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&…
阅读更多...
DQN模型

DQN模型

1. DQN模型 References [1] 强化学习第五节&#xff08;DQN&#xff09;【个人知识分享】_哔哩哔哩_bilibili
阅读更多...
在MDK-Keil中开发S32K144

在MDK-Keil中开发S32K144

对于NXP的S32K1xx系列MCU&#xff0c;前面已经介绍过&#xff0c;官方有专门支持该系列MCU开发的IDE工具——S32DS&#xff0c;这个工具还有对应的代码生成配置工具&#xff0c;而且也是官方推荐使用的工具。 S32DS开发环境是基于Eclipse改写的&#xff0c;熟悉Eclipse的话可以…
阅读更多...
python使用百度AipOCR来实现图像文字识别

python使用百度AipOCR来实现图像文字识别

上篇文字讲到了可以截屏手机模拟器上的界面并传回电脑上&#xff0c;文章链接 python将手机模拟器截屏并发送至电脑上_小小爬虾的博客-CSDN博客 传回来以后&#xff0c;就可以识别出图片中的文字内容了。 我使用的是Python3.10.4&#xff0b;百度的AipOCR库实现图像文字识别…
阅读更多...
利用Scrum敏捷工具管理敏捷产品迭代Sprint Backlog

利用Scrum敏捷工具管理敏捷产品迭代Sprint Backlog

​什么是Sprint Backlog&#xff1f; Sprint Backlog是Scrum的主要工件之一。在Scrum中&#xff0c;团队按照迭代的方式工作&#xff0c;每个迭代称为一个Sprint。在Sprint开始之前&#xff0c;PO会准备好产品Backlog&#xff0c;准备好的产品Backlog应该是经过梳理、估算和优…
阅读更多...
systemserver的inputdispatcher直接产生CANCEL事件原理分析-讨厌的android触摸面试题

systemserver的inputdispatcher直接产生CANCEL事件原理分析-讨厌的android触摸面试题

背景回顾&#xff1a; 上一个blog已经重点讲解了app层面自己产生的Cancel触摸事件&#xff0c;大概产生的原理如下&#xff1a; 上一个blog地址&#xff1a;https://blog.csdn.net/learnframework/article/details/124086882 即可以看出来&#xff0c;在服务端systemserver其实…
阅读更多...
国家信息中心举办“数字政府建设暨数字安全技术”研讨会：海云安提出数字政府软件供应链安全解决方案

国家信息中心举办“数字政府建设暨数字安全技术”研讨会：海云安提出数字政府软件供应链安全解决方案

近日&#xff0c;由国家信息中心主办&#xff0c;复旦大学研究院承办的“数字政府建设暨数字安全技术研讨会”在义乌顺利召开。国家信息中心信息与网络安全部副主任禄凯&#xff0c;复旦大学党委常委、宣传部部长陈玉刚&#xff0c;义乌市委常委、常务副市长喻新贵为会议致辞。…
阅读更多...
三、C#—变量，表达式，运算符（3）

三、C#—变量，表达式，运算符（3）

&#x1f33b;&#x1f33b; 目录 一、变量1.1 变量1.2 使用变量的步骤1.3 变量的声明1.4 变量的命名规则1.5 变量的初始化1.6 变量初始化的三种方法1.7 变量的作用域1.8 变量使用实例1.9 变量常见错误 二、C#数据类型2.1 数据类型2.2 值类型2.2.1 值类型直接存储值2.2.2 简单类…
阅读更多...
【rust/egui】(十)使用painter绘制一些图形—connections

【rust/egui】(十)使用painter绘制一些图形—connections

说在前面 rust新手&#xff0c;egui没啥找到啥教程&#xff0c;这里自己记录下学习过程环境&#xff1a;windows11 22H2rust版本&#xff1a;rustc 1.71.1egui版本&#xff1a;0.22.0eframe版本&#xff1a;0.22.0上一篇&#xff1a;这里 绘制连接 在上一节我们使用painter绘制…
阅读更多...
《深度学习初探：使用TensorFlow和Keras构建你的第一个神经网络》

《深度学习初探：使用TensorFlow和Keras构建你的第一个神经网络》

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…
阅读更多...
GCP之Google Cloud Infrastructure

GCP之Google Cloud Infrastructure

Google Cloud 的物理网络是如何连接的&#xff1f; Google Cloud 分为 regions&#xff0c;regions 又分为 zones。 region 是一个地理区域&#xff0c;其中一个 VM 到另一个 VM 的往返时间 &#xff08;RTT&#xff09; 通常小于 1毫秒&#xff1b;zone 是 region 中的部署区…
阅读更多...
canvas基础笔记

canvas基础笔记

一、简介 Canvas是HTML5中的一个元素&#xff0c;它提供了一个可以使用JavaScript绘制图形的区域。它提供了一个强大的绘图API&#xff0c;可以用于创建各种图形&#xff0c;包括线条、矩形、圆形、文本等 Canvas 是 HTML5 中的一个元素&#xff0c;用于绘制图形、动画和图像。…
阅读更多...
架构核心技术之微服务架构

架构核心技术之微服务架构

小熊学Java&#xff1a;https://www.javaxiaobear.cn/&#xff0c;文末有免费资源 本文我们来学习微服务的架构设计 主要包括如下内容。 单体系统的困难&#xff1a;编译部署困难、数据库连接耗尽、服务复用困难、新增业务困难。 微服务框架&#xff1a;Dubbo 和 Spring Clou…
阅读更多...
sdkman 的安装配置与 sdk 管理

sdkman 的安装配置与 sdk 管理

sdkman 的安装配置与 sdk 管理 记录一下项目使用的工具&#xff0c;目前环境的管理有以下几个&#xff1a; sdkmanpyenvnvm 这里主要讲一下 sdkman&#xff0c;我们项目是通过 sdkman 进行 java 和 maven 的管理&#xff0c;这个写的挺简单的&#xff0c;加上一个自己写的自…
阅读更多...
unipush2.0实现APP消息推送（2）云函数多个方法的创建与使用

unipush2.0实现APP消息推送（2）云函数多个方法的创建与使用

问题&#xff1a;上篇文章我们已经介绍到了unipush2.0消息推送的实现思路&#xff0c;但是遇到一个问题就是如何在一个云函数里写多个方法供传统服务端调用&#xff1f; 这样做的目的&#xff1a;这样传统服务端就可以调用一个云函数url路径传递不同的参数标识走不同的方法了 …
阅读更多...
uni-app--》基于小程序开发的电商平台项目实战（一）

uni-app--》基于小程序开发的电商平台项目实战（一）

&#x1f3cd;️作者简介&#xff1a;大家好&#xff0c;我是亦世凡华、渴望知识储备自己的一名在校大学生 &#x1f6f5;个人主页&#xff1a;亦世凡华、 &#x1f6fa;系列专栏&#xff1a;uni-app &#x1f6b2;座右铭&#xff1a;人生亦可燃烧&#xff0c;亦可腐败&#xf…
阅读更多...
《AI一键生成抖音商品种草文案》让你秒变带货王！

《AI一键生成抖音商品种草文案》让你秒变带货王！

在这个数字化的时代&#xff0c;我们的生活被各种应用所包围&#xff0c;其中&#xff0c;抖音作为一款短视频分享平台&#xff0c;已经成为了我们生活中不可或缺的一部分。然而&#xff0c;作为一名抖音创作者&#xff0c;你是否曾经遇到过这样的困扰&#xff1a;在创作商品种…
阅读更多...
Linux C : select简介和epoll 实现

Linux C : select简介和epoll 实现

目录 一、基础知识 二、select 模型服务流程 二、select 模式的缺点。 三、poll 概要 四、epoll 服务端实现流程 1.epoll_create&#xff1a; 2.epoll_ctl 3.epoll_wait 五、epoll示例代码实现 1.epoll实现服务端 2.客户端采用tcp进行访问 一、基础知识 首先要知道&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023