从零开始,开发一个电商微信小程序[前端+后端(c#)]

如何快速搭建一个自己的小程序。

前言:随着微信小程序的迅速发展,用户流量巨大,开发成本低等特点,现在已经成了前端工程师必会的一个技能。

一、后端搭建一个mvc的架构

开发工具
visual Sdudio、SqlServer数据库

(1)首先打开vs点击新建项目,选择ASP.NET MVC3 Web应用程序,我这里用的vs的版本是2010。
(2)点击确认后,得到的就是一个默认的MVC程序架构

(2)创建数据库
打开SQLServer数据库,我们先创建一个数据库,用于存放我们需要展示的数据。
下面的创建数据库的脚本需要分段执行,不要一次性执行,需要先创建数据库,不然会报错。

--创建数据库
CREATE DATABASE Demo;

--选中数据库
USE Demo;

--创建图片表
CREATE TABLE ImagesTable(
	id INT PRIMARY KEY IDENTITY,--图片编号,主键自增
	src NVARCHAR(500)			--图片地址
);
接下来我们在目录下的Models文件夹,这个是放实体类以及数据库实体模型的一个地方。右击选中文件夹,选择添加,选择新建项。左侧菜单选择数据,右侧选择ADO.NET 实体数据模型,选择从数据库生成模型,点击下一步

在这里插入图片描述
点击新建连接,弹出这个界面,在服务器名这个文本框里面输入一个点(.),代表的是本机
在这里插入图片描述
下面选择连接到一个数据库,选择我们刚才创建的数据库Demo,然后点击确定。
在这里插入图片描述
然后继续点击下一步,在这个界面选择表,把我们创建的表结构勾选上,点击完成。
在这里插入图片描述
当这个界面出来的的时候就是已经成功配置好了数据库了。
在这里插入图片描述

二、创建小程序

工具:
1.微信web开发者工具
2.微信小程序账号

我们首先要先去微信公众平台注册一个自己的小程序账号,主体选择个人

https://mp.weixin.qq.com/

注册成功后我们下载一个微信web开发者工具,这个就是我们编写小程序的工具了,开发者工具可以选择稳定版

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

下载好了之后我们打开工具,微信扫码登录
在这里插入图片描述
上方选择新建项目,项目名称我们可以自定义,目录可以选择小程序存放的位置.AppiD可以在我们刚才注册的小程序账号里面去生成复制过来,也可以使用测试号,都选择好了就点击新建。
在这里插入图片描述
创建成功后打开就是这样了,接下来我们先不管小程序,先去后台写一个方法让我们能够访问。
在这里插入图片描述

三、编写小程序Api,操作数据库的数据

让我们回到我们的后端开发工具VS,选择Controllers文件夹,点击添加,点击控制器,新建一个控制器,名字叫Test
在这里插入图片描述
在这里插入图片描述
然后我们再新建一个实体类,用于获取上下文对象。
在这里插入图片描述
然后我们返回到TestController,写一个mvc的简单的查询全部。

        BaseModel<ImagesTable> image = new BaseModel<ImagesTable>();

        public ActionResult getImages() {
            var model = image.GetList(u => true).ToList();
            return Json(model, JsonRequestBehavior.AllowGet);
        }

接下来点击调试,点击开始执行。
在这里插入图片描述
点击后会启动你默认的浏览器,因为我们没有配置任何页面,所以页面上显示的是404,是没有找到的意思。
在这里插入图片描述
浏览器地址栏里面的http://localhost:5311/这一个地址是你本机的地址,并且给你分配了一个端口号,我们在后面输入我们的控制器名称然后斜杆我们写的动作方法。

http://localhost:5311/Test/getImages

可以看到返回了一个空的数组,因为我们数据库的表中并没有数据,只是创建了一张表,并没有往里面添加数据,我们现在去数据库写一条SQL加两条数据,再看一下效果。
在这里插入图片描述
在网上找几张可以通过地址栏访问的图片,然后添加到数据库,下方是SQL语句。

--新增图片数据
INSERT INTO ImagesTable VALUES('http://hbimg.b0.upaiyun.com/364fc2d4edf3a3ba21fcedd66fcbcf86c914eacd7b51-HTtEB7_fw658');
INSERT INTO ImagesTable VALUES('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603180623795&di=ac83a3e29828d5d9923e220f5124ed0f&imgtype=0&src=http%3A%2F%2Fdik.img.kttpdq.com%2Fpic%2F19%2F13039%2F899ded5f7fa5a6fa_1680x1050.jpg');

接下来我们继续在地址栏刷新一下看一下效果,可以看到数据获取到了,现在我们就可以去小程序制作一个简单页面了。
在这里插入图片描述

四、小程序调用后端Api

在这里插入图片描述

我们刚才新建的小程序是这样的,左边呢这个是一个模拟器,中间的是文件目录,pages里面装的是页面,utils文件夹里面是可以存放一些工具,app.js我们先不理会它,app.wxss就是小程序全局的css样式,跟css名字很像也很好理解。

第一步:我们首先要构建出我们的底部菜单,电商小程序大致是[首页、购物车、个人中心]这几个栏目。
在这里插入图片描述
准备一些素材,之所以每张图片都准备两张呢,是因为每个菜单有点击前与点击后的效果,所以我们需要准备两张图片。图片素材大家可以直接在网上下载,下载png格式的。我是在阿里巴巴矢量图标库下载的,贴上地址。

https://www.iconfont.cn/

在这里插入图片描述
在构建底部栏目之前,我们先创建三个页面,分别是首页、购物车、分类页。
在这里插入图片描述
首先选中pages,右键新建文件夹,我们给首页命名index2,因为小程序创建的时候有一个index了,创建好了文件夹之后选中我们创建的文件夹,右键新建page,命名叫index,这样他就会自己生成一个页面的基本架构。在这里插入图片描述
包含js文件,wxml文件就是写html代码的地方,wxss就是写样式的地方,当然你也可以直接写行内样式,
json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
这是创建的第一个,我们还要接着创建两个,一个是购物车页面,一个是个人中心页面。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201020142257673.png#pic_center在这里插入图片描述

现在我们页面都创建好了,然后我们找到app.json文件打开它。
在里面定义我们的底部菜单。

{
  "pages": [
    "pages/index2/index",
    "pages/car/index",
    "pages/center/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#aaaaaa",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "selectedColor": "#F95A5F",
    "list": [
      {
        "pagePath": "pages/index2/index",
        "iconPath": "img/home.png",
        "selectedIconPath": "img/home1.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/car/index",
        "iconPath": "img/goodscar.png",
        "selectedIconPath": "img/goodscar1.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/center/index",
        "iconPath": "img/my.png",
        "selectedIconPath": "img/my1.png",
        "text": "我的"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

tabBar这一部分是我们后面加上去的,里面的color是底部菜单文字的颜色,borderStyle是边框的颜色,backgroundColor是背景色,selectedColor是选中后文字的颜色,然后list里面定义的内容
:pagePath是页面路径,iconPath是图标路径,就是我们下载的素材,selectedIconPath是我们选中后的图标的路径,text就是我们的菜单名称。我们都定义好了后ctrl+s保存一下,页面就会自动刷新,这样我们就能看到一个很简单的底部菜单就出来了。在这里插入图片描述
第二步、查询我们编写的后端api。

我们先定义首页,找到index2,点击js,里面已经默认定义到了很多的函数。不要觉得眼花缭乱,因为我们前期很多都用不到。
在这里插入图片描述
我们首先用到的是onLoad函数,上面的注释写的是监听页面加载,类似于js的窗体加载事件,大家不陌生吧。
我们在onload这个事件里面调用我们后端编写的api,按住ctrl+s保存刷新输出一下结果。
在这里插入图片描述

    wx.request({
      url: 'http://localhost:5311/Test/getImages',
      success:function(res){
        console.log(res);
      }
    });

在这里插入图片描述
可以看到小程序下方的控制台报错了,不要慌,很多童鞋看到爆红就紧张,这是因为我们没有去配置这个域名。

在这里插入图片描述
我们在开发者工具的右上角,点击详情,把这个不校验合法域名的这个选项勾选上。
勾选了之后,页面自动刷新了,然后我们再看一下控制台。
在这里插入图片描述
数据已经输出出来了,这样就已经简单的实现了前台到后台的一个通信,那我们怎么把这个数据放到页面上呈现呢。我们在后台传输过来的是一个数组,那我们在前台的也要定义一个数组接收一下。
在这里插入图片描述
然后我们再把传输过来的数据给装进这个我们定义的数组里面去。
在这里插入图片描述
在上面定义that是用于指向,我们把查询出来的数据给data里面的空数组赋值。
setData函数的作用。
在这里插入图片描述
三、第三步将查询出来的数据渲染到页面上呈现
找到该文件夹下的wxml文件,可以看到已经定义了一个text标签,里面写的文字,在模拟器上也得到了呈现。在后端查询的是图片的数据,所以我们先画一个轮播图。
在这里插入图片描述
wxml代码

<view class='carousel'> 
  <swiper class='carousel_swiper' indicator-dots="true" indicator-color="#f4f4f4" indicator-active-color="#4eb8b8" autoplay="true" interval='2000' circular='true'>
    <block wx:for="{{imgList}}" wx:key="key">
      <swiper-item bindtap='chomeCarouselClick' data-url='{{item.src}}'>
        <image class="carouselImg" src='{{item.src}}' mode='aspectFill' ></image>
      </swiper-item>
    </block>
  </swiper>
 </view>

  <!-- 说明:
  indicator-dots 是否显示指示器
  indicator-color 指示器默认颜色
  indicator-active-color   指示器选中颜色
  autoplay 是否自动播放
  interval 每一页停留的时长
  circular 播放到最后一页后是否再衔接第一页循环播放 -->

wxss代码

.carousel{
  width: 100%;
  background-color: rebeccapurple;
}
.carousel_swiper{
  width: 100%;
  height: 400rpx;
  display: block;
  position: relative;
  background: #f4f4f4;
}
.carouselImg{
  width: 100%;
  height: inherit;
}

效果图在这里插入图片描述
到现在已经成功的将数据库的数据渲染到了我们的小程序界面上,我们先完善一下我们的小程序界面,美化
加上一些快捷入口以及一些推荐的商品信息。
购物车页面以及个人中心也可以通过上文创建数据库表的然后编写后台api的方式逐步实现。贴上一些效果图。

五、效果图展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
小结:由于本人并非专业的前端,对于一些术语的描述不是很准确,介绍的内容也很有限,但是希望能够对大家有所帮助,共同进步。有什么不懂的可以留言哦。

评论 64 您还未登录,请先 登录 后发表或查看评论
为什么需要websocket? 传统的实时交互的游戏,或服务器主动发送消息的行为(如推送服务),如果想做在微信上,可能你会使用轮询的方式进行,不过这太消耗资源,大量的请求也加重了服务器的负担,而且延迟问题比较严重。如果是自己开发的app,为了解决这些问题,很多团队会自建socket,使用tcp长链接、自定协议的方式与服务器进行相对实时的数据交互。有能力的团队,采用这种方式自然没什么大问题。不过团队可能就要花费很多时间去调试,要解决很多难题,这个在成本上就划不来。 H5引入了webSocket来解决网页的长链接问题,而微信小程序也支持websocket。这是一个非常重要的特性,所以本系列的文章会专门拿出一篇来讨论websocket。 webSocket本质上也是TCP连接,它提供全双工的数据传输。一方面可以避免轮询带来的连接频繁建立与断开的性能损耗,另一方面数据可以是比较实时的进行双向传输(因为是长链接),而且WebSocket允许跨域通信(这里有个潜在的跨域安全的问题,得靠服务来解决)。目前除IE外的浏览器已经对webSocket支持得很好了,微信小程序再推一把之,它会变得更加流行。 我们来设计一个新的demo,一个比较有趣的游戏,多人版扫雷,准确地讲,多人版挖黄金。 游戏规则是这样的:把雷换成金子,挖到金子加一分,每人轮流一次(A挖完轮到B,B挖完A才能再点击),点中金子就算你的,也不会炸,游戏继续,直到把场上所有的金子都挖完游戏才结束。跟扫雷一样,数字也是表示周边有几个金子,然用户根据场上已经翻出来的数字来猜哪一格可能有金子。 这种交互的游戏难点在于,用户的点击操作都要传到服务器上,而且服务器要实时的推送到其它玩家的应用上。另外用户自己也要接收对方操作时实时传过来的数据,这样才不至于重复点中同一个格子。简单讲,就是你要上报操作给服务器,而服务器也要实时给你推消息。为了简化整个模型,我们规定玩家必须轮流来点击,玩家A点完,才能轮到玩家B,玩家B操作完,玩家A才能点。 我们分几步来实现这个功能。 一、实现思路 1、第一步,我们要先生成扫雷的地图场景 这个算法比较简单,简述一下。随机取某行某列就可以定位一个格子,标记成金子(-1表示金子)。mimeCnt表示要生成的金子的数量,用同样的方式循环标记mimeCnt个随机格子。生成完,再用一个循环去扫描这些-1的格子,把它周边的格子都加1,当然必须是非金子的格子才加1。代码放在这里。 其中increaseArround用来把这格金子周边的格子都加1,实现也比较简单: 执行genMimeArr(),随机生成结果如下: -1表示金子。看了下貌似没什么问题。接下去,我们就要接入webSocket了。 (这个是js版本的,其实生成地图场景的工作是在台生成,这个js版本只是一个演示,不过算法是一样的。) 2、我们需要一个支持webSocket的服务 本例子中,我们使用python的tornado框架来实现(tornado提供了tornado.websocket模块)。当然读者也可以使用socket.io,专为webSocket设计的js语言的服务,用起来非常简单,它也对不支持webSocket的浏览器提供了兼容(flash或comet实现)。 笔者本人比较喜欢使用tornado,做了几年开发,使用最多的框架之一的就是它,NIO模型,而且非常轻量级,同样的rps,java可能需要700-800M的内存,tornado只要30-40M,所以在一台4G内存的机子上可以跑上百个tornado服务,而java,对不起,只能跑3个虚拟机。微服务的时代,这一点对公司很重要。当然如果读者本人对java比较熟悉的话,也可以选择netty框架尝试一下。 webSocket用tornado的另一个好处是,它可以在同一个服务(口)上同时支持webSocket及http两种协议。tornado的官方demo代码中展示了怎么实现同时使用两种协议。在本游戏中,可以这么用:用户进入首页,用http协议去拉取当前的房间号及数据。因为首页是打开最多的,进了首页的用户不一定会玩游戏。所以首页还没必要建立webSocket链接,webSocket链接主要用来解决频繁请求及推送的操作。首页只有一个请求操作。选了房间号,进去下一个游戏页面再开始建立webSocket链接。 3、客户 使用微信小程序开发工具,直接连接是会报域名安全错误的,因为工具内部做了限制,对安全域名才会允许连接。所以同样的,这里我们也继续改下工具的源码,把相关的行改掉就行修改方式如下: 找到asdebug.js的这一行,把它改成: if(false)即可。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

kitten-iio

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值