day01 微信小程序

初学小程序

了解小程序，为了更好的在前端驰骋。

数组遍历

index.js

data: {
    lists: [{
        name: "小米",
        age: "12"
      },
      {
        name: "小英",
        age: "11"
      },
      {
        name: "小键",
        age: "11"
      },
      {
        name: "小黄",
        age: "122",
        children: [{
            name: "小英",
            age: "11"
          },
          {
            name: "小键",
            age: "11"
          },
        ]
      },
    ],
   },

index.wxml

 <view wx:for="{{lists}}" wx:key="name">
    <text>{{item.name}}</text>
    <!-- for 循环遍历  默认item 和index  -->
    <!-- 修改下表和元素名 wx:for-index="index2" wx:for-item="item2" -->
    <view wx:for="{{item.children}}" wx:key="*this" wx:for-index="index2" wx:for-item="item2">
      <text>{{index2}}</text>
      <text>{{item2.name}}</text>
    </view>
  </view>

小程序事件传参

index.wxml

    <view>事件传参监听:{{num}}</view>
    <!-- 通过data-*给所在事件传值  *可自定义 -->
    <!-- 若传的参数没带{{}}传的是string ,带{{}}可传number -->
    <button bind:tap="handle" data-id="{{222}}">事件传参</button>
  </view>

index.js

// 事件传参方法
  handle:function(e){
    this.setData({
      num:e.currentTarget.dataset.id,
    })
    console.log(e.currentTarget.dataset.id)
    // 打印的是对象
    console.log(e)
  },

冒泡

index.wxss

.parent{
  height: 300rpx;
  width: 300rpx;
  background-color: red;
}
.children{
  height: 150rpx;
  width: 150rpx;
  background-color: yellow;
}

index.wxml

<view>
    <view class="parent" bind:tap="handleParent" data-pid="handleParent">
      <view class="children"
      bind:tap="handleChild" data-cid="handleChild"></view>
    </view>

index.js

  handleParent:function(e){
    // 点击了父盒子(子盒子不会触发)
    // console.log("触发父盒子=>",e.target.dataset.pid);
    // 解决方法就是获取当前目标 currentTarget
    console.log("触发父盒子=>",e.currentTarget.dataset.pid);
  },

修改data数据

index.wxml

  <view >{{num}}</view>
<button bindtap="handleSwitch">切换效果</button>

index.js

data: { lists: [{
        name: "小米",
        age: "12"
      },
      {
        name: "小英",
        age: "11"
      },
      {
        name: "小键",
        age: "11"
      },
      {
        name: "小黄",
        age: "122",
        children: [{
            name: "小英",
            age: "11"
          },
          {
            name: "小键",
            age: "11"
          },
        ]
      },
    ],
    num:1,
  },
 handleSwitch:function(){
    // 调用setData 进行数据修改
    this.setData({
      num: 14
    }),()=>{
      console.log("切换成功")
    }
  },
  // 修改数组
  changeName:function(){
    this.setData({
      "lists[1].name":"小瑛"
    })

元素隐藏显示

index.wxml

<!-- 空标签 -->
  <block>我是空</block>
  <view class="{{addClass==true ? 'red':'green'}}">完犊子</view>
  <view wx:if="{{addClass==true}}">if看得见</view>
  <view wx:elif="{{addClass==true}}">elif看得见</view>
  <view wx:else>else看得见吗</view>
  <view hidden="{{addClass}}">是否隐身了</view>

index.wxss

.red{
  color: red;
}
.green{
  color: green;
}

index.js

data: {
    addClass:true,
  },

异步加载（请求）

index.js

  onLoad(options) {
    wx.request({
      method:"post",
      url: 'http://1.14.239.98/backend/api/v1/user',
      data:{
        id:123
      },
      success:(res)=>{
        console.log("成功了",res);
      },
      fail:(err)=>{
        console.log("失败",err)
      },
      complete:()=>{
        console.log("完成")
      }
    })
  },