微信小程序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.mzph.cn/news/74766.shtml

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

相关文章

PHP8中获取并删除数组中最后一个元素-PHP8知识详解

PHP8中获取并删除数组中最后一个元素-PHP8知识详解

在php8中&#xff0c;array_pop()函数将返回数组的最后一个元素&#xff0c;并且将该元素从数组中删除。语法格式如下&#xff1a; array_pop(目标数组) 获取并删除数组中最后一个元素&#xff0c;参考代码&#xff1a; <?php $stu array(s001>明明,s002>亮亮,s…
阅读更多...
【FPGA】通俗理解从VGA显示到HDMI显示

【FPGA】通俗理解从VGA显示到HDMI显示

注&#xff1a;大部分参考内容来自“征途Pro《FPGA Verilog开发实战指南——基于Altera EP4CE10》2021.7.10&#xff08;上&#xff09;” 贴个下载地址&#xff1a; 野火FPGA-Altera-EP4CE10征途开发板_核心板 — 野火产品资料下载中心 文档 hdmi显示器驱动设计与验证 — …
阅读更多...
ClickHouse场景及其原理

ClickHouse场景及其原理

ClickHouse场景及其原理 ClickHouse是Yandex公司于2016年开源的一个列式数据库管理系统。Yandex的核心产品是搜索引擎&#xff0c;非常依赖流量和在线广告业务&#xff0c;因此ClickHouse天生就适合用户流量分析。 这里直接从原始数据开始消费&#xff0c;通过Flink清洗任务将…
阅读更多...
前端list.push，封装多个对象

前端list.push，封装多个对象

js var fruit [apple, banana];fruit.push(pear);console.log(fruit); // [apple, banana, pear]现在为对象 data1:{addUser: 1,editUser: 1,addTime: null,editTime: 1527410579000,userId: 3,systemNo: mc,userName: zengzhuo,userPassword: e10adc3949ba59abbe56e057f20f88…
阅读更多...
【广州华锐互动】AR远程协助技术提供实时远程协作和指导

【广州华锐互动】AR远程协助技术提供实时远程协作和指导

随着科技的不断发展&#xff0c;企业的运营管理模式也在不断地进行创新和升级。在这个过程中&#xff0c;AR&#xff08;增强现实&#xff09;技术的应用逐渐成为了企业运维管理的新兴趋势。AR远程协助平台作为一种结合了AR技术和远程协助理念的技术手段&#xff0c;为企业运维…
阅读更多...
Netty-NIO

Netty-NIO

文章目录 一、NIO-Selector1.处理accept2.cancel3.处理read4.处理客户端断开5. 处理消息的边界6. 写入内容过多的问题7. 处理可写事件 二、多线程优化三、NIO概念剖析1. stream 和 channel2. IO模型2.1 阻塞IO2.2 非阻塞IO2.3多路复用2.4 同步异步 3. 零拷贝3.1 NIO优化3.2 sen…
阅读更多...
LeetCode 面试题 04.01. 节点间通路

LeetCode 面试题 04.01. 节点间通路

文章目录 一、题目二、C# 题解 一、题目 节点间通路。给定有向图&#xff0c;设计一个算法&#xff0c;找出两个节点之间是否存在一条路径。 点击此处跳转题目。 示例1: 输入&#xff1a; n 3, graph [[0, 1], [0, 2], [1, 2], [1, 2]], start 0, target 2 输出&#xff1…
阅读更多...
点云从入门到精通技术详解100篇-三维点云帧间编码

点云从入门到精通技术详解100篇-三维点云帧间编码

目录 前言 国内外研究现状 几何信息编码研究现状 属性信息研究编码现状
阅读更多...
hive葵花宝典：hive函数大全

hive葵花宝典：hive函数大全

文章目录 版权声明函数1 函数分类2 查看函数列表3 数学函数取整函数: round指定精度取整函数: round向下取整函数: floor向上取整函数: ceil取随机数函数: rand幂运算函数: pow绝对值函数: abs 4 字符串函数字符串长度函数&#xff1a;length字符串反转函数&#xff1a;reverse…
阅读更多...
autoware.ai感知随笔--地面滤波

autoware.ai感知随笔--地面滤波

autwoware.ai中点云预处理–points_preprocessor points_preprocessor cloud_transformer: 点云坐标转换,将输入的点云转化为velodyne坐标系下的点云。 compare_map_filter: 对比激光雷达点云和点云地图&#xff0c;然后提取&#xff08;或去除&#xff09;一致的点。 |input_…
阅读更多...
机器学习实战-系列教程7：SVM分类实战2线性SVM（鸢尾花数据集/软间隔/线性SVM/非线性SVM/scikit-learn框架）项目实战、代码解读

机器学习实战-系列教程7：SVM分类实战2线性SVM（鸢尾花数据集/软间隔/线性SVM/非线性SVM/scikit-learn框架）项目实战、代码解读

&#x1f308;&#x1f308;&#x1f308;机器学习 实战系列 总目录 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 SVM分类实战1之简单SVM分类 SVM分类实战2线性SVM SVM分类实战3非线性SVM 3、不同软间隔C值 3.1 数据标准化的影响 如图左边是没…
阅读更多...
css 左右宽固定，中间自适应——双飞翼布局

css 左右宽固定，中间自适应——双飞翼布局

最近面试的时候遇到一个提问说&#xff0c;如何做到一个左右宽度固定&#xff0c;中间自适应的布局&#xff0c;我的答案不重要&#xff0c;重要的是不是面试官想听到的答案&#xff0c;这样问大概率他想听到的答案一定是双飞翼布局&#xff0c;所以今天就手敲一个双飞翼布局让…
阅读更多...
ES-索引管理

ES-索引管理

前言 数据类型 ​ 搜索引擎是对数据的检索&#xff0c;所以我们先从生活中的数据说起。我们生活中的数据总体分为两种&#xff1a; 结构化数据非结构化数据 结构化数据&#xff1a; 也称作行数据&#xff0c;是由二维表结构来逻辑表达和实现的数据&#xff0c;严格地遵循数…
阅读更多...
智能合约编写高级篇（二）区块哈希介绍

智能合约编写高级篇（二）区块哈希介绍

本文档从区块哈希基本概念出发&#xff0c;详细介绍了中移链的区块哈希交易接口和应用方向。适用于EOS区块链智能合约高级开发人员&#xff0c;熟悉如何获取当前发生交易所在的区块号和区块哈希前缀&#xff0c;并通过Tapos机制验证交易的有效性。 01 概述 &#xff08;一&…
阅读更多...
【大模型】更强的开源可商用的中英文大语言模型baichuan2来了，从零开始搭建

【大模型】更强的开源可商用的中英文大语言模型baichuan2来了，从零开始搭建

【大模型】更强的开源可商用的中英文大语言模型baichuan2来了&#xff0c;从零开始搭建 Baichuan 2 介绍技术报告github 地址 模型下载开放协议协议 测试评估通用领域测试7B 模型结果13B 模型结果 法律、医疗7B 模型结果13B 模型结果 数学、代码7B 模型结果13B 模型结果 多语言…
阅读更多...
html 学习 之 文本标签

html 学习 之 文本标签

下面是一些常见的HTML文本标签&#xff08;&#xff0c;&#xff0c;&#xff0c;&#xff0c;和&#xff09;以及它们的作用&#xff1a; 标签 (Emphasis - 强调): 作用&#xff1a;用于在文本中表示强调或重要性。 示例&#xff1a; <p>这是一段文本&#xff0c;&l…
阅读更多...
数据资产管理：数据目录怎么搞？

数据资产管理：数据目录怎么搞？

经过了站在业务视角的自上而下的数据梳理&#xff0c;以及站在IT视角的自下而上的数据盘点&#xff0c;一套“热腾腾”的数据资产清单终于新鲜出炉了。 通过数据资产盘点&#xff0c;企业终于知道他们拥有哪些数据、如何使用数据、是否安全以及数据在哪里。 然而&#xff0c;据…
阅读更多...
微博一面：JVM预热，你的方案是啥？

微博一面：JVM预热，你的方案是啥？

说在前面 在40岁老架构师 尼恩的读者社区(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如微博、阿里、汽车之家、极兔、有赞、希音、百度、网易、滴滴的面试资格&#xff0c;遇到一几个很重要的面试题&#xff1a; JVM预热&#xff0c;你的方案是啥&#xff1f;Springb…
阅读更多...
docker 和 podman的区别

docker 和 podman的区别

Podman 和 Docker 都是用于容器化应用程序的工具&#xff0c;它们在很多方面非常相似&#xff0c;但也有一些关键区别&#xff1a; 1. 架构和权限&#xff1a; - Docker&#xff1a;Docker 使用守护进程&#xff08;dockerd&#xff09;来管理容器&#xff0c;它需要在操作…
阅读更多...
TortoiseGit设置作者信息和用户名、密码存储

TortoiseGit设置作者信息和用户名、密码存储

前言 Git 客户端每次与服务器交互&#xff0c;都需要输入密码&#xff0c;但是我们可以配置保存密码&#xff0c;只需要输入一次&#xff0c;就不再需要输入密码。 操作说明 在任意文件夹下&#xff0c;空白处&#xff0c;鼠标右键点击 在弹出菜单中按照下图点击 依次点击下…
阅读更多...
最新文章

Copyright @ 2022~2023