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

关于网络通信，这里我使用的是请求官方代码示例如下：

wx.request({ url: 'test.php '，//仅为示例，并非真实的接口地址data: { x: ' '，y: '' }，标头： { ' content-type ' : ' application/JSON '//默认值},成功(res) { console.log(res.data) })对于初学者而言，官方示例可能会看不怎么懂，所以我就以我自己当初项目驱动学习的方式（开发个人的记账小程序)来作为学习实例。

以登录来说，效果图如下：

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

login.js

//页面/登录/登录。js页面({/* * *页面的初始数据*/data: { username: ' '，password: '' }，寄存器：函数(e){ wx。navigateto({ URL : './register/register' }) }，formSubmit:函数{控制台。日志(例如详细信息。价值。电子邮件)；控制台。日志(例如详细信息。价值。pwd)var username=e . detail。价值。电子邮件；var password=e . detail。价值。pwdvar 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 '，持续时间： 1500 })else if(！emailreg。test(username)){ wx。显示吐司({ title : '邮箱有误，图标：“无”，持续时间： 1500 })else if(password==null | | password==' '){ wx。showtoast({ title : '密码不能为空，icon:“无”，持续时间： 1500 })else { wx。请求({ URL : GetApp()。GlobalDATa。urlpath ' SysUser/log in '，method: 'POST '，data : { username : username，password: password }，header : { ' Content-Type ' 3: ' application/x-www-form-URL encoded ' }，success : functionif(RES . statuscode==200){//访问正常if(RES .数据。代码=' 000000 '){ wx。显示吐司({ title : '登陆成功，icon: 'success '，duration: 2000，success : function(){ wx。navigateto({ URL : './manage/manage ' })wx。setstorage({ key : ' userId '，data : RES . data。用户。usercode })wx。setstorage({ key : ' userName '，data : RES . data。用户。userName })控制台。日志(' test : ' wx。getstoragesync(' userName ')；} })} else if(RES . data。代码==' 111111 '){ wx。显示吐司({ title : '密码错误，icon:“无”，持续时间： 1500 })else { wx。显示吐司({ title : '该用户不存在，图标：“无”，持续时间： 1500 })else { wx。showloading({ title : '系统异常，fail })setTimeout(function(){ wx。HideLoading()}，2000)} })})关于login.js，主要是写通信逻辑的，与咱们平时写射流研究…差异并不大，唯一不同的就是美国石油学会(美国石油协会)长得不样罢了。

关于其中的getApp().相当于全局变量，不用我每次都写一大串安全超文本传输协议之类的。

表单校验的效果如图：

代码说明：

显示消息提示框（相当于射流研究…的警报提示):

wx.showToast({ title: '邮箱有误，icon: "无"，工期： 1500})获取投入属性为名字的值（相当于射流研究…中form.email.value，前提是这个表单名字要为形式，且形式中的投入要存在一个name="email ")

e。细节。价值。电子邮件；跳转代码（相当于window.location.href):

wx.navigateTo({ url: './manage/manage'})至于请求我想只要是写过创建交互式、快速动态网页应用的网页开发技术的，都很好理解。

登录。js :

{"使用组件": {}}关于这个login.json有什么用，我唯一想到的是页面的标题（其实相当于超文本标记语言中的标题)

lgoin.wxml:

视图类='容器'视图类='标题'文本ACS系统/text/view view view text \ n/text/view view class=' header '/view form bind submit=' formSubmit ' view class=' section ' text用户名：/text输入类型=“文本”名称='电子邮件'占位符='请输入邮箱//view view class='section '文本密码：/文本输入密码='密码'名称='pwd '占位符='请输入密码//view view class=' button ' button type=' primary ' form-type=' submit '登录/按钮文本\ n/文本视图bind tap=' register ' class=' register '注册/view /view /form/viewwxml相当于视图（如超文本标记语言或者模板语言(jsp、volocity、freemarker、beetl等))

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

登录。wxss 3360

/*页面/登录/登录。wxss */form { width : 310 px；高度： 240像素；线高： 40px/* border: 1px纯红；*/}输入{ border: 1px固体# ccc宽度： 310 px高度： 40px}.按钮{ margin-top : 20px；}.标题文本{ font-size : 25pxcolor: # 666}表单文本{ font-size : 20pxcolor: # 666}。注册{ color:blackdisplay:块；宽度： 310 px高度： 40pxborder: 1px固体# ccc文本对齐：中心；}这个页面样式表就相当于css，定义视图的样式，决定视图长什么样（好看不好看)

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

请求

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