微信小程序之网络通信

微信小程序 2020-11-01

关于网络通信，这里我使用的是wx.request,官方代码示例如下:

wx.request({
  url: 'test.PHP',//仅为示例，并非真实的接口地址
  data: {
    x: '',y: 
  },header: {
    content-type': application/json'  默认值
  },success (res) {
    console.log(res.data)
  }
})

对于初学者而言，官方示例可能会看不怎么懂，所以我就以我自己当初项目驱动学习的方式(开发个人的记账小程序)来作为学习实例。@H_403_39@@H_403_39@以登录来说，效果图如下:

此次示例包含表单校验和网络请求，代码如下:@H_403_39@login.js

 pages/login/login.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    username: ""

  },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: "用户名不能为空"none1500
      })
    } else if (!emailReg.test(username)) {

      wx.showToast({
        title: 邮箱有误
      })

    } if (password == null || password == 密码不能为空else {
      wx.request({

        url: getApp().globalData.urlPath + sysUser/loginPOSTContent-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: 登陆成功success2000../manage/manage
                  })

                  wx.setStorage({
                    key: userIduserNametest:" + wx.getStorageSync());
                }
              })

            } 111111密码错误
              })
            }  {
              wx.showToast({
                title: 该用户不存在
              })
            }
          }  {

            wx.showLoading({
              title: 系统异常)
          }

        }
      })
    }

  }
})

关于login.js，主要是写通信逻辑的，与咱们平时写js差异并不大，唯一不同的就是api长得不样罢了。

关于其中的getApp().globalData.urlPath，相当于全局变量，不用我每次都写一大串https之类的。

表单校验的效果如图:

代码说明:

显示消息提示框(相当于js的alert提示):

wx.showToast({
  title: 
})

获取input属性为name的值(相当于js中form.email.value,前提是这个表单name要为form，且form中的input要存在一个name=”email”)

e.detail.value.email;

跳转代码(相当于window.location.href):

wx.navigateTo({
 url: 
})

至于wx.request，我想只要是写过ajax的，都很好理解。

{
  usingComponents: {}
}

关于这个login.json有什么用，我唯一想到的是页面的title(其实相当于html中的title)

lgoin.wxml:

<view class=container'>
  <view header'>
    <text>acs系统</text>
  </view>
    <view>
    <text>\n</text>
  </view>
  <view '>
  </view>
  <form bindsubmit=formSubmit">
    <view section'>
      <text>用户名：</text>
      <input type=text' name=email" placeholder=请输入邮箱' />
    </view>
    <view '>
      <text>密码:</text>
      <input password=passwordpwd请输入密码button'>
      <button type=primary' form-type=submit'>登录</button>
      <text>\n</text>
       <view bindtap=register">注册</view>
    </view>
  </form>

</view>

wxml相当于视图(如html或者模板语言(jsp、volocity、freemarker、beetl等))@H_403_39@视图除了可以写一些标签之类的，还可以写一些逻辑判断。后面会讲到的。

 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: #;
}
.register{
color:black;
display: block;
width: 310px;
height: 40px;
border: 1px solid #ccc;
text-align: center;
}

这个wxss就相当于css，定义视图的样式，决定视图长什么样(好看不好看)

关于微信小程序网络通信，更多信息可以参考官方文档:@H_403_39@wx.request

[小程序]微信小程序获取input并发送网络请求

1. 获取输入框数据wxml中的input上增加bindinput属性，和方法值在js部分定义与之对应的方法，只要在输入...

[小程序]微信小程序获取位置展示地图并标注信息

1.map组件的高度如果想要铺满屏幕，要是使用height:100vh样式2.获取位置要在app.json中标明权限3.先使用...

QQ小程序支付

QQ小程序支付 Java后端同学折腾QQ小程序的支付折腾了好几天，没有完成统一下单，因为我做过微信和支付...

.NET之微信小程序获取用户UnionID

前言：在实际项目开发中我们经常会遇到账号统一的问题，如何在不同端或者是不同的登录方式下保证同一个...

微信小程序picker组件关于objectArray数据类型绑定

一、前言：我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无...

微信小程序转化为uni-app项目

前言：之前自己做一个uni-app的项目的时候前端需要实现一个比较复杂的动态tab和swiper切换的功能，但是...

微信小程序之网络通信

相关文章