微信小程序的点击事件、页面跳转、数据绑定、数据修改、获取用户信息及定位、for指令、获取用户上传图片-百木园

小程序中实现页面跳转

对标签绑定点击事件

data是点击时传入的参数
<view bindtap=\"clickMe\" data-nid=\"123\" data-name=\"SD\" >点我跳转</view>


    /**
   * 用户点击事件
   */
  clickMe(e){
    console.log(e)
    var nid = e.currentTarget.dataset.nid  //通过这种方式可以拿到传过来的参数
    console.log(nid)

页面跳转

通过wx里的方法跳转

// navigateTo, redirectTo 只能打开非 tabBar 页面。
// switchTab 只能打开 tabBar 页面。
// reLaunch 可以打开任意页面。
    wx.switchTab({
      url: \'/pages/home/home\', // 路由后面可以加？的方式传参数，调用页面路由带的参数可以在目标页面的onLoad方法中获取。
    })
  }

通过标签跳转（类似a标签）

<navigator url=\"/pages/redirect/redirect?id=666\">跳转到新页面</navigator> 只能跳转非tabbar页面

数据绑定

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

展示数据

// pages/bind/bind.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    message:\"沙雕李业\",
  }
)}

数据双向绑定

前台input框修改了，js里的data数据也会相应改变

wxml

input框添加了一个bindinput属性，后面接了一个函数，当input框的值变化时，就会触发bindPhone函数
<view>手机号：</view>
<input value=\"{{phone}}\" bindinput=\"bindPhone\" placeholder=\"请输入手机号\"></input>

// 该函数实时跟新数据的值
  bindPhone:function(e){
    this.setData({ phone:e.detail.value});
  },

数据修改

wxml

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

<button bindtap=\"changeData\">点击修改数据</button>

修改数据

Page({
  data: {
    message:\"沙雕李业\",
  },
  changeData:function(){
    // 修改数据
    this.setData({ message: \"大沙雕李业\"});
  }
})

获取用户信息

方式一

wxml

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

  getUserName:function(){
  	// 调用微信提供的接口获取用户信息
    wx.getUserInfo({
      success: function (res) {
        // 调用成功后触发
        console.log(\'success\',res)
  	  // 然后可以用this.setData修改对应数据，展示在前台上，注意this指的不是pages的而是wx了
  	  // 我们需要在getUserName函数后面使用var that = this ，然后在wx里就可以使用that.setData修改对应数据了
      },
      fail:function(res){
        // 调用失败后触发
        console.log(\'fail\', res)
      }
    })
  },

方式二

wxml

当点击该按钮时，会弹出一个框询问是否授权获取用户信息
<button open-type=\"getUserInfo\" bindgetuserinfo=\"xxxx\">授权登录</button>

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

注意事项：

想要获取用户信息，必须经过用户授权（button）。
已授权

不授权，通过调用wx.openSetting

// 打开配置，手动授权。
// wx.openSetting({})

获取用户位置

wxml

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

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

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>

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

获取图片

wxml

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

  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) //concat方法拼接两个列表
        });
      }
    });
  },

注意：图片目前只是上传到了内存。

来源：https://www.cnblogs.com/suncolor/p/16987747.html
本站部分图文来源于网络，如有侵权请联系删除。

微信小程序的点击事件、页面跳转、数据绑定、数据修改、获取用户信息及定位、for指令、获取用户上传图片

小程序中实现页面跳转

对标签绑定点击事件

页面跳转

数据绑定

数据双向绑定

数据修改

获取用户信息

方式一

方式二

获取用户位置

for指令

获取图片

相关推荐

热门文章