小程序中实现页面跳转

对标签绑定点击事件

data是点击时传入的参数
点我跳转

    /**
   * 用户点击事件
   */
  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标签）

跳转到新页面 只能跳转非tabbar页面

数据绑定

• wxml

  数据1：{{message}}
  

• 展示数据

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

数据双向绑定

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

wxml

input框添加了一个bindinput属性，后面接了一个函数，当input框的值变化时，就会触发bindPhone函数
手机号：

js

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

数据修改

• wxml

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

• 修改数据

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

获取用户信息

方式一

• wxml

  获取当前用户名
  

• js

    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

  当点击该按钮时，会弹出一个框询问是否授权获取用户信息
  授权登录
  

• js

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

  注意事项：

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

  • 已授权

  • 不授权，通过调用wx.openSetting

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

获取用户位置

• wxml

  {{localPath}}
  

• js

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

for指令

• wxml

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

• js

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

获取图片

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

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