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


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实现用户注册协议倒计时的方法
Jan 21 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
vue数组对象排序的实现代码
Jun 20 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 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中如何调用webservice的实例参考
2013/04/25 PHP
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
Python 专题三 字符串的基础知识
2017/03/19 Python
Python MD5加密实例详解
2017/08/02 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
简约控的天堂:The Undone
2016/12/21 全球购物
测量实习生自我鉴定
2013/09/19 职场文书
大学生自我鉴定
2013/12/08 职场文书
《去年的树》教学反思
2014/04/11 职场文书
学校节能减排倡议书
2014/05/16 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
成本会计实训报告
2014/11/05 职场文书
小学中等生评语
2014/12/29 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
演讲比赛主持词
2015/06/29 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python