微信小程序之網絡通訊

時間 2019-11-22

原文原文鏈接

關於網絡通訊，這裏我使用的是wx.request,官方代碼示例以下:php

wx.request({
  url: 'test.php', //僅爲示例，並不是真實的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默認值
  },
  success (res) {
    console.log(res.data)
  }
})

對於初學者而言，官方示例可能會看不怎麼懂，因此我就以我本身當初項目驅動學習的方式(開發我的的記帳小程序)來做爲學習實例。

以登陸來講，效果圖以下:css

這次示例包含表單校驗和網絡請求，代碼以下:
login.jshtml

// pages/login/login.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    username: "",
    password: ""

  },
   register:function(e){
    wx.navigateTo({
      url: '../register/register'
    })

  },
  formSubmit: function(e) {
    console.log(e.detail.value.email);
    console.log(e.detail.value.pwd)
    var username = e.detail.value.email;
    var password = e.detail.value.pwd;
    var emailReg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
    if (username == null || username == "") {
      wx.showToast({
        title: "用戶名不能爲空",
        icon: 'none',
        duration: 1500
      })
    } else if (!emailReg.test(username)) {

      wx.showToast({
        title: "郵箱有誤",
        icon: 'none',
        duration: 1500
      })

    } else if (password == null || password == "") {
      wx.showToast({
        title: "密碼不能爲空",
        icon: 'none',
        duration: 1500
      })
    } else {
      wx.request({

        url: getApp().globalData.urlPath + "sysUser/login",
        method: "POST",
        data: {
          username: username,
          password: password
        },
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        success: function(res) {
          console.log(res.data);
          if (res.statusCode == 200) {

            //訪問正常
            if (res.data.code == "000000") {
              wx.showToast({
                title: "登錄成功",
                icon: 'success',
                duration: 2000,
                success: function() {
                  wx.navigateTo({
                    url: '../manage/manage'
                  })

                  wx.setStorage({
                    key: 'userId',
                    data: res.data.user.userCode
                  })

                  wx.setStorage({
                    key: 'userName',
                    data: res.data.user.userName
                  })
                  console.log("test:" + wx.getStorageSync('userName'));
                }
              })

            } else if (res.data.code == "111111") {
              wx.showToast({
                title: "密碼錯誤",
                icon: 'none',
                duration: 1500
              })
            } else {
              wx.showToast({
                title: "該用戶不存在",
                icon: 'none',
                duration: 1500
              })
            }
          } else {

            wx.showLoading({
              title: '系統異常',
              fail
            })

            setTimeout(function() {
              wx.hideLoading()
            }, 2000)
          }

        }
      })
    }

  }
})

關於login.js，主要是寫通訊邏輯的，與我們平時寫js差別並不大，惟一不一樣的就是api長得不樣罷了。ajax

關於其中的getApp().globalData.urlPath，至關於全局變量，不用我每次都寫一大串https之類的。json

表單校驗的效果如圖:小程序

代碼說明:微信小程序

顯示消息提示框(至關於js的alert提示):api

wx.showToast({
  title: "郵箱有誤",
  icon: 'none',
  duration: 1500
})

獲取input屬性爲name的值(至關於js中form.email.value,前提是這個表單name要爲form，且form中的input要存在一個name=」email」)微信

e.detail.value.email;

跳轉代碼(至關於window.location.href):網絡

wx.navigateTo({
 url: '../manage/manage'
})

至於wx.request，我想只要是寫過ajax的，都很好理解。

{
  "usingComponents": {}
}

關於這個login.json有什麼用，我惟一想到的是頁面的title(其實至關於html中的title)

lgoin.wxml:

<view class='container'>
  <view class='header'>
    <text>acs系統</text>
  </view>
    <view>
    <text>\n</text>
  </view>
  <view class='header'>
  </view>
  <form bindsubmit="formSubmit">
    <view class='section'>
      <text>用戶名：</text>
      <input type='text' name="email" placeholder='請輸入郵箱' />
    </view>
    <view class='section'>
      <text>密碼:</text>
      <input password='password' name="pwd" placeholder='請輸入密碼' />
    </view>
    <view class='button'>
      <button type='primary' form-type='submit'>登陸</button>
      <text>\n</text>
       <view bindtap='register' class="register">註冊</view>
    </view>
  </form>

</view>

wxml至關於視圖(如html或者模板語言(jsp、volocity、freemarker、beetl等))
視圖除了能夠寫一些標籤之類的，還能夠寫一些邏輯判斷。後面會講到的。

/* pages/login/login.wxss */
form{
  width: 310px;
  height: 240px;
  line-height: 40px;
  /* border: 1px solid red;  */
}
input{
  border: 1px solid #ccc;
  width: 310px;
  height: 40px;
}
.button{
  margin-top: 20px;
}
.header text{
  font-size: 25px;
  color: #666;
}
form text{
  font-size: 20px;
  color: #666;
}
.register{
color:black;
display: block;
width: 310px;
height: 40px;
border: 1px solid #ccc;
text-align: center;
}