必威体育Betway必威体育官网
当前位置:首页 > IT技术

微信开发者工具+ Visual Studio 2017开发微信小程序Demo

时间:2019-08-05 09:42:15来源:IT技术作者:seo实验室小编阅读:70次「手机版」
 

微信小程序开发工具

目录

Demo最终效果

开发工具

开发步骤:

第一步:准备工作,用visual studio写后台数据

第二步:映射外网、路由(TP-LINK)端口,配置IIS发布项目

第三步:程序访问、调用VS的传过来的JSON字符串,展示数据


刚自己做了一个开发微信小程序的Demo,怕忘了,记录下来。希望以后会跳过那些大坑~~

Demo最终效果

开发工具:

(一)微信开发者工具:数据展示,本案例接收的是VS传过来的JSON数据

(二)vs2017:写后台数据

(三)VS开发模式:MVC

开发步骤:

一、准备工作,用visual studio写后台数据

二、配置IIS发布项目,映射外网、路由(TP-LINK)端口,发布网站

三、小程序访问、调用VS的传过来的JSON字符串,展示数据

---------------------------------------------------------------------------------------------------------------------------------

第一步:准备工作,用visual studio写后台数据

建立MVC项目具体步骤,可以百度到很多资料。例如:https://jingyan.baidu.com/article/a3aad71a160b4ab1fb0096e1.html

1、首先用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; }  //标题
    }

2、写一个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(" ", ""));  
       }  
   }  

3、还需要写一个专门返回的类型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
    }

4、在控制器中写一个方法,转换为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、映射外网端口:

(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

//获取应用实例
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,                
            });
          }          
      });
  }
})

3、<!--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>

4、/**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%;
}

相关阅读

懂球帝APP与小程序产品体验报告

懂球帝是一款提供全球体育足球新闻、深度报道、足球社区的手机APP,基本上可以满足球迷在手机上关于足球的一切需求。本文是关于懂

网警怎么通过微信抓人?他们能看到聊天记录吗?

网警怎么通过微信抓人。曾经很长一段时间,都有人认为,网络就是一个法外之地,自己可以通过网络,做一些平日里不敢做的事,不敢说的话,反正

深度解读 | 从微信红包图片事件,看你现在处在什么产品

昨天下午(2016.1.27)的红包图片事件一出,立马成为微博微信的热点事件,今日微博更是热评“雾霾吹到了朋友圈”、“以后要穷得连朋友圈

HIT 2018 CS:APP程序人生-Hello’s P2P

** HIT 2018 CS:APP程序人生-Hello’s P2P**

千万不要嫁给程序猿,我是认真的

点击上方“程序

分享到:

栏目导航

推荐阅读

热门阅读