WX02--点击事件与API

day02 点击事件与API

1. 跳转

1.1 点击事件+API 跳转

<view bindtap="clickMe" data-nid="123" data-name="SD" >点我跳转</view>

Page({
  // 1 点击绑定的事件
  clickMe:function(e){
    var nid = e.currentTarget.dataset.nid;
    console.log(nid);
      
  // 2 API页面跳转
  wx.navigateTo({
	url: '/pages/redirect/redirect?id='+nid
    })
  }
})

// 跳转到的页面如果想要接受参数，可以在onLoad方法中接受。

redirect.js中

Page({
 // 生命周期函数--监听页面加载
  onLoad: function (options) {
    console.log(options);
  }
})

1.2 通过标签跳转

<navigator url="/pages/redirect/redirect?id=666">跳转到新页面</navigator>

2.数据绑定

2.1 基本显示

• wxml

  <view>数据1：{{message}}</view>
  

• 展示数据

  // pages/bind/bind.js
  Page({
  
   // 页面的初始数据
    data: {
      message:"沙雕李业",
    }
  )}
  

2.2 数据更新

• wxml

  <view>数据2：{{message}}</view>
  
  <button bindtap="changeData">点击修改数据</button>
  

• 修改数据

  Page({
    data: {
      message:"沙雕李业",
    },
    changeData:function(){
      // 修改数据   直接修改页面不会自己刷新
      this.setData({ message: "大沙雕李业"});
    }
  })
  

3.获取用户信息

获取用户信息，前提需要用户进行授权

方式一：自定义点击事件 + wx.getUserInfo()

• wxml

  <view bindtap="getUserName">获取当前用户名</view>
  

• js

  getUserName:function(){
    	// 调用微信提供的接口获取用户信息
      wx.getUserInfo({
        success: function (res) {
          // 调用成功后触发
          console.log('success',res)
        },
        fail:function(res){
          // 调用失败后触发
          console.log('fail', res)
        }
      })
    },
  

方式二：button按钮事件+ wx.getUserInfo()

• wxml

  <button open-type="getUserInfo" bindgetuserinfo="xxxx">授权登录</button>
  
  
  # 官方推荐使用button按钮，会自动弹窗先获取用户授权
  

• js

  xxxx:function(){
      wx.getUserInfo({
        success: function (res) {
          // 调用成功后触发
          console.log('success', res)
        },
        fail: function (res) {
          // 调用失败后触发
          console.log('fail', res)
        }
      })
    }
  

方式三：自定义点击事件 + wx.getUserProfile() (推荐使用)

• wxml

  <button  bindtap="getUserProfile"> 获取头像昵称 </button>
  
  # 获取用户信息。页面产生点击事件后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。
  # 该接口用于替换 wx.getUserInfo
  

• js

  getUserProfile(e) {
      // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
      // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
      wx.getUserProfile({
          desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
              this.setData({
                  xxx
              })
          }
      })
  },
  

示例: 获取用户名和头像

• wxml

  <!--pages/login/login.wxml-->
  <view class="container">
    <view class="userinfo">
      <block wx:if="{{!hasUserInfo}}">
        <button bindtap="getUserProfile"> 获取头像昵称 </button>
      </block>
      <block wx:else>
        <image src="{{userInfo.avatarUrl}}" style="height:200rpx;width:200rpx;" ></image>
        <text>{{userInfo.nickName}}</text>
      </block>
    </view>
  </view>
  

• js

  // pages/login/login.js
  Page({
    data: {
      userInfo: {},
      hasUserInfo: false,
    },
    getUserProfile(e) {
      // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
      // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
      wx.getUserProfile({
        desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    },
  })
  

  # 注意事项：
    - 想要获取用户信息，必须经过用户授权（button）。 
    - 已授权
    - 不授权，通过调用wx.openSetting
  
  // 打开配置，手动授权
  // wx.openSetting({})
  

4.获取用户位置信息

• wxml

  <view bindtap="getLocalPath">{{localPath}}</view>
  

• js

  data: {
      localPath:"请选择位置",
    },
        
  getLocalPath:function(){
      var that = this;
      wx.chooseLocation({
        success: function(res) {
          that.setData({localPath:res.address});
        },
      })
    },
  

5. for指令

• wxml

  <!--pages/goods/goods.wxml-->
  <text>商品列表</text>
  <view>
    <view wx:for="{{dataList}}" >{{index}} -  {{item}}</view>
    <view wx:for="{{dataList}}" wx:for-index="idx" wx:for-item="x">{{idx}} -  {{x}}</view>
  </view>
  <view>
    {{userInfo.name}}
    {{userInfo.age}}
  </view>
  <view>
    <view wx:for="{{userInfo}}">{{index}} - {{item}}</view>
  </view>
  

• js

  data: {
      dataList:["白浩为","海狗","常鑫"],
      userInfo:{
        name:"alex",
        age:18
      }
    },
  

6.获取图片

• wxml

  <!--pages/publish/publish.wxml-->
  <view bindtap="uploadImage">请上传图片</view>
  <view class="container">
    <image wx:for="{{imageList}}" src="{{item}}"></image>
  </view>
  

• js

  data: {
    imageList: ["/static/hg.jpg", "/static/hg.jpg"]
  },
  
  uploadImage:function(){
  var that = this;
  
  wx.chooseImage({
    count:9,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success:function(res){
      // 设置imageList，页面上图片自动修改。
      // that.setData({
      //   imageList: res.tempFilePaths
      // });
  
      // 默认图片 + 选择的图片； 
      that.setData({
        imageList: that.data.imageList.concat(res.tempFilePaths)
      });
    }
  });
  },
      
  // 注意：图片目前只是上传到了内存。
  

总结

• 标签（组件）

  • text
  • view
  • image
  • navigator，跳转到其他页面（默认只能跳转到非tabbar页面）
  • button，按钮（特殊：建议获取用户信息时）

• 事件

  • bindtap

    <view bindtap="func"></view>
    
    <view bindtap="func" data-xx="123"></view>
    

    func:function(e){
    	e.currentTarget.dataset
    }
    

• API

  • navigateTo

    wx.navigateTo({
    	url: '/pages/redirect/redirect?id='+nid,
    })
    

  • openSetting

    wx.openSetting({})
    

  • getUserInfo

     wx.getUserInfo({
          success:function(res){
            console.log(res);
          }
        })
    
    // 注意：结合button按钮实现
    

  • chooseLocation

    wx.chooseLocation({
          success: function(res) {
            
          },
        })
    

  • chooseImage

    wx.chooseImage({
          count:9,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success:function(res){
            
          }
        });
    

• 数据绑定

• for指令
  注意：setData + that