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


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 相关文章推荐
为超链接加上disabled后的故事
Dec 10 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 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
实现php加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
bootstrap的工具提示实例代码
2017/05/17 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
python实现五子棋游戏
2019/06/18 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
技校毕业生的自我评价
2013/12/27 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
医学求职信
2014/05/28 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
Python机器学习之基础概述
2021/05/19 Python