微信小程序学习笔记(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);//在本函数中调用方法即可
  },
相关推荐
待什么青丝7 分钟前
【TMS570LC4357】之相关驱动开发学习记录2
c语言·arm开发·驱动开发·单片机·学习
行云流水剑18 分钟前
【学习记录】如何使用 Python 提取 PDF 文件中的内容
python·学习·pdf
chaosama27 分钟前
微信小程序带参分享、链接功能
微信小程序·小程序
胡西风_foxww1 小时前
微信小程序动态组件加载的应用场景与实现方式
微信小程序·应用·加载·动态组件
明月醉窗台1 小时前
qt使用笔记二:main.cpp详解
数据库·笔记·qt
虾球xz1 小时前
CppCon 2015 学习:CLANG/C2 for Windows
开发语言·c++·windows·学习
蓝婷儿2 小时前
6个月Python学习计划 Day 17 - 继承、多态与魔术方法
开发语言·python·学习
Shaoxi Zhang2 小时前
NVM常用命令记录
笔记
持续前进的奋斗鸭3 小时前
Postman测试学习(1)
学习·postman
wind_one13 小时前
STM32[笔记]--1.前置准备
笔记·stm32·单片机