微信小程序中的一些事件以及语法

【事件绑定】

　　基本使用

新建项目，使用模板可以选择：JS基础版本
# 1 方式一
<view bind:tab="js中写方法"></view>
# 2 方式二
<view bindtab="js中写方法"></view>

# 3 js中写方法
  showLog(){
    console.log("我被点了")
  }

vxml


<!--index.wxml-->
<view>-------事件基本使用---------</view>

<button size="mini" type="warn" loading bind:tap="handleShow">点击看控制台</button>

<button size="mini" type="primary" bindtap="handleShow2">看控制台</button>


*****************************
index.js

Page({
  handleShow(){
    console.log('已经点了')
  },
  handleShow2(){
    console.log('我也能点')
  },
})

 

阻止事件冒泡

<!--index.wxml-->

<view>-------事件冒泡---------</view>
<view class="view1" bind:tap="handleView1"></view>
<button type="warn" plain bind:tap="handleButton1">冒泡案例</button>
<view>上述案例是点击子事件，然后也会冒泡到父事件上</view>
<view class="view1" bind:tap="handleView2"></view>
<button type="primary" plain catch:tap="handleButton2">阻止冒泡案例</button>



<view style="height:300rpx;display: flex;justify-content: center;align-items: center; background-color: pink;" bind:tap="handleView1">
<button type="warn" plain bind:tap="handleButton1">冒泡案例</button>

</view>
//catch
<view style="height:300rpx;display: flex;justify-content: center;align-items: center; background-color: orange;" bind:tap="handleView2">
<button type="primary" plain catch:tap="handleButton2">阻止事件冒泡</button>
</view>

********************************
样式

.view1{
  height: 300rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: pink;
}


******************
js

Page({

  handleView1() {
    console.log("view1被点了")

  },
  handleButton1() {
    console.log("button1被点了")
  },
  handleView2() {
    console.log("view2被点了")
  },
  handleButton2() {
    console.log("button2被点了")
  },
})

 

 

事件对象和事件传参

data-*方案
mark:自定义属性
target :事件触发者 :dataset data定义的属性
currentTarget:事件绑定者 :dataset data定义的属性

<view style="height:300rpx;display: flex;justify-content: center;align-items: center; background-color: orange;" bind:tap="handleView3">
<view>handleView3事件冒泡上来的取不到被点击的组件的参数的</view>
<button type="primary" plain bind:tap="handleButton" data-name="justin" data-xx="xx" mark:name="lqz">事件传参</button>
</view>


***************************************
js

handleButton(event){
    console.log(event)
    console.log('mark传入的参数：',event.mark.name)
    console.log('data-字段名传入的参数：',event.currentTarget.dataset.xx)
    console.log('data-字段名传入的参数：',event.currentTarget.dataset.name)

    console.log('data-字段名传入的参数：',event.target.dataset.xx)
    console.log('data-字段名传入的参数：',event.target.dataset.name)
    // mark
    // target:dataset
    // currentTarget:dataset
  },
  handleView3(event){
    console.log(event)
  }

 

 

页面跳转

wxml-组件跳转--声明式导航

# 1 使用 navigator 组件实现跳转
    -url ：当前小程序内的跳转链接
    -open-type ：跳转方式
        navigate：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
        redirect： 关闭当前页面，跳转到应用内的某个页面。但不能跳转到 tabbar 页面
        switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
        reLaunch：关闭所有页面，打开到应用内的某个页面
        navigateBack：关闭当前页面，返回上一页面或多级页面

<text>----普通跳转</text>

<view><navigator url="/pages/log/log"><button type="primary">普通跳转</button></navigator></view>

 

<text>----open-type属性跳转</text>
<view>
<navigator url="/pages/my/my" open-type="navigate"> <button type="primary">不能跳转到tabbar</button></navigator>
</view>

 

<text>跳到非tabbat页面</text>
<view>
<navigator url="/pages/log/log" open-type="navigate"><button type="primary">跳到非tabbat页面</button></navigator>
</view>
 
 
<text>关闭当前页面</text>
<view>
<navigator url="/pages/log/log" open-type="redirect"><button type="primary">关闭当前页面，跳转到应用内其他页面，只能回到首页</button></navigator>
</view>

 

<text>只能跳到tabbat</text>
<view>
<navigator url="/pages/my/my" open-type="switchTab"><button type="primary">只能跳到tabbat,无返回</button></navigator>
</view>

 

<text>关闭所有页面，打开到应用内的某个页面</text>
<view>
<navigator url="/pages/log/log" open-type="reLaunch"><button type="primary">关闭所有页面，打开其他页面</button></navigator>
</view>

 

<text>关闭当前页面，返回上一页面或多级页面</text>

<view>

<navigator url="/pages/log/log" open-type="navigate"><button type="primary">关闭所有页面，返回可以多级</button></navigator>

</view>

----------------log页面的返回方式

<!-- delta控制返回层级 -->

<navigator open-type="navigateBack" delta="1">回去</navigator>

 

 

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

# 携带参数

跳转

<view>

<navigator url="/pages/login/login?name=justin&age=19" open-type="navigate">跳转到login页</navigator>

</view>

#4.2 在 onLoad的options中获取参数

  onLoad(options) {

  console.log(options)

  },

## 4.3 注意跳转tabbar不能携带参数

 

 

 

 

 

 

 

js-跳转--编程式导航

# 1 5 个方法
wx.navigateTo({
    url: 'url',
})

wx.redirectTo({
    url: 'url',
})

wx.switchTab({
    url: 'url',
})

wx.reLaunch({
    url: 'url',
})

wx.navigateBack()

# 2  index页面
<button type="default"  bind:tap="handlenavigateTo">navigateTo</button>
<button type="warn" bind:tap="handleredirectTo">redirectTo</button>
<button type="primary" bind:tap="handleswitchTab">switchTab</button>
<button type="default" bind:tap="handlereLaunch">reLaunch</button>

-------log页面
<button type="warn" bind:tap="handlenavigateBack">navigateBack</button>
    
    
# 3 index.js
  handlenavigateTo(){
    wx.navigateTo({
      url: '/pages/log/log',
    })
  },
  handleredirectTo(){
    wx.redirectTo({
      url: '/pages/log/log',
    })
  },
  handleswitchTab(){
    wx.switchTab({
      url: '/pages/my/my',
    })
  },
  handlereLaunch(){
    wx.reLaunch({
      url: '/pages/log/log',
    })

  },

------------log.js
  handlenavigateBack(){
    // 关闭当前页面，返回上一页或上某一页，传入数字
    wx.navigateBack()
      
     wx.navigateBack({
      delta:1
    })
  },

 

 。

。

。

 

wxml语法

模版语法

#  1 在页面 xx.js 的 Page() 方法的 data 对象中进行声明定义
#  2 在xx.wxml 中使用 {{}} 包裹，显示数据
#  3 可以显示如下，不能编写js语句或js方法
    -变量
    -算数运算
    -三元运算
    -逻辑判断
    
# 4 只是单纯通过赋值，js中变量会变化，但是wxml中的页面不会变化，没有联动效果，需要使用setData()方法修改
    - 更新数据
    - 页面更新
 -----------------------------------

 

 wxml页面渲染

wxml

<text>名字是:{{name}}</text>
<button size="mini" type="default" plain bind:tap="handlChangeName">点我改名字</button>


---------------
js

Page({
  data:{
    name:'六六',
  },

  handlChangeName(){
    this.name='奶茶'
    console.log(this.data.name)

    //setData案例 修改数字,让页面也改变
    this.setData({
      'name':'奶茶'
    })
    console.log(this.data.name)
  },
})

 

 。

。

wxml语法修改对象

wxml

<view>
<view>姓名是：{{userinfo.name}}</view>
<view>年龄是：{{userinfo.age}}</view>
<view>爱好是：{{userinfo.hobby}}</view>
<button bind:tap="handleChangeName1" plain="true" type="primary" size="mini">点击修改对象-姓名</button>
</view>

---------------------
js

  data:{
    userinfo:{
      name:'星星',
      age:1
    
  },


handleChangeName1(){
    this.setData({
      //改名字
      'userinfo.name':'小星星',
      //增加对象
      'userinfo.hobby':'吃猫条',
    },
-----------------------------------------------------------------

      // 修改多个数据1--》简便方案--》展开运算符  
    const userinfo = {
      ...this.data.userinfo,
      name: '新名字',
      hobby: '乒乓球'
}

    this.setData({
      userinfo:userinfo
      userinfo //简写形式

    })
  },


==============================
其他修改对象方式

    // 1.修改多个数据--》简便方案-->assign
    const userinfo = Object.assign(this.data.userinfo, {
      name: 'xxzz',
      hobby: '烫头'
    })
    this.setData({
      // userinfo:userinfo
      userinfo //简写形式
    })


 //2.删除数据-->单个
    delete this.data.userinfo.name // 页面删除不了，需要用setData更新
    this.setData({
      userinfo:this.data.userinfo
    })

    //3.删除数据-->多个--解构赋值
    const {name,age,...res}=this.data.userinfo
    this.setData({
      userinfo:res
    })

  },

# 4.setData 修改数组
## 7.1 js
data: {
    names:['刘亦菲','迪丽热巴','古力娜扎','马尔扎哈']
  },
    
   handleChangeList(){
    //1 增加数组
    // 1.1 增加再设置值
    this.data.names.push('亚瑟王')
    this.setData({
      names:this.data.names
    })

    // 1.2 通过数组拼接
    // const newList=this.data.names.concat("甄姬")
    // this.setData({
    //   names:newList
    // })

    // 1.3 通过解构赋值
    const newList=[...this.data.names,"李白"]
    this.setData({
      names:newList
    })

    // 2 修改数组
    this.setData({
      'names[1]':'justin'
    })

    // 3 删除数组
    this.data.names.slice(1)
    this.setData({
      names:this.data.names.slice(1)
    })


  },
## 7.2 wxml
<view wx:for="{{names}}" wx:key="index">
{{item}}

</view>
<button bind:tap="handleChangeList" plain="true" type="primary" size="mini">修改数组</button>
    
    
# 5 双向数据绑定：model
<view>
  <!-- 不支持数组和对象 -->
  <input type="text" model:value='{{name}}' style="border:orange solid 1rpx"/>
  <checkbox model:checked="{{isCheck}}"/>
  <text>{{isCheck}}</text>
</view>

 

 

 

条件渲染

# 1 wx:if   wx:elif   wx:else 
<view>
  <input type="text" model:value='{{score}}' style="border:orange solid 1rpx"/>
  <view wx:if="{{score>=90&&score<=100}}">优秀</view>
  <view wx:elif="{{score>=80&&score<90}}">良好</view>
  <view wx:elif="{{score>=60&&score<80}}">及格</view>
  <view wx:else>不及格</view>
</view>
'score':' ',

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

# 2 wx:if  和 hidden
## 2.1 js
showPhoto:true,
showPhotoHidden:true
    handleShowPhoto(){
        this.setData({
            showPhoto:!this.data.showPhoto
        })
        console.log(this.data.showPhoto)
    },
    handleShowPhotoHidden(){
        this.setData({
            showPhotoHidden:!this.data.showPhotoHidden
        })
    },
    
## 2.2 wxml
<view>
<image src="/images/b.jpg" mode="widthFix" wx:if="{{showPhoto}}"/>
<button bind:tap="handleShowPhoto" plain="true" type="primary" size="mini">显示隐藏图片(if)</button>
<view></view>
<image src="/images/b.jpg" mode="widthFix" hidden="{{showPhotoHidden}}"/>
<button bind:tap="handleShowPhotoHidden" plain="true" type="primary" size="mini">显示隐藏图片(hidden)</button>
</view>

 

 

列表渲染

# 1 基本使用
## 1.1 js
  data: {
    goodsList:[{id:1001,name:'钢笔',price:9},{id:1002,name:'铅笔',price:6},{id:1003,name:'脸盆',price:99}]
  },
##1.2 wxml

<view>
<!-- wx:key 提升性能，不写会警告  可以用 index或 *this：代指item本身  要唯一-->
<view wx:for="{{goodsList}}" wx:key="*this">
<!-- 默认每个对象是item，默认每个下标是index -->
<!-- <text>商品id:{{item.id}}--商品名字:{{item.name}}--商品价格:{{item.price}}</text> -->
</view>
</view>
------------------------------------------

# 2 修改wx:for-index  wx:for-item 
<view>
  <view wx:for="{{goodsList}}" wx:key="*this" wx:for-item="info">
<!-- 修改默认index和item--wx:for-index  wx:for-item    -->
<text>商品id:{{info.id}}--商品名字:{{info.name}}--商品价格:{{info.price}}</text>
</view>
</view>

# 3 block
<block>商品id:{{info.id}}--商品名字:{{info.name}}--商品价格:{{info.price}}</block>

 

。

。

发送网络请求（和后端交互，路飞项目中的轮播图）

wx.request()

<!--pages/my/my.wxml-->
<button type="warn" plain bind:tap="handleLoad">点我加载</button>

<swiper 
autoplay 
interval="2000" 
indicator-dots 
indicator-color="#00FF00"
indicator-active-color="#70DB93"
circular
>
  <swiper-item wx:for="{{bannerList}}" wx:key="*this">
    <image src="{{item.image}}" mode="widthFix"/>
  </swiper-item>

</swiper>

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

// pages/my/my.js
Page({
  data:{
    bannerList:[]
  },
  handleLoad(){
    wx.showLoading({
      title: '加载中，稍后',
      mask:true  // 显示透明蒙层
    })
    wx.request({
      url: 'http://127.0.0.1:8000/api/v1/home/banner/',
      method:'GET',
      success:(res)=>{
        console.log(res.data)
        this.setData({
          bannerList:res.data.results
        })
      },
      fail:(err)=>{
        console.log(err)
      },
      complete:()=>{
        console.log('无论成功失败，都执行')
        // 关闭
        wx.hideLoading()
      }
      
    })
  },
  
})

 

。

。

对话框

模态对话框

##### wxml
<button type="default" size="mini" bind:tap="showModel">弹出模态框</button>
### js ###
showModel(){
    wx.showModal({
        title: '这是标题',
        content: '这是内容部分~~',
        complete: (res) => {
            if (res.cancel) {
                console.log('用户取消了')
            }

            if (res.confirm) {
                console.log('用户确认了')
            }
        }
    })
}

 

 

消息对话框

#### wxml
<button type="default" size="mini" bind:tap="showToast">弹出消息框</button>
### js
showToast(){
    wx.showToast({
        title: '恭喜您，秒杀成功',
        icon:"success",
        duration:2000
    })
}

 

本地存储

#####  在调试窗口中可以通过appdata看到当前页面中的变量，及变量变化

#### wxml####
<button type="default" plain bind:tap="handleSave">存储数据</button>
<button type="primary" plain bind:tap="handleGet">获取数据</button>
<button type="default" plain bind:tap="handleDelete">删除数据</button>
<button type="primary" plain bind:tap="handleClear">清空数据</button>

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

###js### 同步####
handleSave() {
    wx.setStorageSync('name', "justin")
    wx.setStorageSync('userinfo', {name:'lqz',age:19})
},
handleGet() {
    const name=wx.getStorageSync('name')
    const userinfo=wx.getStorageSync('userinfo')
    console.log(name)
    console.log(userinfo)
},
handleDelete() {
    wx.removeStorageSync('name')
},
handleClear() {
    wx.clearStorageSync()
}


###js### 异步：async,获取的是对象，值在data里面 ####
handleSave() {
    wx.setStorage({
        key:'name',
        data:"justin"
    })
    wx.setStorage({
        key:'userinfo',
        data:{name:'lqz',age:19}
    })
},

async handleGet() {
    const name= await wx.getStorage({key:'name'})
    const userinfo= await wx.getStorage({key:'userinfo'})
    console.log(name)
    console.log(userinfo)
},
handleDelete() {
    wx.removeStorage({key:'name'})
},
handleClear() {
    wx.clearStorage()
}

 本地的存储的增删改查都从storage里获取