1.今天刚刚看完了一下微信小程序文档，觉得很有意思，于是自己就写了一个小程序，首先说明我是做.net的，今天所有的数据都是用VS写的数据，iis作为服务器进行简单数据传输，先看一下效果图片：

2.可以看到这个小程序界面也很简单，顶部是类似js的一个动画图片轮播，下面是列表，底部是导航菜单，接下来我们就一步步完成一下这个

3.1.准备工作，用visualstudio写后台数据

4.首先用vs2013建立一个基本的mvc模板，包括model、Controllers和view，但是今天我们的项目和view没关系，是可以删除的，首先写一个json类，用于把控制器中的值变为json格式：代码如下

publicstaticclassJson{publicstaticobjectToJson(thisstringJson){returnJson==null?null:JsonConvert.DeserializeObject(Json);}publicstaticstringToJson(thisobjectobj){vartimeConverter=newIsoDateTimeConverter{DateTimeFormat="yyyy-MM-ddHH:mm:ss"};returnJsonConvert.SerializeObject(obj,timeConverter);}publicstaticstringToJson(thisobjectobj,stringdatetimeformats){vartimeConverter=newIsoDateTimeConverter{DateTimeFormat=datetimeformats};returnJsonConvert.SerializeObject(obj,timeConverter);}publicstaticTToObjectT(thisstringJson){returnJson==null?default(T):JsonConvert.DeserializeObjectT(Json);}publicstaticListTToListT(thisstringJson){returnJson==null?null:JsonConvert.DeserializeObjectListT(Json);}publicstaticDataTableToTable(thisstringJson){returnJson==null?null:JsonConvert.DeserializeObjectDataTable(Json);}publicstaticJObjectToJObject(thisstringJson){returnJson==null?JObject.Parse("{}"):JObject.Parse(Json.Replace("",""));}}

5.还需要写一个专门返回的类型AjaxResult类型和枚举，代码如下

6.publicclassAjaxResult{///summary///操作结果类型////summarypublicobjectstate{get;set;}///summary///获取消息内容////summarypublicstringmessage{get;set;}///summary///获取返回数据////summarypublicobjectdata{get;set;}}///summary///表示ajax操作结果类型的枚举////summarypublicenumResultType{///summary///消息结果类型////summaryinfo=0,///summary///成功结果类型////summarysuccess=1,///summary///警告结果类型////summarywarning=2,///summary///异常结果类型////summaryerror=3}

7.接下来在Controllers中写上简单的测试数据，如图所示写一个Progream类

8.在控制器中写一个一个方法，转换为json数据，如图

9.把这个数据发布到iis中，直接访问/Home/getProgream，可以看到如图所示的数据

10.可以看到这个里面Images这个数据中用的是http://localhost:88这个端口的数据，这个是我提前发布在iis中的的项目的图片，如图随便访问一张图片都可以打开对应的图片数据

11.把这个分为三部分，wxml代码如下

12.!--pages/board/board.wxml--viewclass="container"viewclass="slide"!--动画轮播swiperindicator-dots是否显示轮播点，默认falseautoplay是否自动轮播interval间隔时间duration轮播一次多长时间--swiperindicator-dots="true"autoplay="true"interval="2000"duration="1000"blockwx:for="{{imgUrls}}"swiper-itemimagemode="aspectFill"src="{{item.Images}}"class="slide-image"/>