微信小程序数据交互（wx.request）

对 wx.request 的理解

微信小程序的设计模式基本依照于前端设计 html+css+js，关于与后端数据的交互，小程序不能像传统后端开发语言一样，能直接连接操作数据库。小程序更多的是像前端界面，通过网络请求调用后端API来实现数据交互的，而这交互的方式则是依托于 wx.request 方法。
首先wx.request的一般架构可以看如下代码，或者参照官方文档进行编写：

wx.request({url: 'https://域名/Api/Index/PostLogin', //仅为示例，网络请求必须以https开头method: 'post', //http请求方法，默认为Getdata: {x: '',y: ''},header: {'content-type': 'application/json' // 默认值},success(res) {    //这里是官方给出的写法，也可以写成 success: function(res){ … }console.log(res.data)},complete(res){}
})

以下为一个小案例：

微信小程序端的 login.wxml 页面代码，点击登录按钮通过form表单提交，就能调用login.js页面下的formSubmit方法，代码如图：

login.wxml页面的截面图如下：

微信小程序端的 login.js 页面的formSubmit方法如下，“wx”是系统对象，类似于jquery中的 $ 符号，wx.request({ … })就如jquery中的 $.ajax({ … })，其中的参数与ajax方法类似，此处为post请求，传递的参数类型位json格式，调用方法为PostLogin。

外部API方法代码简单框架，省略中间环节代码，如下：

using WebControl.Areas.ServiceApi.Models;
using Framework;
using Model.Extend;
using System.Web.Http;
using System.Web.Http.Results;namespace WebControl.Areas.ServiceApi.Controllers.login
{public class IndexController : ApiController{[HttpGet]public JsonResult<AjaxResult> GetLogin(){… //省略中间环节return Json(new AjaxResult { state = ResultType.success.GetRemark(), message = "Get恭喜你，登录成功！", total = 1, data = "[]" });}[HttpPost]public JsonResult<AjaxResult> PostLogin([FromBody]LoginUser value){… //省略中间环节return Json(new AjaxResult { state = ResultType.success.GetRemark(),  //登录情况message = "Post恭喜你，登录成功！",   //返回的msgtotal = 1,         //比对信息记录数data = "{ \"ComId\":\"" + value.ComId + "\",\"UserId\":\"" + value.UserId + "\",\"Password\":\"" + value.Password +"\"}" });    //返回用户的登录数据}}
}

以下为Api相关类方法，用户登录模型（LoginUser）、返回结果数据集（AjaxResult）、枚举扩展类（RemarkExtend）。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebControl.Areas.ServiceApi.Models
{/*用户登录模型*/public class LoginUser{public string ComId { get; set; }public string UserId { get; set; }public string Password { get; set; }}
}using Model.Extend;
namespace Framework
{/// <summary>/// 返回结果数据/// </summary>public class AjaxResult{/// <summary>/// 操作结果类型/// </summary>public object state { get; set; }/// <summary>/// 获取 消息内容/// </summary>public string message { get; set; }/// <summary>/// 获取 返回数据/// </summary>public object data { get; set; }/// <summary>/// 总数据条数/// </summary>public int total { get; set; }}/// <summary>/// 表示 ajax 操作结果类型的枚举/// </summary>public enum ResultType{/// <summary>/// 成功结果类型/// </summary>[Remark("0")]success = 0,/// <summary>/// 消息结果类型/// </summary>[Remark("1")]info = 1,/// <summary>/// 警告结果类型/// </summary>[Remark("2")]warning = 2,/// <summary>/// 异常结果类型/// </summary>[Remark("3")]error = 3}using System;
using System.Reflection;namespace AutoCg.Model.Extend
{/// <summary>/// 指定一个标识性的属性，用于标识（枚举/字段）/// </summary>[AttributeUsage(AttributeTargets.Enum | AttributeTargets.Field)]public class RemarkAttribute : Attribute{public RemarkAttribute(string remark){this.Remark = remark;}public string Remark { get; private set; }}public static class RemarkExtend{/// <summary>/// 扩展方法_获取枚举标识信息/// </summary>/// <param name="enumValue"></param>/// <returns></returns>public static string GetRemark(this Enum enumValue){Type type = enumValue.GetType();FieldInfo field = type.GetField(enumValue.ToString());if (field.IsDefined(typeof(RemarkAttribute), true)){RemarkAttribute remarkAttribute = (RemarkAttribute)field.GetCustomAttribute(typeof(RemarkAttribute));return remarkAttribute.Remark;}else{return enumValue.ToString();}}}
}