小程序项目实战｜一、小程序及API的创建与配置

小程序项目实战系列，手把手教你搭建一个属于自己的小程序。
一、小程序及API的创建与配置
待更新：二、实现首页轮播及商品搜索
待更新：三、实现首页九宫格入口及商品推荐
待更新：四、实现跑马灯公告及获取用户位置
待更新：五、实现商品分类及商品详情
待更新：六、实现购物车页及收货地址页
待更新：七、实现提交订单页及个人中心页
待更新：八、实现订单列表页及意见反馈
待更新：九、实现优惠券及售后退款
待更新：十、实现订单评价功能

一、小程序介绍

小程序可以理解为在APP程序中的子程序，小程序在主程序允许的规范下进行开发所需要的功能。用户不需要关心是否安装太多应用的问题，应用无处不在，随时可用，但又无需安装卸载。

二、创建项目

2.1、申请账号

1. 访问微信公众平台，点击账号注册。

2. 选择小程序，并在表单填写所需的各项信息进行注册。

3. 在开发管理选择开发设置，将AppID及AppSecret复制出来进行存储。
   

2.2、开发工具安装

微信Web开发者工具下载地址。

工具下载地址

SQLServer安装教程。

1. 下载2008R2版本SQL Server安装包并解压，点击安装图标。

2. 左侧选择安装，右侧选择全新安装或向现有安装添加功能。

3. 输入对应的产品秘钥，这里可以根据不同的版本去百度自行搜索，选择接收许可条款，点击下一步。

4. 等进度条走完，点击安装，点击下一步，选择全选，继续下一步。

5. 选择对所有SQL Server服务使用相同的账号，点击下一步，在数据库引擎配置选择添加当前用户。

6. 一直下一步，直至安装完成。

Visual Studio下载及安装教程。

Visual Studio下载及安装教程

2.3、搭建小程序项目及WebApi

小程序项目创建

1. 打开微信Web开发者工具，扫码登陆后选择创建小程序，在下图所示文本框填入我们刚才申请账号时所复制的AppID。

2. 因为是做一个电商类的小程序，现在默认只有index的page，所以我们还需要再创建三个page，分别是商品分类，购物车、个人中心。

2. 创建好对应的page后，在小程序目录新建一个images文件夹，下载对应的图标用于底部的Tabbar切换。这里可以去阿里巴巴矢量图标库找我们想要的素材。

3. 在app.json文件中添加tabbar节点，将对应的配置进行添加，能够通过tabbar进行页面的切换就算大功告成了。

 "tabBar": {
    "color": "#666666",
    "selectedColor": "#F2A602",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/6-1.png",
        "selectedIconPath": "/images/6-2.png"
      },
      {
        "pagePath": "pages/classification/index",
        "text": "分类",
        "iconPath": "/images/6-3.png",
        "selectedIconPath": "/images/6-4.png"
      },
      {
        "pagePath": "pages/shoppingCart/index",
        "text": "购物车",
        "iconPath": "/images/6-5.png",
        "selectedIconPath": "/images/6-6.png"
      },
      {
        "pagePath": "pages/person/index",
        "text": "我的",
        "iconPath": "/images/6-7.png",
        "selectedIconPath": "/images/6-8.png"
      }
    ]
  },

数据库的创建

1. 打开SQLServer，连接数据库引擎，点击左上角的新建查询。

2. 创建数据库，以及用户表，选中代码点击执行。

--创建数据库
CREATE DATABASE ShoppingMall;

--选中数据库
USE ShoppingMall;

--创建用户表
CREATE TABLE UserInfo(
	--用户ID
	userId INT PRIMARY KEY IDENTITY,
	--用户openId
	userOpenId NVARCHAR(200),
	--用户姓名
	userName NVARCHAR(50),
	--用户头像
	userHead NVARCHAR(200),
	--用户性别
	userSex NVARCHAR(50),
	--创建时间
	createTime DATETIME
);

搭建WebApi架构

1. 打开Visual Studio，选择创建新项目，填写对应的项目名称及保存位置。

2. 选择WebApi项目模板，点击创建。

3. 到这一步所看到的就是一个传统的MVC的API架构了，选择右侧解决方案中的Models文件夹点击添加，选择新建项。

4. 右上方的文本框搜索实体数据模型，点击添加。

5. 选择来自数据库的EF设计器，点击下一步。

6. 点击新建连接，选择Microsoft SQL Server。

7. 服务器名文本框输入一个 " . " ，下放的数据库下拉框中选择上面步骤所创建的数据库，点击确定，点击下一步。

8. 实体数据模型向导选择表，点击完成，刚才所在数据库创建的表现在就映射在这里了。

9. Models文件夹下创建一个实体类BaseModel，用于获取数据库上下文。至此小程序及WebApi搭建就大致完成了，下一篇教大家实现首页轮播及商品搜索。

  public class BaseModel
    {
        /// 

        /// 获取上下文
        /// 
        /// EF上下文
        public static ShoppingMallEntities Create()
        {
            ShoppingMallEntities db = CallContext.GetData("db") as ShoppingMallEntities;
            if (db == null)
            {
                db = new ShoppingMallEntities();
                CallContext.SetData("db", db);
            }
            return db;
        }
    }