微信小程序-2

数据绑定

  • index.js
Page({
  data: {
    info: 'hello world',
    randomNumber: Math.random() * 10,
    imgSrc:'http://www.itheima.com/images/logo.png'
  }
})
  • index.wxml
<view>{{ info }}</view>

<view>{{ randomNumber >= 5 ? '随机数大于等于5' : '随机数小于5' }}</view>

<image src="{{ imgSrc }}" mode="widthFix"/>

事件绑定

常用的事件

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

事件对象的属性

event.target 可简写为 e.target

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

bindtap

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

无参：

  • index.wxml
<button type="primary" bindtap="btnTapHandler">按钮</button>
  • index.js
Page({
  // 定义按钮的事件处理函数
  btnTapHandler(e) {  // 按钮的 tap 事件处理函数
    console.log(e);   // 事件参数对象 e
  }
})

含参：

  • index.wxml
<view>{{ count }}</view>
<button type="primary" bindtap="CountChange" data-info="{{ addNum }}">+10</button>
  • index.js
Page({

  // 点击按钮后事件处理函数
  CountChange(e) {     // 事件参数对象 e
    this.setData({
      count: this.data.count + e.target.dataset.myinfo
    });
  },

  // 页面的初始数据
  data: {
    count: 0,
    addNum: 10
  }
})

bindinput

在小程序中，通过 input 事件来响应文本框的输入事件，语法格式如下：

  • index.wxml
<input type="text" value="{{ content }}" bindinput="inputHandler" />
<view>您输入的内容是：{{ content }}</view>
  • index.js
Page({
  data:{
    content: ''
  },

  inputHandler(e) {
    // e.detail.value 是变化过后，文本框最新的值
    this.setData({
      content: e.detail.value
    }) 
  }
})

条件渲染

普通渲染

  • index.js
Page({
  data:{
    type: 1
  }
})
  • index.wxml
<view wx:if="{{ type === 1 }}">男</view>
<view wx:elif="{{ type === 0 }}">女</view>
<view wx:else> 未填写 </view>

批量渲染

如果要一次性控制多个组件的展示与隐藏，可以使用一个标签将多个组件包装起来，并在标签上使用 wx:if 控制属性，如下所示：（注意：并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染）

  • 写如下代码：
<block wx:if="{{ true }}">
  <view>one</view>
  <view>two</view>
</block>
  • 最终展示的结果是：
  <view>one</view>
  <view>two</view>

hidden

  • index.js
Page({
  data:{
    flag: true
  }
})
  • index.wxml
<view hidden="{{ flag }}">条件为true的时候，隐藏元素，否则显示</view>

循环渲染

默认情况：

  • index.js
Page({
  data:{
    arr: ['华为', '小米', '苹果', 'OPPO']
  }
})
  • index.wxml
<view wx:for="{{ arr }}">
  索引：{{ index }}，每一项：{{ item }}
</view>

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

<view wx:for="{{ arr }}" wx:for-index="idx" wx:for-item="itemName">
  索引：{{ idx }}，每一项：{{ itemName }}
</view>

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

  • index.js
Page({
  data:{
    userList: [
      {id: 1 ,name: '小明'},
      {id: 2 ,name: '小化'},
      {id: 3 ,name: '小工'}
      ]
  },
})
  • index.wxml
<view wx:for="{{ userList }}" wx:key="id">
  {{ item.name }}
</view>

WXSS

屏幕适配

rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，在宽度上等分为 750 份

小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配

样式导入

@import “/xxx.wxss”

window 配置

小程序窗口的组成部分

在这里插入图片描述

window 节点配置项

在这里插入图片描述

  • 设置导航栏的标题：
app.json -> window -> navigationBarTitleText
  • 设置导航栏的背景色
app.json -> window -> navigationBarBackgroundColor

注意：颜色值只能接受6位16进制数，例如：#5a6b7c
  • 设置导航栏的标题颜色
app.json -> window -> navigationBarTextStyle

下拉刷新

app.json -> window -> enablePullDownRefresh

注意：在 app.json 中启用下拉刷新功能，会作用于每个小程序页面

下拉刷新时的窗口背景色

app.json -> window -> backgroundColor

注意：指定16进制的颜色值 #efefef

下拉刷新时的loading样式

app.json -> window -> backgroundTestStyle

设置上拉触底的距离

概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为

注意：默认距离为 50 px，如果没有特殊需求，建议使用默认值即可

app.json -> window -> onReachBottomDistance

tabBar 配置

基本介绍

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。

小程序中通常将其分为：

  • 底部 tabBar
  • 顶部 tabBar

注意：tabBar 中只能配置最少2个、最多 5 个 tab 页签，当渲染顶部 tabBar 时，不显示 icon，只显示文本

组成部分

在这里插入图片描述

在这里插入图片描述

tabBar 节点的配置项

在这里插入图片描述

  • app.json
{
  "pages": [
    "pages/index/index",
    "pages/me/me"
  ],
  
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "WeChat",
    "navigationBarBackgroundColor": "#ffffff"
  },
  
  "tabBar": {
  	"list": [
  		{...},
        {...},
    ],
    "position": "top"
  }
  
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

list 中 tab 项

在这里插入图片描述

  • app.json
{
  "pages": [
    "pages/index/index",
    "pages/me/me"
  ],
  
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "WeChat",
    "navigationBarBackgroundColor": "#ffffff"
  },
  
  "tabBar": {
  	"list": [
  		{
  			"pagePath": "pages/index/index",
  			"text": "首页"
  		},
        {
  			"pagePath": "pages/me/me",
  			"text": "我的"
  		}
    ],
    "position": "top"
  }
  
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

页面配置

在这里插入图片描述

  • index.json
{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#00b261",
  "backgroundTextStyle": "light"
  ...
}

网络数据请求

请求限制

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

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

在这里插入图片描述

配置请求合法域名

配置步骤：登录微信小程序管理后台 => 开发 => 开发设置 => 服务器域名 => 修改 request 合法域名

注意事项：

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

跳过限制

跳过 request 合法域名校验，如果后端程序员仅仅提供了 http 协议的接口，暂时没有提供 https 协议的接口，此时为了不耽误开发的进度，我们可以在微信开发者工具中（详情 => 本地设置），临时开启 开发环境不校验请求域名、TLS版本及HTTPS证书 选项，从而跳过 request 合法域名的校验。

注意：跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！

发起数据请求

调用微信小程序提供的 wx.request() 方法，可以发起数据请求，如下所示：

  • index.wxml
<button bindtap="getInfo">发起GET请求</button>
<button bindtap="postInfo">发起POST请求</button>
  • index.js
Page({
  // 发起GET数据请求
  getInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/get',   // 请求的接口地址，必须基于 https 协议
      method: 'GET',      // 请求的方式
      data:{              // 发送到服务器的数据
        name: 'zs',
        age: 20
      },
      success: (res) => {   // 请求成功之后的回调函数
        console.log(res.data)
      }
    })
  },
  // 发起POST请求
  postInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method: "POST",
      data: {
        name: 'ls',
        age: 33
      },
      success: (res) => {
        console.log(res.data);
      }
    })
  },
})

页面刚加载时请求数据

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

Page({

  // 发起GET数据请求
  getInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/get',   // 请求的接口地址，必须基于 https 协议
      method: 'GET',      // 请求的方式
      data:{              // 发送到服务器的数据
        name: 'zs',
        age: 20
      },
      success: (res) => {   // 请求成功之后的回调函数
        console.log(res.data)
      }
    })
  },
  
  // 发起POST请求
  postInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method: "POST",
      data: {
        name: 'ls',
        age: 33
      },
      success: (res) => {
        console.log(res.data);
      }
    })
  },
  
  // 声明周期函数——监听页面加载
  onload: function (options) {
    this.getInfo()
    this.postInfo()
  },
})

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

HarmonyOS—HAP唯一性校验逻辑

HarmonyOS—HAP唯一性校验逻辑

HAP是应用安装的基本单位&#xff0c;在DevEco Studio工程目录中&#xff0c;一个HAP对应一个Module。应用打包时&#xff0c;每个Module生成一个.hap文件。 应用如果包含多个Module&#xff0c;在应用市场上架时&#xff0c;会将多个.hap文件打包成一个.app文件&#xff08;称…
阅读更多...
JeecgBoot Vue3前端项目性能优化按需加载方案

JeecgBoot Vue3前端项目性能优化按需加载方案

JeecgBoot vue3前端项目在 3.5.5 版本之前&#xff0c;的确存在很严重的性能问题&#xff0c;大家可以参考以下文档进行升级。 按需加载改造方法 1、全局注册地方去掉2、组件改成异步注册3、用不到的大组件可以删掉 【精简项目方案】 大组件 1、富文本 tinyme2、Markdown3、…
阅读更多...
深度学习算法优化流程

深度学习算法优化流程

深度学习算法的一般优化流程&#xff0c;具体的实施方法和步骤可能会根据具体任务和数据的特点而有所不同&#xff0c;优化流程通常包括以下几个主要步骤&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作…
阅读更多...
中文文本分类_1（pytorch 实现）

中文文本分类_1（pytorch 实现）

import torch import torch.nn as nn import torchvision from torchvision import transforms, datasets import os, PIL, pathlib, warningswarnings.filterwarnings("ignore") # 忽略警告信息# win10系统 device torch.device("cuda" if torch.cuda.i…
阅读更多...
（1）预处理

（1）预处理

我们需要的文件结构如上 main.cpp add.h add.cpp add.h 这里使用riscv的工具链编译为.i文件&#xff0c;需要使用-E&#xff0c;就是只进行预处理&#xff0c;我们可以得到两个.i文件即main.i和add.i main.i 这里看到main.i里头文件全部替换&#xff0c;然后多了三万多行 所以…
阅读更多...
【C++第三课 - 类和对象中】构造函数、析构函数、拷贝构造函数

【C++第三课 - 类和对象中】构造函数、析构函数、拷贝构造函数

目录 类的6个默认成员函数构造函数自己写的构造函数默认生成的构造函数 析构函数概念特征 拷贝构造函数特征 运算符重载 、 >、 < 赋值重载Date类的完善构造函数的完善用复用 类的6个默认成员函数 默认成员函数&#xff1a;不写编译器也会默认生成一份 构造函数 自己…
阅读更多...
uniapp制作--简单的tab切换

uniapp制作--简单的tab切换

一、实现思路 在UniApp中&#xff0c;可以使用v-if来控制Tab栏并进行切换。 创建一个方法来控制点击时的效果。 二、实现步骤 ①view部分展示 <!-- tab选项 --><view class"select-area"><view class"select-top"><view clas…
阅读更多...
恒创科技2024开年采购海外服务器配置及价格汇总

恒创科技2024开年采购海外服务器配置及价格汇总

喜迎龙年&#xff0c;开年采购开好局。值企业开工采购浪潮来袭之际&#xff0c;为进一步满足个人开发者到中小企业等各类型用户的选购需求&#xff0c;中国香港及亚太数据中心领先服务商恒创科技启动了“ 2024 开年采购开好局”大促活动&#xff0c;该活动已于 3 月 5 日正式上…
阅读更多...
消费品亚马逊化学测试要求有哪些？RSL，双酚A（BPA）REACH，CPSIA等

消费品亚马逊化学测试要求有哪些？RSL，双酚A（BPA）REACH，CPSIA等

消费品亚马逊化学测试要求有&#xff1a;RSL&#xff0c;双酚A&#xff08;BPA&#xff09;REACH&#xff0c;CPSIA&#xff0c;加州65&#xff0c;等 亚马逊对所有在其官方网站上架产品的化学物质和重金属限制&#xff0c;以及亚马逊如何检查符合欧盟和美国的消费品法规中的第…
阅读更多...
【科研基础】插图摘录

【科研基础】插图摘录

FedSL: Federated Split Learning for Collaborative Healthcare Analytics on Resource-Constrained Wearable IoMT Devices Blockchain-Based Trustworthy and Efficient Hierarchical Federated Learning for UAV-Enabled IoT Networks
阅读更多...
langchain学习笔记（十一）

langchain学习笔记（十一）

关于langchain中的memory&#xff0c;即对话历史&#xff08;message history&#xff09; 1、 Add message history (memory) | &#x1f99c;️&#x1f517; Langchain RunnableWithMessageHistory&#xff0c;可用于任何的chain中添加对话历史&#xff0c;将以下之一作为…
阅读更多...
怎么采集GBK或GB2312等特殊字符编码的网站数据

怎么采集GBK或GB2312等特殊字符编码的网站数据

如果要采集的网站是GBK或GB2312等特殊字符编码&#xff0c;采集结果可能是一堆看不懂的文字或乱码&#xff0c;无法使用。 通常网页文章采集工具有字符编码选项&#xff0c;默认是UTF-8&#xff08;现在大部分网站都是&#xff09;&#xff0c;改选为GBK或GB2312字符编码即可&…
阅读更多...
c++数据结构算法复习基础-- 3 --线性表-单向链表-笔试面试常见问题

c++数据结构算法复习基础-- 3 --线性表-单向链表-笔试面试常见问题

1、单链表逆序 思路图 代码实现 //著: 链表结构里记得加 friend void ReverseLink(Clink& link); void ReverseLink(Clink& link) {Node* p link.head_->next_;while( p nullptr){return;}Node* q p->next_;link.head_->next_ nullptr;while(p ! nullpt…
阅读更多...
Java解决杨辉三角

Java解决杨辉三角

Java解决杨辉三角 01 题目 给定一个非负整数 *numRows&#xff0c;*生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]]示例 2: 输入: numRo…
阅读更多...
亚信安慧AntDB：编织数据丝路，缔造创新篇章

亚信安慧AntDB：编织数据丝路，缔造创新篇章

亚信安慧AntDB作为一款具备国产化升级改造经验的数据库系统&#xff0c;在15年的平稳运行中积累了丰富经验。通过持续的创新和技术进步&#xff0c;AntDB不断优化性能和功能&#xff0c;满足用户的需求&#xff0c;与国际先进数据库系统保持竞争力。 AntDB秉承着与用户和行业保…
阅读更多...
结合大象机器人六轴协作机械臂myCobot 280 ，解决特定的自动化任务和挑战！（下）

结合大象机器人六轴协作机械臂myCobot 280 ，解决特定的自动化任务和挑战！（下）

Limo Pro 小车建图导航 引言 前景提要&#xff1a;我们在上文介绍了使用LIMO cobot 实现一个能够执行复杂任务的复合机器人系统的应用场景的项目&#xff0c;从以下三个方面&#xff1a;概念设计、系统架构以及关键组件。 本文主要深入项目内核的主要部分&#xff0c;同样也主要…
阅读更多...
python自动化管理和zabbix监控网络设备（zabbix部署监控网络设备以及验证部分）

python自动化管理和zabbix监控网络设备（zabbix部署监控网络设备以及验证部分）

目录 前言 一、Zabbix搭建 二、FW1 三、python脚本 四、core-sw1 五、core-sw2 六、DMZ-sw1 前言 详细配置视频解析访问&#xff1a;白帽小丑的个人空间-白帽小丑个人主页-哔哩哔哩视频 一、Zabbix搭建 sed -i s/SELINUXenforcing/SELINUXdisable/ /etc/selinux/config…
阅读更多...
力扣——盛最多水的容器

力扣——盛最多水的容器

题目描述&#xff1a; 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xff1a;…
阅读更多...
【论文笔记】Gemma: Open Models Based on Gemini Research and Technology

【论文笔记】Gemma: Open Models Based on Gemini Research and Technology

Gemma 日期: March 5, 2024 平台: CSDN, 知乎 状态: Writing Gemma: Open Models Based on Gemini Research and Technology 谷歌最近放出的Gemma模型【模型名字来源于拉丁文gemma&#xff0c;意为宝石】采用的是与先前Gemini相同的架构。这次谷歌开源了两个规模的模型&…
阅读更多...
Golang Copy()方法学习

Golang Copy()方法学习

前言 主要是涉及到深浅拷贝相关的&#xff0c;但是在看的一个资料过程中发现他有错…并且一系列&#xff0c;复制粘贴他的&#xff0c;也都错了。 错误文章指路 很显然&#xff0c;Copy是深拷贝啊&#xff01;&#xff01;&#xff01; Copy功能 copy的代码很少&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023