微信小程序之网络通讯

时间 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;
}

这个wxss就至关于css，定义视图的样式，决定视图长什么样(好看很差看)

关于微信小程序网络通讯，更多信息能够参考官方文档:
wx.request