02--点击事件与API

day02 点击事件与API

1. 跳转

1.1 点击事件+API 跳转

点我跳转

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 通过标签跳转

跳转到新页面

2.数据绑定

2.1 基本显示

• wxml

  数据1：{{message}}
  

• 展示数据

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

2.2 数据更新

• wxml

  数据2：{{message}}
  
  点击修改数据
  

• 修改数据

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

3.获取用户信息

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

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

• wxml

  获取当前用户名
  

• js

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

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

• wxml

  授权登录
  
  
  # 官方推荐使用button按钮，会自动弹窗先获取用户授权
  

• js

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

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

• wxml

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

• js

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

示例: 获取用户名和头像

• wxml

  
  
    
      
         获取头像昵称 
      
      
        
        {{userInfo.nickName}}
      
    
  
  

• 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

  {{localPath}}
  

• js

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

5. for指令

• wxml

  
  商品列表
  
    {{index}} -  {{item}}
    {{idx}} -  {{x}}
  
  
    {{userInfo.name}}
    {{userInfo.age}}
  
  
    {{index}} - {{item}}
  
  

• js

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

6.获取图片

• wxml

  
  请上传图片
  
    
  
  

• 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

    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