今天来说一下微信小程序如何通过asp.net访问sql server数据库，因为js代码不宜直接访问数据库，所以要用asp.net的网站来充当一个webapi。这是本人第一次写微信小程序开发的相关文章，不足之处难免。
在讲正题前，不得不提到一个重要名词JSON,JSON是一种轻量级的数据交换格式。采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。相信有一定移动端开发基础的人一定对不陌生。很多第三方平台的webapi都通过JSON来共享数据，如图1，通过经纬度查询料某地的天气(网站为devapi.qweather.com，需要先注册然后申请key)，返回的结果就一个JSON。
好了，进入正题，首先我们将实现过程分三块，第一块是数据库，即数据层，第二块是webapi，通过asp.net调用数据库，将结果以json格式输出，即使业务层，第三块是微信小程序，微信小程序wx.request来访问webapi，查询数据。为了尽量简洁讲解，这里尽量简化了设计需求。
第一块：建立数据库，在sql server上建立一个数据库，新建一张表，这里取名为Product，字段也十分简单，一个Id，用于主键，一个Name用于产品名称，一个Num用于数量。表格建立后，根据表格编写四个最基本存储过程，列出所有数据，添加数据、根据主键删除数据、根据主键修改数据、根据主键查询数据，当然也可在asp.net直接调用。
第二块：webapi编码。打开vs.net，新建一个网站，在资源管理器添加一个新项，弹出对话框，选择一般处理程序(如图2)，即扩展名为ashx,这里命名为ProductHandler.ashx。将其设为起始页，运行之，可以看到默认输出了"Hello World",一会我们对其改造。
第一步引用一个叫“Newtonsoft.Json”的库文件，我们用它处理json。
第二步，在web.config中配置数据库链接，也就是添加一个connectionStrings节点，具体配置如下，读者请根据实际替换Data Source、Initial Catalog等属性。
<connectionStrings>
<add name="WebSite" connectionString="Data Source=localhost;Initial Catalog=dbtest;User ID=sa;Password=123"/>
</connectionStrings>
第三步，新建一个类，它与刚才建立的表名对应的种子类——Product.cs,代码如下
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// <summary>
///Product 的摘要说明
/// </summary>
public class Product
{
public bool IsCorrect;
public string LastError;
public List<XProduct> ArrXProduct;
public Product()
{
//
//TODO: 在此处添加构造函数逻辑
//
}
}
public class XProduct
{
//与字段对应
public int Id = 0;
public String Name = "";
public int Num = 0;
}
第四步，打开刚才的ProductHandler.ashx，对其编码如下
<%@ WebHandler Language="C#" Class="ProductHandler" %>
using System;
using System.Web;
using System.Collections.Generic;
using System.Linq;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;
using Newtonsoft.Json;
using System.Configuration;
public class ProductHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
//listproduct(context);
context.Response.ContentType = "text/plain";
if (context.Request["op"]==null)
{
context.Response.Write("未知的操作参数");
return;
}
string op = context.Request["op"].ToString();
switch (op)
{
case "list":
listproduct(context);
break;
case "add":
Add(context);
break;
default:
context.Response.Write("未知的操作参数");
break;
}
//context.Response.Write(name);
}
public void Add(HttpContext context)
{
String Name = "";
int Num = 0;
string result = "";
if (context.Request["name"]==null || context.Request["num"]==null)
{
result= "参数获取失败";
context.Response.Write(result);
return;
}
else
{
Name = context.Request["name"].ToString();
Num = int.Parse(context.Request["num"].ToString(), 0);
}
SqlConnection conn;
string sqlconn = ConfigurationManager.ConnectionStrings["WebSite"].ConnectionString;
conn = new SqlConnection(sqlconn);
try
{
conn.Open();
SqlCommand cmd = new SqlCommand("p_my_ProductAdd", conn);
cmd.CommandType = CommandType.StoredProcedure;
SqlParameter RETURN_VALUEParam = cmd.Parameters.Add("@RETURN_VALUE", SqlDbType.Int, 4);
RETURN_VALUEParam.Direction = ParameterDirection.ReturnValue;
SqlParameter NameParam = cmd.Parameters.Add("@Name", SqlDbType.VarChar, 50);
NameParam.Value = Name;
SqlParameter NumParam = cmd.Parameters.Add("@Num", SqlDbType.Int);
NumParam.Value = Num;
cmd.ExecuteNonQuery();
cmd.Dispose();
result = "添加成功";
}
catch (SqlException ex)
{
result = ex.Message;
}
catch (System.Exception ex)
{
result = ex.Message;
}
finally
{
conn.Close();
}
context.Response.Write(result);
}
private void listproduct(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
SqlConnection conn;
SqlDataReader dr = null;
string result = "";
string sqlconn = ConfigurationManager.ConnectionStrings["WebSite"].ConnectionString;
//conn = new SqlConnection(Application["ConnectString"].ToString());
conn = new SqlConnection(sqlconn);
List<XProduct> ArrXProduct = new List<XProduct>();
Product MyProduct = new Product();
try
{
conn.Open();
SqlCommand cmd = new SqlCommand("p_my_ProductList", conn);
cmd.CommandType = CommandType.StoredProcedure;
SqlParameter RETURN_VALUEParam = cmd.Parameters.Add("@RETURN_VALUE", SqlDbType.Int, 4);
RETURN_VALUEParam.Direction = ParameterDirection.ReturnValue;
MyProduct.LastError = "";
MyProduct.IsCorrect = true;
dr = cmd.ExecuteReader();
while (dr.Read())
{
XProduct MyXProduct = new XProduct();
MyXProduct.Id = int.Parse(dr["Id"].ToString());
MyXProduct.Name = dr["Name"].ToString();
MyXProduct.Num = int.Parse(dr["Num"].ToString());
ArrXProduct.Add(MyXProduct);
}
MyProduct.ArrXProduct = ArrXProduct;
dr.Close();
cmd.Dispose();
}
catch (SqlException ex)
{
MyProduct.IsCorrect = false;
MyProduct.LastError = ex.Message;
ArrXProduct.Clear();
MyProduct.ArrXProduct = ArrXProduct;
}
catch (System.Exception ex)
{
MyProduct.IsCorrect = false;
MyProduct.LastError = ex.Message;
ArrXProduct.Clear();
MyProduct.ArrXProduct = ArrXProduct;
}
finally
{
conn.Close();
}
result = JsonConvert.SerializeObject(MyProduct); //将列表及是否正确等信息以JSON格式输出
context.Response.Write(result);
}
public bool IsReusable {
get {
return false;
}
}
}
到此api端的代码已经完成，再次运行网站，然后在地址配置参数op=list，可以看到查询结果已经用json的格式输出了。
第三块内容启动微信开发者工具，新建一个项目，填写事先申请的app id，这里选择“不使用云开发”和js-基础版的模板。会自动得index和log的page,将log对应的三个文件全部删除，同时在app.json的列表将log的配置删除，删除index.wxml中的布局代码，删除index.wxss中的样式表代码，删除index.js中的无用代码，只保留onLoad等基本函数，和data，交将data定义的变量也清除，接着点击微信开发者工具右上角的详情，切换到本地设置标签，勾选“不校验合法域名”这个选项(如图3)。完成之后就以编码了（注意本文省略样式表的代码）。
第一步，打开index.js，代码如下，注意将域名替换你自己的，下同。
// index.js
Page({
data: {
List:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.listproudct();
},
listproudct()
{
var that=this;
wx.request({
url: 'http://localhost:10524/ProductHandler.ashx',
data:{
op:"list"
},
success:function(res){
console.log(res.data.ArrXProduct);
// that.data.List=res.data.ArrXProduct;
that.setData({
List:res.data.ArrXProduct
})
for (var i=0;i<that.data.List.length;i++)
{
console.log(that.data.List[i].Name)
}
}
})
}
})
第二步，打开index.wxml文件，布局代码如下
<navigator url="../addproduct/addproduct"><button type="primary">添加产品</button></navigator>
<scroll-view scroll-x="true">
<view>
<view class="list-item" wx:for="{{List}}" wx:for-item="prdouct">
<text>名称：{{prdouct.Name}}数量：{{prdouct.Num}}</text>
</view>
</view>
</scroll-view>
接着我们建立一个addproduct的page文件，用它向数据库添加文件，同样的也用通过wx.request来完成。
第三步，打开addproduct.js,代码如下
// pages/addproduct/addproduct.js
var num;
var name;
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
},
bindproductinput(e)
{
this.name=e.detail.value
},
bindnuminput(e)
{
this.num=e.detail.value
},
insertproduct()
{
var that=this;
wx.request({
url: 'http://localhost:10524/ProductHandler.ashx',
data:{
op:"add",
name:that.name,
num:that.num
},
success:function(res){
console.log(res.data);
wx.showToast({
title: res.data,
})
}
})
}
})
第四步,打开addproduct.wxml文件,布局代码如下
<view class="container">
<view>产品名称:<input placeholder="请输入产品名称" class="box" bindinput="bindproductinput"/></view>
<view>产品数量:<input placeholder="请输入产品数量" class="box" type="number" bindinput="bindnuminput"/></view>
<button type="primary" bind:tap="insertproduct">提交</button>
<navigator url="../index/index"><button type="primary">返回列表</button></navigator>
</view>
在微信开发者工具自带的模拟器中运行，我们可以在index页面看到产品列表，单击添加产品按钮，跳转到addproduct，我们可以添加新产品。一个最简单的微信小程序通过asp.net访问sql server代码就完成了，当然由于是localhost,所以只能在自带的模拟器中运行，如果要用有开发者权限的手机“真机调试”，还得组建一个局域网，发布asp.net的网站，然后布置到iis中，使充当服务器的电脑和手机处于同一局域网中。如果发布到互联网，要记得登录到微信公众号管理员后台，添加自己的服务器域名到白名单。如何组件局域网，发布到互联网请读者自行参考文档。
源码放到了csdn上。请自行下载https://download.csdn.net/download/wstcl/88938668?spm=1001.2014.3001.5501。感觉微信公众平台的文章编辑器中的代码引用很鸡肋,没有csdn好用,代码部份看着累,也可以去csdn看我的文章https://blog.csdn.net/wstcl/article/details/136601563?spm=1001.2014.3001.5502
