微信开发者工具+ Visual Studio 2017开发微信小程序Demo
目录javascript
Demo最终效果css
开发工具：html
开发步骤：java
第一步：准备工做，用visual studio写后台数据ajax
第二步：映射外网、路由（TP-LINK）端口，配置IIS发布项目编程
第三步：小程序访问、调用VS的传过来的JSON字符串，展现数据json
刚本身作了一个开发微信小程序的Demo，怕忘了，记录下来。但愿之后会跳过那些大坑~~小程序
Demo最终效果
开发工具：
（一）微信开发者工具：数据展现，本案例接收的是VS传过来的JSON数据微信小程序
（二）VS2017：写后台数据安全
（三）VS开发模式：MVC
开发步骤：
1、准备工做，用visual studio写后台数据
2、配置IIS发布项目，映射外网、路由（TP-LINK）端口，发布网站
3、小程序访问、调用VS的传过来的JSON字符串，展现数据
---------------------------------------------------------------------------------------------------------------------------------
第一步：准备工做，用visual studio写后台数据
创建MVC项目具体步骤，能够百度到不少资料。例如：https://jingyan.baidu.com/article/a3aad71a160b4ab1fb0096e1.html
一、首先用vs2017创建一个基本的mvc模板，包括model、Controllers和view，可是今天咱们的项目和view不要紧，是能够删除的。简单的测试数据，如写一个Progream类：
public class Progream
{
public string img { get; set; } //图片
public string shortDesc { get; set; } //描述
public string title { get; set; } //标题
}
二、写一个json类：用于把控制器中的值变为json格式：代码以下 ，不想封装方法，也能够添加json包，可参考https://blog.csdn.net/u011720560/article/details/80402357
public static class Json
{
public static object ToJson(this string Json)
{
return Json == null ? null : JsonConvert.DeserializeObject(Json);
}
public static string ToJson(this object obj)
{
var timeConverter = new IsoDateTimeConverter { DateTimeFormat = "yyyy-MM-dd HH:mm:ss" };
return JsonConvert.SerializeObject(obj, timeConverter);
}
public static string ToJson(this object obj, string datetimeformats)
{
var timeConverter = new IsoDateTimeConverter { DateTimeFormat = datetimeformats };
return JsonConvert.SerializeObject(obj, timeConverter);
}
public static T ToObject<T>(this string Json)
{
return Json == null ? default(T) : JsonConvert.DeserializeObject<T>(Json);
}
public static List<T> ToList<T>(this string Json)
{
return Json == null ? null : JsonConvert.DeserializeObject<List<T>>(Json);
}
public static DataTable ToTable(this string Json)
{
return Json == null ? null : JsonConvert.DeserializeObject<DataTable>(Json);
}
public static JObject ToJObject(this string Json)
{
return Json == null ? JObject.Parse("{}") : JObject.Parse(Json.Replace(" ", ""));
}
}
三、还须要写一个专门返回的类型AjaxResult类型和枚举，代码以下：
public class AjaxResult
{
/// <summary>
/// 操做结果类型
/// </summary>
public object state { get; set; }
/// <summary>
/// 获取 消息内容
/// </summary>
public string message { get; set; }
/// <summary>
/// 获取 返回数据
/// </summary>
public object data { get; set; }
}
/// <summary>
/// 表示 ajax 操做结果类型的枚举
/// </summary>
public enum ResultType
{
/// <summary>
/// 消息结果类型
/// </summary>
info = 0,
/// <summary>
/// 成功结果类型
/// </summary>
success = 1,
/// <summary>
/// 警告结果类型
/// </summary>
warning = 2,
/// <summary>
/// 异常结果类型
/// </summary>
error = 3
}
四、在控制器中写一个方法，转换为json数据：
//设置初始值
List<Progream> proList = new List<Progream>();
private void SetPro()
{
proList.Add(new Progream { img= "http://外网地址号:外网端口号/img/team.png", shortDesc = "java是世界上用的最多的编程语言", title = "精英贷" });
proList.Add(new Progream { img= "http://外网地址号:外网端口号/img/01.png", shortDesc = "java是世界上用的最多的编程语言", title = "月供贷" });
proList.Add(new Progream { img= "http://外网地址号:外网端口号/img/02.png", shortDesc = "java是世界上用的最多的编程语言", title = "保单贷" });
}
public ActionResult getProgream01()
{
SetPro();
//获取数据
return Content(new AjaxResult { state = ResultType.success.ToString(), message = "true", data = proList }.ToJson());
}
}
---------------------------------------------------------------------------------------------------------------------------------
第二步：映射外网、路由（TP-LINK）端口，配置IIS发布项目
一、映射外网端口：
（1）登陆TP-LINK，在“已安装应用”里找到以下截图，并对应配置
二、配置IIS发布项目：
（1）确认安装了IIS：配置IIS首要肯定本机电脑上已安装了IIS，没有能够百度找到不少方法安装
（2）配置IIS：
在“网站图标上”右键添加网站
小提示：
（1）、添加网站的物理路径为新建文件夹，要与“开发项目”的文件夹名有所区别，本案例新建了一个“网站名”为WebApplication1 ，“物理路径”新建文件夹名为：IIS_WebApplication1，“开发项目”文件夹名为：WebApplication1，“物理路径”与“开发项目”文件夹在同一路径下。
（2）、添加完网站记得“网站”与“应用程序池”图标上再右键刷新一下，此时为一个空网站
（3）打开“应用程序池”，会看到系统本身分配给WebApplication1项目的应用程序池，
三、发布网站
接下来选择“建立配置文件”按钮，最后确认发布
基本上发布的时候不会出现什么错误，就会出现下面的画面，就证实发布成功了。
四、容易遇到的问题：随后咱们运行网站，可能会遇到各类问题。例如：
到遇到这个问题的时候多是权限不足。
咱们须要打开发布项目的这个文件夹单击右键选择属性。
而后选择安全，如图。
若是发现组或用户名 中没有IUSR和IIS_IUSRS 这就是问题所在，
点击编辑出来一弹窗是该文件夹的权限，而后点击添加，弹出弹窗为选择用户或组。
这时候输入对象名称来选择，若是你不知道或者记不住 能够选择高级，弹出一弹窗名称也为选择用户或组，
右边有一个当即查找。搜索结果里面有东西了。
选择里面的IUSR和IIS_IUSRS点击肯定。而后再次点击肯定。
给IUSER和IIS_IUSRS修改的权限，点击应用之后点击肯定。
这时文件夹的属性多了IUSR和IIS_IUSRS,
如图
这时咱们再运行便可。
五、把这个数据发布到iis中，直接访问/Home/getProgream，能够看到如图所示的数据：
---------------------------------------------------------------------------------------------------------------------------------
第三步：小程序访问、调用VS的传过来的JSON字符串，展现数据
上代码：主要是index.js里的数据绑定
一、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
}
二、index.js
//获取应用实例
const app = 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(){
var self=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,
});
}
});
}
})
三、<!--index.wxml-->
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-dots="true">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
<view class='items-list'><!--列表-->
<view class='pro-item' wx:for="{{proList}}" bindtap='toDetail' data-index="{{index}}"><!--产品详情-->
<image class='pro-logo' src="{{item.img}}"></image><!--产品图片-->
<view class='pro-body'><!--产品内容-->
<view class='pro-title'>{{item.title}}</view><!--标题-->
<text class='pro-desc'>{{item.shortDesc}}</text><!--描述-->
<view class='pro-footer'><!--描述下的2个按钮-->
<image class='btn-detail' src='/images/detail.png'></image>
<button open-type="contact" class='btn-ask' ><image src='/images/service.png' /></button>
</view>
</view>
</view>
</view>
四、/**index.wxss**/
swiper{
width: 100%;
height: 340rpx;
}
swiper image{
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-ask image{
width: 100%;
height: 100%;
}