微信小程序通过asp.net访问sql server数据库

今天来说一下微信小程序如何通过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。