微信小程序常用到的

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
    })

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

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值