小程序项目实战系列，手把手教你搭建一个属于自己的小程序。
一、小程序及API的创建与配置
待更新：二、实现首页轮播及商品搜索
待更新：三、实现首页九宫格入口及商品推荐
待更新：四、实现跑马灯公告及获取用户位置
待更新：五、实现商品分类及商品详情
待更新：六、实现购物车页及收货地址页
待更新：七、实现提交订单页及个人中心页
待更新：八、实现订单列表页及意见反馈
待更新：九、实现优惠券及售后退款
待更新：十、实现订单评价功能
一、小程序介绍
小程序可以理解为在APP程序中的子程序，小程序在主程序允许的规范下进行开发所需要的功能。用户不需要关心是否安装太多应用的问题，应用无处不在，随时可用，但又无需安装卸载。
二、创建项目
2.1、申请账号
- 访问微信公众平台，点击账号注册。
- 选择小程序，并在表单填写所需的各项信息进行注册。
- 在开发管理选择开发设置，将AppID及AppSecret复制出来进行存储。
2.2、开发工具安装
微信Web开发者工具下载地址。
SQLServer安装教程。
- 下载2008R2版本SQL Server安装包并解压，点击安装图标。
- 左侧选择安装，右侧选择全新安装或向现有安装添加功能。
- 输入对应的产品秘钥，这里可以根据不同的版本去百度自行搜索，选择接收许可条款，点击下一步。
- 等进度条走完，点击安装，点击下一步，选择全选，继续下一步。
扫描二维码关注公众号，回复：
14538487 查看本文章
- 选择对所有SQL Server服务使用相同的账号，点击下一步，在数据库引擎配置选择添加当前用户。
- 一直下一步，直至安装完成。
Visual Studio下载及安装教程。
2.3、搭建小程序项目及WebApi
小程序项目创建
- 打开微信Web开发者工具，扫码登陆后选择创建小程序，在下图所示文本框填入我们刚才申请账号时所复制的AppID。
- 因为是做一个电商类的小程序，现在默认只有index的page，所以我们还需要再创建三个page，分别是商品分类，购物车、个人中心。
- 创建好对应的page后，在小程序目录新建一个images文件夹，下载对应的图标用于底部的Tabbar切换。这里可以去阿里巴巴矢量图标库找我们想要的素材。
- 在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"
}
]
},
数据库的创建
- 打开SQLServer，连接数据库引擎，点击左上角的新建查询。
- 创建数据库，以及用户表，选中代码点击执行。
--创建数据库
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架构
- 打开Visual Studio，选择创建新项目，填写对应的项目名称及保存位置。
- 选择WebApi项目模板，点击创建。
- 到这一步所看到的就是一个传统的MVC的API架构了，选择右侧解决方案中的Models文件夹点击添加，选择新建项。
- 右上方的文本框搜索实体数据模型，点击添加。
- 选择来自数据库的EF设计器，点击下一步。
- 点击新建连接，选择Microsoft SQL Server。
- 服务器名文本框输入一个 " . " ，下放的数据库下拉框中选择上面步骤所创建的数据库，点击确定，点击下一步。
- 实体数据模型向导选择表，点击完成，刚才所在数据库创建的表现在就映射在这里了。
- Models文件夹下创建一个实体类BaseModel，用于获取数据库上下文。至此小程序及WebApi搭建就大致完成了，下一篇教大家实现首页轮播及商品搜索。
public class BaseModel
{
/// <summary>
/// 获取上下文
/// </summary>
/// <returns>EF上下文</returns>
public static ShoppingMallEntities Create()
{
ShoppingMallEntities db = CallContext.GetData("db") as ShoppingMallEntities;
if (db == null)
{
db = new ShoppingMallEntities();
CallContext.SetData("db", db);
}
return db;
}
}