微信小程式的點擊事件、頁面跳轉、數據綁定、數據修改、獲取用戶信息及定位、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>

js

// 該函數實時跟新數據的值
  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>
  

• 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

  當點擊該按鈕時，會彈出一個框詢問是否授權獲取用戶信息
  <button open-type="getUserInfo" bindgetuserinfo="xxxx">授權登錄</button>
  

• 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

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

• js

    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>
  
  

• js

    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>
  
  

• 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方法拼接兩個列表
          });
        }
      });
    },
  

註意：圖片目前只是上傳到了記憶體。