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


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 相关文章推荐
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
vue双向绑定简要分析
Mar 23 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
js 毫秒转天时分秒的实例
Nov 17 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 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一些十分严重的缺陷详解
2013/06/03 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
PHP学习记录之数组函数
2018/06/01 PHP
php和nginx交互实例讲解
2019/09/24 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
使用cx_freeze把python打包exe示例
2014/01/24 Python
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
Python 错误和异常代码详解
2018/01/29 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
家具厂厂长岗位职责
2014/01/01 职场文书
医院党员公开承诺书
2014/08/30 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
首席执行官观后感
2015/06/03 职场文书
《我是什么》教学反思
2016/02/16 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python