微信小程序網(wǎng)絡(luò)通信實(shí)現(xiàn)詳解

發(fā)布時(shí)間：2020-09-08 19:50:19 來(lái)源：腳本之家閱讀：202 作者：挑戰(zhàn)者V 欄目：web開(kāi)發(fā)

關(guān)于網(wǎng)絡(luò)通信，這里我使用的是wx.request,官方代碼示例如下:

wx.request({
 url: 'test.php', //僅為示例，并非真實(shí)的接口地址
 data: {
  x: '',
  y: ''
 },
 header: {
  'content-type': 'application/json' // 默認(rèn)值
 },
 success (res) {
  console.log(res.data)
 }
})

對(duì)于初學(xué)者而言，官方示例可能會(huì)看不怎么懂，所以我就以我自己當(dāng)初項(xiàng)目驅(qū)動(dòng)學(xué)習(xí)的方式(開(kāi)發(fā)個(gè)人的記賬小程序)來(lái)作為學(xué)習(xí)實(shí)例。

以登錄來(lái)說(shuō)，效果圖如下:

微信小程序網(wǎng)絡(luò)通信實(shí)現(xiàn)詳解

此次示例包含表單校驗(yàn)和網(wǎng)絡(luò)請(qǐng)求，代碼如下:

login.js

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

 /**
  * 頁(yè)面的初始數(shù)據(jù)
  */
 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) {

      //訪問(wèn)正常
      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: "密碼錯(cuò)誤",
        icon: 'none',
        duration: 1500
       })
      } else {
       wx.showToast({
        title: "該用戶不存在",
        icon: 'none',
        duration: 1500
       })
      }
     } else {

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

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

    }
   })
  }

 }
})

關(guān)于login.js，主要是寫(xiě)通信邏輯的，與咱們平時(shí)寫(xiě)js差異并不大，唯一不同的就是api長(zhǎng)得不樣罷了。

關(guān)于其中的getApp().globalData.urlPath，相當(dāng)于全局變量，不用我每次都寫(xiě)一大串https之類的。

表單校驗(yàn)的效果如圖:

微信小程序網(wǎng)絡(luò)通信實(shí)現(xiàn)詳解

代碼說(shuō)明:

顯示消息提示框(相當(dāng)于js的alert提示):

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

獲取input屬性為name的值(相當(dāng)于js中form.email.value,前提是這個(gè)表單name要為form，且form中的input要存在一個(gè)name=”email”)

e.detail.value.email;

跳轉(zhuǎn)代碼(相當(dāng)于window.location.href):

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

至于wx.request，我想只要是寫(xiě)過(guò)ajax的，都很好理解。

login.json:

{
 "usingComponents": {}
}

關(guān)于這個(gè)login.json有什么用，我唯一想到的是頁(yè)面的title(其實(shí)相當(dāng)于html中的title)

lgoin.wxml:

<view class='container'>
 <view class='header'>
  <text>acs系統(tǒng)</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='請(qǐng)輸入郵箱' />
  </view>
  <view class='section'>
   <text>密碼:</text>
   <input password='password' name="pwd" placeholder='請(qǐng)輸入密碼' />
  </view>
  <view class='button'>
   <button type='primary' form-type='submit'>登錄</button>
   <text>\n</text>
    <view bindtap='register' class="register">注冊(cè)</view>
  </view>
 </form>

</view>

wxml相當(dāng)于視圖(如html或者模板語(yǔ)言(jsp、volocity、freemarker、beetl等))

視圖除了可以寫(xiě)一些標(biāo)簽之類的，還可以寫(xiě)一些邏輯判斷。后面會(huì)講到的。

login.wxss:

/* 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;
}

這個(gè)wxss就相當(dāng)于css，定義視圖的樣式，決定視圖長(zhǎng)什么樣(好看不好看)

關(guān)于微信小程序網(wǎng)絡(luò)通信，更多信息可以參考官方文檔:

wx.request

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

微信小程序 網(wǎng)絡(luò)通信實(shí)現(xiàn)詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

微信小程序網(wǎng)絡(luò)通信實(shí)現(xiàn)詳解