侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

微信(小程序)  /  管理员 发布于 3年前   253

关于网络通信,这里我使用的是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.jsPage({ /**  * 页面的初始数据  */ 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:

   acs系统     \n    
用户名: 密码: \n 注册

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

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

您可能感兴趣的文章:

  • 详解微信小程序用定时器实现倒计时效果
  • 微信小程序设置滚动条过程详解
  • 微信小程序实现图片选择并预览功能
  • 微信小程序如何修改radio和checkbox的默认样式和图标
  • 微信小程序 确认框的实现(附代码)
  • 微信小程序―setTimeOut定时器的问题及解决


  • 上一条:
    微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
    下一条:
    js实现ajax分页完整实例
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • mysql5.7中实现分区表及分区where in查询示例及分区分表对比浅析(0个评论)
    • nginx + vue配置实现同域名下不同路径访问不同项目(0个评论)
    • 在laravel框架中的5个HTTP客户端技巧分享(0个评论)
    • 在go语言中使用FFmpeg库实现PCM音频文件编码为mp3格式文件流程步骤(0个评论)
    • gopacket免安装Pcap实现驱动层流量抓包流程步骤(0个评论)
    • 在laravel项目中实现密码强度验证功能推荐扩展包:password-strength(0个评论)
    • 在go语言中用filepath.Match()函数以通配符模式匹配字符串示例(0个评论)
    • Laravel Response Classes 响应类使用优化浅析(0个评论)
    • mysql中sql_mode的各模式浅析(0个评论)
    • 百度文心一言今天发布,个人第一批内测体验记录,不好别打我(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客