微信小程序常用到的

微信小程序常用的事件 在微信小程序中,可以通过自定义事件来实现组件之间的通信,或者在页面中实现不同部分之间的交互。自定义事件可以通过触发,也可以通过bind和catch来监听和捕获自定义事件。以下是自定义事件的基本使用方法:1.触发自定义事件:在组件中使用方法触发自定义事件,可以传递参数给事件处理函数。// 在组件中触发自定义事件2.监听自定义事件:在组件或页面中使用bind来监听自定义事件,然后在对应的事件处理函数中处理逻辑。-- 在组件或页面中监听自定义事件 -->// 在组件或页面中定义自定义事件的处理函数。 阅读详情

1.列表渲染
使用 wx:for-item 可以指定数组当前元素的变量名,
使用 wx:for-index 可以指定数组当前下标的变量名:

<view wx:for="{{array}}" wx:for-index="index" wx:for-item="item"  wx:key=""     >
  {{idx}}: {{itemName.message}}
</view>index

2.条件渲染
wx:if
在框架中,使用 wx:if="" 来判断是否需要渲染该代码块:

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块:

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

3.数据通信
常用post

wx.request({
      url: app.globalData.webroot + '/index/user/updateUserMySubCat', 
      method: "post",
      data: {
        mySubCat: subcatArr,
        uid: uid
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded' //post请求
      },
      success(res) {
        console.log(res.data.msg);
      }
    })

4.标签属性

  <view class="cu-item {{index==tabCur?'current ':'noselect'}}"  bindtap="tabSelect" data-id="{{index}}" style="height:60rpx;line-height:60rpx;">
   xxxxxxxx
  </view>

注意data-xx是给当前标签赋属性 记住xx是小写,不要写大写字母

   ////////////// js获取属性值:
  id= e.currentTarget.dataset.id;

5.跳转页面

 wx.navigateTo({
      url: 'test?id=1',
    })
 返回上一个页面    
wx.navigateBack({
  delta: 2
})

6.表单组件 获取到表单输入的值
6-1 textarea

  <textarea bindinput="textareaAInput" maxlength="-1" value="{{content}}" placeholder="内文"></textarea>

          //js内文change事件
      textareaAInput:function(e){
        var that = this;
        var value = e.detail.value;
        //字数不能超过500
        if (value.length>500){
            //
          wx.showToast({
            title: '字数不能超过500',
            icon: 'none',
            duration: 1000
          })
          return;
        }
        that.setData({
          content: value
        })
        console.log('textarea发生change事件,携带value值为:', e.detail.value)
      },

6-2 input type=text

<input placeholder="标题" value="{{title}}" bindinput="titleChange"/>

 //js标题change事件
  titleChange: function (e) {
    var that = this;
    var value = e.detail.value;
    that.setData({
      title: value
    })
    console.log('title发生change事件,携带value值为:', e.detail.value)
  },

6-3 radio-单选按钮

<radio-group class="block" style="height:60%;" role="radiogroup" aria-label="单选区" bindchange="radioChange">
  <view class=" " style="height:10rpx;top:-10%;">
      <radio class="orange   paddingSize" checked="{{ifselected1}}" value="1" >是</radio>
      <radio class="orange  paddingSize"  checked="{{ifselected2}}"  value="0">否</radio>
    </view>
   </radio-group>


    //js  radio发生change事件
  radioChange:function(e){
    var that=this;
    var value = e.detail.value;
    // ifselected1:true,//是否选中单选框 是
    //ifselected2: false,//是否选中单选框 否
    if (value==0){
      that.setData({
        radioValue: value,
        ifselected1:false,
        ifselected2: true
      })
    }else{
      that.setData({
        radioValue: value,
        ifselected2: false,
        ifselected1: true
      })
    }
    
    console.log('radio发生change事件,携带value值为:', e.detail.value)
  },

7.弹出框 相当于alert

wx.showToast({
  title: '成功',
  icon: 'success', 
  duration: 2000
})

 wx.showToast({
      title: '失败',
      icon: 'none', 
      duration: 2000
    })

-------------------------------以后还有常用的会接着补充

微信小程序常用 API 微信小程序提供了丰富的 API,覆盖用户交互、数据处理、设备控制等多个场景。以下是常用 API 及其典型应用场景的详细说明:​。 阅读详情

相关推荐

微信小程序常用控件汇总

1.图片标签: &lt;image src="/images/aaa.png"&gt;&lt;/image&gt; 2.文本标签: &lt;text&gt;Hello&lt;/text&gt; 3.swiper滑动轮播: &lt;swiper catchtap="onSwiperTap" vertical="{{false}}" indicator-dots

陈正的博客 5318

微信小程序bindinput输入值的值获取不到

bindinput获取不到值且总是提示黄色警告

weixin_43791884的博客 2623

微信小程序---常用样式和组件

在开 Web 网站的时候:页面的结构由HTML进行编写,例如:经常会用到divpspanimga等标签页面的样式由CSS进行编写,例如:经常会采用.class#idelement等选择器但在小程序中不能使用HTML标签,也就没有DOM和BOM,同时仅仅支持部分CSS选择器不过不用担心,小程序中提供了同样的角色:其中WXML充当的就是类似HTML的角色,只不过在WXML中没有divpspanimga等标签,在WXML中需要使用 小程序提供的viewtextimagenavigator。

m0_56769104的博客 1277

VUE 爬坑之旅--class 动态绑定的几种写法

根据某个状态或条件加载某个 class 这种使用场景就是在原有 class 的基础上,通过某个状态或者条件来判断是否要追加 class,语法为: :class='{'要加载的class':加载此class需要的条件}' 示例代码: &lt;div class = "item unselected" @click = "selectPrice(item)" ...

有问题可关注公众号:前端研究院 后台输入问题回复 762

微信小程序的常用事件的用法

bindtap 或 catchtap:点击事件,当用户点击某个元素时触发。bindinput 或 catchinput:输入事件,当用户在输入框中输入内容时触发。bindchange 或 catchchange:选择改变事件,当用户选择不同的选项或者切换开关状态时触发。bindsubmit 或 catchsubmit:表单提交事件,当用户提交表单时触发。bindscroll 或 catchscroll:滚动事件,当页面滚动时触发。

ike_kenny的博客 981

小白如何在微信小程序中使用常用的API

wx.request({ url: 'https://api.example.com', method: 'POST', data: { username: '小白', password: '123456' }, success: function(res) { console.log(res.data) } })在本文中,我们将介绍一些常用的API,并给出详细的代码案例,来帮助小白快速上手微信小程序开发。小程序可以使用wx.getUserInfo方法来获取用户的基本信息,包括用户的昵称、头像、性别等。

吃不胖. 1028

Vue商城项目笔记一

0.开发项目流程 1、书写静态页面 2、拆分组件 3、获取服务器的数据动态展示 4、完成相应的动态业务逻辑 1.创建项目 在对应目录下使用脚手架创建项目 vue create vue_shop 创建项目后,先了解对应的目录结构 node_modules:项目依赖文件夹 public:一般放置一些静态资源(图片等),放在public文件夹中的静态资源,webpack进行打包的时候,会原封不动打包到dist文件夹中 src:源代码文件夹 ----assets:...

weixin_44215068的博客 1812

遗传算法详解 附python代码实现

遗传算法 遗传算法是用于解决最优化问题的一种搜索算法。从名字来看,遗传算法借用了生物学里达尔文的进化理论:”适者生存,不适者淘汰“,将该理论以算法的形式表现出来就是遗传算法的过程。 问题引入 上面提到遗传算法是用来解决最优化问题的,下面我将以求二元函数: def F(x, y): return 3*(1-x)**2*np.exp(-(x**2)-(y+1)**2)- 10*(x/5 - x**3......

ha_ha_ha233的博客 22万+

微信小程序04-常用API上

scroll-view组件 scroll-view组件的常用属性如下 代码演示: 在pages/index/index.js文件中添加scroll()事件处理函数并输出e.detail的值。 通过e.detail可以获取滚动时的位置信息。 scrollLeft:横向滚动条左侧到视图左边的距离。 scrollTop:纵向滚动条上端到视图顶部的距离。 scrollHeight:纵向滚动条在y轴上最大滚动距离。 scrollWidth:横向滚动条在x轴上最大的滚动距离。 deltaX:横向滚动条的滚

李宥的博客 3194

【Linux】常见指令的使用

Linux常用指令

qq_74897518的博客 1479

逐飞vs龙邱:英飞凌miniwiggler仿真器硬件接口差异全解析(附拆机对比图)

本文通过拆解对比逐飞与龙邱两家厂商的英飞凌miniwiggler仿真器,详细解析了其硬件接口的核心差异。重点分析了Type-C接口的取舍、DAP调试协议(SWD)的支持、电源设计(跳线帽vs拨码开关)以及工艺用料,为嵌入式开发者与智能车竞赛选手提供了清晰的选型参考和实际应用建议。

weixin_29189003的博客 113

微信小程序常用图标大全1

微信小程序常用图标大全1

weixin_53000033的博客 6793

ZYNQ开发(2)在Linux系统层上PL-PS通过AXI-DMA传输数据详细步骤及注意事项

参考的网络资料 https://github.com/bperez77/xilinx_axidma/tree/master https://gitlab.gnome.org/HosseinBeheshti/UlteraZed7EV/-/tree/master/petalinux/xilinx_axidma https://www.icode9.com/content-3-925319.html https://blog.youkuaiyun.com/weixin_38218267/article/details/1

aizaiyueye的专栏 3448

微信小程序常用控件

微信小程序常用控件 1.弹窗,确认并跳转页面 wx.showModal({ title: '提示:', content: '非法访问,请重新找回密码', //取消按钮不显示 showCancel: false, //确认按钮 success: function (res) { w...

Daisy_Journal的博客 987

YOLO26 魔术师专栏|全网独家首发!2026 原创级创新赋能 CV 全场景

基于 YOLO26 核心架构迭代,融合原创自研、2026 AAAI/CVPR/ICCV 顶会前沿成果,打造更高效、更灵活、更具创新性的计算机视觉解决方案!

①答疑群聊服务;②YOLO大模型知识问答系统;③计算机视觉论文生成智能体; 4367

卷积码Viterbi译码算法原理及C语言实现

具体而言,卷积码的编码过程是将输入数据和编码器中的状态进行异或操作,输出码字为各个状态对应的结果。Viterbi译码算法是一种最大似然译码算法,根据接收到的含有噪声的码字,寻找出最有可能的原始数据序列。(2) 递推计算:根据接收到的码字和当前状态,计算下一时刻各个状态的路径度量,并记录每个状态的前驱状态。以上代码实现了一个简单的卷积码Viterbi译码算法,通过接收到的码字进行译码,并输出解码结果。(1) 初始化:将所有状态的路径度量初始化为一个很大的值,选择路径度量最小的状态作为起始状态。

2301_79331421的博客 826

微信小程序05-常用API下

腾讯地图SDK根据不同的开发场景提供了多种版本,针对微信小程序开发,应使用“微信小程序JavaScript SDK”,它可以在微信小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务。腾讯地图SDK是一套为开发者提供多种地理位置服务的工具,可以使开发者在自己的应用中加入地图相关的功能,轻松访问腾讯地图服务和数据,更好地实现微信小程序的地图功能。**实现用户登录:**在app.js文件的App({})中编写代码,实现微信小程序启动时自动执行登录操作。

李宥的博客 3875

uniapp:实现APP获取陀螺仪数据、加速传感器、线性加速传感器,uniApp实时监听陀螺仪【XYZ】数据及停止监听与资源释放等功能示例源码,根据需求做功能(完美兼容Android安卓、苹果ios)

uniapp陀螺仪,uniapp加速传感器,uniapp线性加速传感器,APP陀螺仪数据,uniapp app 端获取陀螺仪数据示例代码,手机中获取陀螺仪的数据,uniApp实时获取陀螺仪xyz数据,android陀螺仪方向,获得陀螺仪传感器,处理传感器数据,停止监听与资源释放,Android使用陀螺仪,uniapp苹果ios陀螺仪,uni-app设备之(加速计,罗盘,陀螺仪)插件安卓/IOS APP提供了获取陀螺仪数据的能力,手机陀螺仪传感器获得手机自身旋转的角度,陀螺仪获取旋转角度,陀螺仪、加速度传感器

✅ 精选推荐文章 4268

微信小程序开发常用的布局

这些是微信小程序开发中常用的布局方式。你可以根据具体的页面需求和设计来选择合适的布局方式。这些布局技术可以帮助你创建灵活、响应式和美观的小程序页面。

ultramand的博客,重生之我在cad上二次开发猛猛敲C#代码~ 3556

CloudCompare源码分析之CCCoreLib模块:ICP算法(阅读经典)

CloudCompare源码分析之CCCoreLib模块:ICP算法(阅读经典)

dayuhaitang1的博客 2551

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

微信小程序开发中常用的组件介绍

在微信小程序的世界里,组件就像是搭建应用的积木块,每一个组件都有其独特的功能和用途。通过合理搭配和使用这些组件,开发者可以轻松构建出功能丰富、界面美观的小程序。想象一下,当你想要创建一个具有复杂交互功能的小程序时,如果没有合适的组件来辅助,那么开发工作将会变得相当繁琐。而借助微信小程序提供的丰富组件库,即使是初学者也能快速上手,打造出令人眼前一亮的作品。然而,要在众多组件中找到最适合项目需求的那一块“积木”,并不是一件容易的事。开发者需要对各种组件的功能和应用场景有所了解,才能在实际开发中游刃有余。

master_chenchen的博客 1511

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

推荐微信小程序常用的几个UI组件库

在微信小程序开发的过程中,自己不借助UI组件库开发出来的页面,不但要花费更多的时间,页面的美观度上也有一定差距。 所以在这里我给大家推荐几个好看,常用的几个UI组件库。 WeUI WeUI 是微信官方出品的组件库,它沿用了微信的视觉设计与交互设计,提供了各类原生组件的基础样式,风格简约大方。选用这一套组件库,可以让你的小程序与微信本身保持一致的界面风格。 ...

丿旧时光灬鑫 4万+

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

微信小程序开发常用图标集

微信小程序开发常用图标集 【下载地址】微信小程序开发常用图标集 这是一个专为微信小程序开发者打造的图标资源库,内含1600个风格统一、尺寸规范的PNG格式图标,覆盖导航、操作、提示等常用场景。这些图标设计精美,能够显著提升小程序界面的美观度和用户体验。资源使用简单,下载后即可直接集成到项目中,开发者可根据需求调整尺寸和颜...

gitblog_06756的博客 678

微信小程序常用组件

常用的微信小程序组件知识---黑马程序学习

m0_74441079的博客 3174
上一篇: 微信小程序 报错 errcode: 40029, errmsg: "invalid code, hints: [ req_id: HQd79a0747th31 ]
下一篇: 微信小程序 有关swiper组件的修改current的值
xyl_hq
博客等级 码龄8年 14粉丝 36原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值