微信小程序学习笔记(3)

文章目录



1、数据绑定

Mustache语法(双大括号)

html 复制代码
<view>{{info}}</view>

//同时在本文件的 .js文件中写入数据
js 复制代码
Page({

  data: {
     info:'hello world',
    randomNum: Math.random(),//随机生成数字
    randomNumFixed: Math.random().toFixed(2) //随机生成2位小数的小数  
  }
          
})

通过该语法可以动态绑定属性

data中也可以写入图片链接,然后通过该语法写入wxml

2、事件绑定

targetcurrentTarget

  • 前者是触发事件的源头组件
  • 后者是当前时间所绑定的组件
  • 例如:view 中存在一个 buttonview绑定一个bindtap,点击 button 后,e.target指向是buttone.currentTargetview

例如:

html 复制代码
<button type="primary" bind:tap="btn">
点击
</button>

别忘了在 js中写入btn的函数



txt 复制代码
通过 this.setData({}) 给 data 中的数据赋新值
js 复制代码
btn(){
    this.setData({
        count: this.data.count+1 //count是data中的数据
    })
}


bindinput: 相应文本框输入事件

绑定方式:

html 复制代码
<button type="primary" bindinput="btn">
点击
</button>
js 复制代码
btn(e){
    console.log(e.detail.value);//获取文本框最新的值
}

3、事件传参

不能再绑定事件的同时传递参数

例如:

html 复制代码
<button type="primary" bind:tap="find(123)"></button>

123 不能作参数传到 js

可以用以下方式:

html 复制代码
<button type="primary" bind:tap="find" data-info="{{2}}"></button>

info可以随便命名,格式为data-*

  • 注意传入数字式建议写为 {``{数字}}形式,不然传进去的为文本类型

传到js中的find函数中时,形参获取方式为:e.target.dataset.参数名字(和data-*中的*的名字一样)

js 复制代码
find(e){
    this.setData({
        count: this.data.count+e.target.dataset.info //count是data中的数据
        // 在 input 标签中可以用 value="" 为文本框赋初始值
    })
}


4、条件渲染

(1) wx:if="((duge))"

注意上一行的 小括号应为中括号 {(由于渲染问题不能写中括号)

html 复制代码
<view wx:if="{{pad === 1}}">值等于1</view>
<view wx:elif="{{pad === 2}}">值等于2</view>
<view wx:else>值等于3</view>
  • 注意: 在写入差值语法时,双大括号外不要有多余的空格!!!!!!!

结合 <block> 使用 wx:if

html 复制代码
<block wx:if="{{true}}">
	<view> 999 </view>
	<view> 888 </view>
</block>

注意:<block>只是起到包裹作用,不会在渲染时候进行渲染


(2) hidden

html 复制代码
<view hidden="{{pad}}">等于 true 是显示,等于false时隐藏</view>

前两者区别

  • wx:if动态创建和移除元素的方式控制
  • hidden切换样式的方式控制(display:none / block;)
  • 频繁切换时,使用hidden
  • 控制条件复杂时,使用wx:if

(3) wx:for

循环渲染

html 复制代码
// arr 是 data 中的数组
<view wx:for="{{arr}}">
   索引值:{{index}} , item : {{item}}
</view>

结果为:

(4) wx:key

在实现列表渲染时,设置 键值可以提高渲染效率

wx:for中也可以使用

html 复制代码
<view wx:for="{{arr}}" wx:key="index">
	索引值:{{index}} , item : {{item}}
</view>
  • wx:key中不要用差值语法!!!!!
  • 键值一定要唯一

title: 微信小程序学习笔记(4)

date: 2024-03-19 16:53:42

tags:

  • wxss
  • wxml
    categories:
  • 微信小程序

-------------------------------------------------------------

1.wxss

css基本一样, rpx@importwxss专有的

(1)、rpx

解决适配的问题的单位尺寸

(2)、@import

语法:

css 复制代码
@import "相对路径";

2、app.json中的用法

注意:页面中无 window 的标签,需要属性直接写进去即可,他只能配置与 window 相关的配置项

(1)、window用法

3、全局配置tabBar

在 window 中设置的

用于实现多页面的切换,小程序中分为:"底部tabBar","顶部tabBar"

一般来讲,tabBar中只能包含最少两个,最多五个的tab标签

tab为顶部时,不显示icon

4、请求方法

js 复制代码
post(){
    wx.request({
        url: 'url',//请求接口地址,必须基于 https 协议
        method: 'post',//请求方式 post get
        data:{
            // 发送到后端的数据
        },
        success:(res)=>{
            //成功回调函数
        }
    })
},

在页面刚加载的时候请求数据,:

js 复制代码
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.btn(123);//在本函数中调用方法即可
  },
相关推荐
数据与后端架构提升之路12 分钟前
从神经元到神经网络:深度学习的进化之旅
人工智能·神经网络·学习
一行121 分钟前
电脑蓝屏debug学习
学习·电脑
咔叽布吉28 分钟前
【论文阅读笔记】CamoFormer: Masked Separable Attention for Camouflaged Object Detection
论文阅读·笔记·目标检测
johnny23329 分钟前
《大模型应用开发极简入门》笔记
笔记·chatgpt
亦枫Leonlew31 分钟前
微积分复习笔记 Calculus Volume 1 - 4.7 Applied Optimization Problems
笔记·数学·微积分·1024程序员节
小肥象不是小飞象34 分钟前
(六千字心得笔记)零基础C语言入门第八课——函数(上)
c语言·开发语言·笔记·1024程序员节
星LZX35 分钟前
WireShark入门学习笔记
笔记·学习·wireshark
阑梦清川36 分钟前
在鱼皮的模拟面试里面学习有感
学习·面试·职场和发展
qq_4330994036 分钟前
Isaac Gym学习笔记——概述
学习
努力变厉害的小超超3 小时前
ArkTS中的组件基础、状态管理、样式处理、class语法以及界面渲染
笔记·鸿蒙