刚自己做了一个开发微信小程序的Demo，怕忘了，记录下来。希望以后会跳过那些大坑~~
Demo最终效果
开发工具：（一）微信开发者工具：数据展示，本案例接收的是VS传过来的JSON数据
（二）VS2017：写后台数据
（三）VS开发模式：MVC
开发步骤：一、准备工作，用visualstudio写后台数据
二、配置IIS发布项目，映射外网、路由（TP-LINK）端口，发布网站
三、小程序访问、调用VS的传过来的JSON字符串，展示数据
---------------------------------------------------------------------------------------------------------------------------------
第一步：准备工作，用visualstudio写后台数据建立MVC项目具体步骤，可以百度到很多资料。例如：
1、首先用vs2017建立一个基本的mvc模板，包括model、Controllers和view，但是今天我们的项目和view没关系，是可以删除的。简单的测试数据，如写一个Progream类：
publicclassProgream{publicstringimg{get;set;}//图片publicstringshortDesc{get;set;}//描述publicstringtitle{get;set;}//标题}2、写一个json类：用于把控制器中的值变为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("",""));}}3、还需要写一个专门返回的类型AjaxResult类型和枚举，代码如下：
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}4、在控制器中写一个方法，转换为json数据：
//设置初始值ListProgreamproList=newListProgream();privatevoidSetPro(){proList.Add(newProgream{img="http://外网地址号:外网端口号/img/team.png",shortDesc="java是世界上用的最多的编程语言",title="精英贷"});proList.Add(newProgream{img="http://外网地址号:外网端口号/img/01.png",shortDesc="java是世界上用的最多的编程语言",title="月供贷"});proList.Add(newProgream{img="http://外网地址号:外网端口号/img/02.png",shortDesc="java是世界上用的最多的编程语言",title="保单贷"});}publicActionResultgetProgream01(){SetPro();//获取数据returnContent(newAjaxResult{state=ResultType.success.ToString(),message="true",data=proList}.ToJson());}}
---------------------------------------------------------------------------------------------------------------------------------
第二步：映射外网、路由（TP-LINK）端口，配置IIS发布项目1、映射外网端口：
（1）登录TP-LINK，在“已安装应用”里找到如下截图，并对应配置
2、配置IIS发布项目：
（1）确认安装了IIS：配置IIS首要确定本机电脑上已安装了IIS，没有可以百度找到很多方法安装
（2）配置IIS：
在“网站图标上”右键添加网站
小提示：
（1）、添加网站的物理路径为新建文件夹，要与“开发项目”的文件夹名有所区别，本案例新建了一个“网站名”为WebApplication1，“物理路径”新建文件夹名为：IIS_WebApplication1，“开发项目”文件夹名为：WebApplication1，“物理路径”与“开发项目”文件夹在同一路径下。
（2）、添加完网站记得“网站”与“应用程序池”图标上再右键刷新一下，此时为一个空网站
（3）打开“应用程序池”，会看到系统自己分配给WebApplication1项目的应用程序池，
3、发布网站
接下来选择“创建配置文件”按钮，最后确认发布
基本上发布的时候不会出现什么错误，就会出现下面的画面，就证明发布成功了。
4、容易遇到的问题：随后我们运行网站，可能会遇到各种问题。例如：
到遇到这个问题的时候可能是权限不足。
我们需要打开发布项目的这个文件夹单击右键选择属性。
然后选择安全，如图。
如果发现组或用户名中没有IUSR和IIS_IUSRS这就是问题所在，
点击编辑出来一弹窗是该文件夹的权限，然后点击添加，弹出弹窗为选择用户或组。
这时候输入对象名称来选择，如果你不知道或者记不住可以选择高级，弹出一弹窗名称也为选择用户或组，
右边有一个立即查找。搜索结果里面有东西了。
选择里面的IUSR和IIS_IUSRS点击确定。然后再次点击确定。
给IUSER和IIS_IUSRS修改的权限，点击应用以后点击确定。
这时文件夹的属性多了IUSR和IIS_IUSRS,
如图
这时我们再运行即可。
5、把这个数据发布到iis中，直接访问/Home/getProgream，可以看到如图所示的数据：
---------------------------------------------------------------------------------------------------------------------------------
第三步：小程序访问、调用VS的传过来的JSON字符串，展示数据上代码：主要是index.js里的数据绑定
1、app.json
{"pages":["pages/index/index","pages/join/join"],"window":{"color":"#fff","backgroundTextStyle":"drak","navigationBarBackgroundColor":"#2e5e86","navigationBarTitleText":"信贷DEMO","navigationBarTextStyle":"#fff","enablePullDownRefresh":true},"tabBar":{"color":"#dcdddd","selectedColor":"#000000","list":[{"pagePath":"pages/index/index","text":"首页","iconPath":"images/01.png","selectedIconPath":"images/01.png"},{"pagePath":"pages/join/join","text":"加入","iconPath":"images/02.png","selectedIconPath":"images/02.png"},{"pagePath":"pages/Employee/Employee","text":"员工","iconPath":"images/03.png","selectedIconPath":"images/03.png"}]},"debug":true}2、index.js
//获取应用实例constapp=getApp()Page({data:{imgUrls:['/images/07.jpg','/images/06.jpg','/images/08.jpg'],indicatorDots:false,autoplay:false,interval:5000,duration:1000,proList:null},//页面加载onLoad:function(option){console.log("1111111");},onShow:function(){this.getProList();},//数据绑定getProList:function(){varself=this;wx.request({url:'http://外网地址号:外网端口号/Home/getProgream01',method:"GET",header:{'content-type':'application/json'//默认值},success:function(res){console.log(res);self.setData({proList:res.data.data,});}});}})3、!--index.wxml--
swiperindicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}"interval="{{interval}}"duration="{{duration}}"indicator-dots="true"blockwx:for="{{imgUrls}}"swiper-itemimagesrc="{{item}}"//swiper-item/block/swiperviewclass='items-list'!--列表--viewclass='pro-item'wx:for="{{proList}}"bindtap='toDetail'data-index="{{index}}"!--产品详情--imageclass='pro-logo'src="{{item.img}}"/image!--产品图片--viewclass='pro-body'!--产品内容--viewclass='pro-title'{{item.title}}/view!--标题--textclass='pro-desc'{{item.shortDesc}}/text!--描述--viewclass='pro-footer'!--描述下的2个按钮--imageclass='btn-detail'src='/images/detail.png'/imagebuttonopen-type="contact"class='btn-ask'imagesrc='/images/service.png'//button/view/view/view/view4、/index.wxss/
swiper{width:100%;height:340rpx;}swiperimage{display:block;width:100%;height:100%;}/items-list/.items-list{}.pro-item{overflow:hidden;padding:30rpx;float:left;}.pro-logo{float:left;width:240rpx;height:240rpx;}.pro-body{margin-left:260rpx;}.pro-title{color:#212121;font-size:34rpx;line-height:1;}.pro-desc{font-size:26rpx;color:#898989;line-height:1;}.pro-footer{overflow:hidden;}.btn-detail{float:left;width:170rpx;height:52rpx;padding:10rpx;}.btn-ask{float:left;width:170rpx;height:52rpx;margin-left:20rpx;line-height:1;padding:0;}.btn-askimage{width:100%;height:100%;}
