微信小程序 网络通信实现详解


Posted in Javascript onJuly 23, 2019

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

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

对于初学者而言,官方示例可能会看不怎么懂,所以我就以我自己当初项目驱动学习的方式(开发个人的记账小程序)来作为学习实例。

以登录来说,效果图如下:

微信小程序 网络通信实现详解

此次示例包含表单校验和网络请求,代码如下:

login.js

// 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长得不样罢了。

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

表单校验的效果如图:

微信小程序 网络通信实现详解

微信小程序 网络通信实现详解

代码说明:

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

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的,都很好理解。

login.json:

{
 "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等))

视图除了可以写一些标签之类的,还可以写一些逻辑判断。后面会讲到的。

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

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

关于微信小程序网络通信,更多信息可以参考官方文档:

wx.request

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 类型转换常见方法小结
May 31 Javascript
读jQuery之十 事件模块概述
Jun 27 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
浅谈js中的闭包
Mar 16 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
js canvas实现擦除动画
Jul 16 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
常用的javascript设计模式
Jan 11 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 #Javascript
koa2 从入门到精通(小结)
Jul 23 #Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 #Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 #Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 #Javascript
vscode vue 文件模板的配置方法
Jul 23 #Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 #Javascript
You might like
Protoss热键控制
2020/03/14 星际争霸
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Django接受前端数据的几种方法总结
2016/11/04 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
python 文件查找及内容匹配方法
2018/10/25 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
西部世纪面试题
2014/12/05 面试题
毕业求职自荐信格式是什么
2013/11/19 职场文书
车间核算员岗位职责
2014/07/01 职场文书
代办社保委托书范文
2014/10/06 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
公司出差管理制度范本
2015/08/05 职场文书
基于PyQt5制作一个群发邮件工具
2022/04/08 Python