微信小程序Day2笔记

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.rhkb.cn/news/129401.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C语言学习系列--＞字符函数和字符串函数

C语言学习系列--＞字符函数和字符串函数

文章目录 一、字符函数1、字符分类函数2、字符转换函数 二、字符串函数1、strlen概述模拟实现 2、strcpy概述模拟实现 3、strcat概述模拟实现 3、strcmp概述模拟实现 4、有限制的字符串函数strncpystrncatstrncmp 4、strstr概述模拟实现 一、字符函数 1、字符分类函数 包含头…
阅读更多...
【算法】二分查找算法——leetcode二分查找、搜索插入位置

【算法】二分查找算法——leetcode二分查找、搜索插入位置

文章目录 二分查找704. 二分查找35. 搜索插入位置 二分查找 二分查找算法是一种在有序数组中查找特定元素的搜索算法。算法的工作原理是&#xff0c;通过比较数组中间元素和目标值&#xff0c;如果目标值等于中间元素&#xff0c;那么查找结束。如果目标值小于或大于中间元素&a…
阅读更多...
Linux驱动【day2】

Linux驱动【day2】

mychrdev.c: #include <linux/init.h> #include <linux/module.h> #include <linux/fs.h> #include<linux/uaccess.h> #include<linux/io.h> #include"head.h" unsigned int major; // 保存主设备号 char kbuf[128]{0}; unsigned int…
阅读更多...
产品波士顿矩阵

产品波士顿矩阵

随着公司产品的增多&#xff0c;每个产品的生命周期节点各不相同&#xff0c;很多时候我们往往在产品结构、资源分配方面会产生各种问题&#xff0c;导致需要发展的产品得不到资源&#xff0c;消耗资源的产品却有无法增长&#xff0c;所谓不聚焦导致的问题其实是资源和发展错配…
阅读更多...
ETCD详解

ETCD详解

一、etcd概念 ETCD 是一个高可用的分布式键值key-value数据库&#xff0c;可用于服务发现。 ETCD 采用raft 一致性算法&#xff0c;基于 Go语言实现。 etcd作为一个高可用键值存储系统&#xff0c;天生就是为集群化而设计的。由于Raft算法在做决策时需要多数节点的投票&…
阅读更多...
编程中的信号处理和系统 - 初学者指南

编程中的信号处理和系统 - 初学者指南

信号处理是工程和编程的一个重要领域。 基本上，它允许工程师和程序员改进数据，以便人们可以更有效地使用它。 例如，由于信号处理，电话中的大部分背景噪音都被消除了。这样，通话的另一端就只能听到您的声音。 其他例子有： 音频和音乐软件图像视频处理软件医学影像软件语…
阅读更多...
Modelsim仿真问题解疑二：ERROR: [USF-ModelSim-70]

Modelsim仿真问题解疑二：ERROR: [USF-ModelSim-70]

现象&#xff1a;在Vivado中已配置modelsim为仿真工具后&#xff0c;运行仿真&#xff0c;报错USF-ModelSim-70和ERROR: [Vivado 12-4473] 详细报错内容如下 ERROR: [USF-ModelSim-70] compile step failed with error(s) while executing C:/Users/ZYP_PC/Desktop/verilog_t…
阅读更多...
JavaScript构造函数

JavaScript构造函数

1、构造函数&#xff1a; 是一个函数&#xff0c;是通过new运算符进行调用&#xff0c;生成一个特殊的对象并返回。 function 函数名([参数]){ this.属性名 ‘属性值’ ... this.属性名 function([参数]){ 函数体语句 } } 通常情况下&#xff0c;建议构造函数的首字母大写 …
阅读更多...
ELK日志框架图总结

ELK日志框架图总结

ELK日志框架图总结 本文目录 ELK日志框架图总结Elastic Stack介绍模式分层图beatselasticsearchkibana模式logstashelasticsearchkibana模式beatslogstashelasticsearchkibana模式beats缓存/消息队列logstashelasticsearchkibana模式elkspringboot Elastic Stack介绍 官网&…
阅读更多...
无涯教程-JavaScript - MIRR函数

无涯教程-JavaScript - MIRR函数

描述 MIRR函数针对一系列定期现金Stream返回修改后的内部收益率。 MIRR会同时考虑投资成本和现金再投资收到的利息。 语法 MIRR (values, finance_rate, reinvest_rate)争论 Argument描述Required/OptionalValues 包含数字的单元格的数组或引用。这些数字表示定期发生的一系…
阅读更多...
数据结构与算法：练习与实践的重要性

数据结构与算法：练习与实践的重要性

文章目录 为什么练习与实践很重要&#xff1f;1. 熟练应用2. 问题解决能力3. 代码效率4. 面试准备 如何练习与实践&#xff1f;1. 在线评测平台2. 自主设计数据结构3. 解决不同类型的问题 持续学习与实践 &#x1f389;欢迎来到数据结构学习专栏~数据结构与算法&#xff1a;练习…
阅读更多...
SQL注入 - 宽字节注入

SQL注入 - 宽字节注入

文章目录 SQL注入 - 宽字节注入宽字节注入前置知识宽字节靶场实战判断是否存在SQL注入判断位数判显错位判库名判表名判列名 SQL注入 - 宽字节注入 靶场 sqli - labs less-32 宽字节注入主要是绕过魔术引号的&#xff0c;数据库解析中除了UTF-8编码外的所有编码如&#xff1a;G…
阅读更多...
算法之双指针题型：

算法之双指针题型：

双指针例题小总结&#xff1a; 力扣27&#xff1a; 移除元素 力扣题目链接 双指针分为&#xff1a; 快慢双指针&#xff1a;同一个起点&#xff0c;同向出发 相向双指针&#xff1a;从两端出发&#xff0c;方向相反&#xff0c;终会相遇 经典的双指针&#xff08;快慢双指…
阅读更多...
pytorch代码实现之SAConv卷积

pytorch代码实现之SAConv卷积

SAConv卷积 SAConv卷积模块是一种精度更高、速度更快的“即插即用”卷积&#xff0c;目前很多方法被提出用于降低模型冗余、加速模型推理速度&#xff0c;然而这些方法往往关注于消除不重要的滤波器或构建高效计算单元&#xff0c;反而忽略了特征内部的模式冗余。 原文地址&am…
阅读更多...
Linux查端口占用的几种方式

Linux查端口占用的几种方式

在Linux中&#xff0c;你可以使用以下几种方式来查看端口的占用情况。 一、使用netstat命令 #安装netstat yum -y install net-tools #检测端口占用 netstat -npl | grep 端口# 几种常规用法 netstat -ntlp //查看当前所有tcp端口 netstat -ntulp | grep 80 //查看所有80端…
阅读更多...
java设计模式，简单工厂和抽象工厂有什么区别？

java设计模式，简单工厂和抽象工厂有什么区别？

java设计模式&#xff0c;简单工厂和抽象工厂有什么区别&#xff1f; 简单工厂模式&#xff1a; 这个模式本身很简单而且使用在业务较简单的情况下。一般用于小项目或者具体产品很少扩展的情况&#xff08;这样工厂类才不用经常更改&#xff09;。 它由三种角色组成&#xf…
阅读更多...
MySQL 8.0.34（x64）安装笔记

MySQL 8.0.34（x64）安装笔记

一、背景 从MySQL 5.6到5.7&#xff0c;再到8.0&#xff0c;版本的跳跃不可谓不大。安装、配置的差别也不可谓不大&#xff0c;特此备忘。 二、过程 &#xff08;1&#xff09;获取MySQL 8.0社区版&#xff08;MySQL Community Server&#xff09;   从 官网 字样 “MySQL …
阅读更多...
卡尔曼滤波公式推导（总结）

卡尔曼滤波公式推导（总结）

假设 小车在t时刻的初始状态可以用Pt&#xff08;当前位置&#xff09;&#xff0c;Vt&#xff08;当前速度&#xff09;&#xff0c;Ut表示加速度&#xff1a; 预测&#xff1a; 利用上一个时刻的旧状态和系统的动量模型&#xff08;如加速度&#xff0c;速度等&#xff09;…
阅读更多...
扫码支付系统_分账收款系统_设计开发OctShop

扫码支付系统_分账收款系统_设计开发OctShop

在当今&#xff0c;移动支付在我们生活中已经是不可或缺的东西&#xff0c;以微信和支付宝为代表的扫码支付系统正在各种线下消费场景中使用&#xff0c;给我们日常的生活购物消费带来了不少的便利。第一些第三方的扫码支付系统更是集合了各种支付渠道&#xff0c;买家或消费者…
阅读更多...
yolov5添加ECA注意力机制

yolov5添加ECA注意力机制

ECA注意力机制简介 论文题目&#xff1a;ECA-Net: Efficient Channel Attention for Deep Convolutional Neural Networks 论文地址&#xff1a;here 基本原理 &#x1f438; ECANet的核心思想是提出了一种不降维的局部跨通道交互策略&#xff0c;有效避免了降维对于通道注意…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023