小程序简单上手----新闻列表和视频列表的简单实现 - 草稿

小程序1月9正式发布了，我手机朋友圈被各种关于小程序的消息霸屏了。说实话我也不知道小程序以后会是怎么样，不过出于好奇，恰巧今天有时间去简单了的把公司的项目用小程序简单实现了，只是实现了列表，就当试试水。

参考
小程序简易教程

先来张效果图

yj_demo.gif

不得不说实现起来还是非常方便的

实现

简单说明：小程序中app.js 和app.json是必须要的，在app.js中处理程序的生命周期相关，app.jaon 页面配置。页面也是有.wxml、.json 为必须有.wxss相当于h5中.css，在.js中处理页面交互逻辑和数据更新
1、我们首先搭建简单的tab框架，在app.jason中实现
首先设置页面的路径，我们有三个页面首页、视频、我的

 "pages": [
"pages/home/home",
"pages/video/video",
"pages/mine/mine"
],

然后是对tabBar的设置

"tabBar": {
"list": [{
  "pagePath": "pages/home/home",
  "text": "首页",
  "iconPath": "images/home .png",
  "selectedIconPath": "images/reload.png"
  
},{
  "pagePath": "pages/video/video",
  "text": "视频",
  "iconPath": "images/playn.png",
  "selectedIconPath": "images/home_play.png"

},{

  "pagePath": "pages/mine/mine",
  "text" : "我的",
   "iconPath": "images/mine.png",
  "selectedIconPath": "images/selectedMine.png"
}],
"selectedColor": "#AF262A",
"borderStyle": "white"
}

tabBar属性的介绍

tab_des.png

list中属性的介绍

list_des.png

然后就是各个页面的实现的，先看下基本的结构图

simple.png

推荐，文件命名和文件夹命名保持一致。

2、首页新闻列表的实现
首先要获取到新闻数据，然后把数据展示出来。
问题1：怎么发网络请求？
使用微信的API，他都封装好了，返回都是解析好的数据，直接就能用非常方便。

loadOriginData:function(isLoadMore){
   var _this = this;

   _this.setData({

     hiddenLoading:false
   })

wx.request({
  url: 'http://api.myxianwen.cn/1/news/getlist',
  data: {
    "app_id":"104",
    "equip_type":"1",
    "num":"10",
    "start":"0",
    "t_login":"0",
    "timestamp":"0",
    "type_id":"0",
    "uid":"60",
    "updown":"0",
    "uuid":"6E00C8BD-50D3-4672-8641-D45B3081E3B4",
    "version":"3.7.0"
  },
  method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  // header: {}, // 设置请求的 header
  success: function(res){
    // success
   
    console.log(res.data)
    if (isLoadMore) {
        

        _this.setData({
      newsList : _this.data.newsList.concat(res.data.data),
      
    })
        console.log("这是上拉加载更多的调用")

    }else {

           _this.setData({
  newsList : res.data.data,

  
})
            
           
    }

  },
  fail: function() {
    // fail
   _this.setData({

     hiddenLoading:false
   })
     wx.stopPullDownRefresh()
  },
  complete: function() {
    // complete
    console.log("掉用完成了")

_this.setData({

     hiddenLoading:true
   })
     wx.stopPullDownRefresh()
  }
})

}

简单说明：a、url即请求的url
b、data中请求需要拼接的一些参数
c、method是请求的方法GET、POST等
d、success 请求成功回调
e、fail 请求失败回调
f、complete请求完成回调

这里我开始写的时候遇到一个坑，就是this在网络请求成功回调中直接使用，data也不能直接赋值要用setData方法。

后面就是列表的实现，小程序的<block>标签实现和iOS中的tabview类似，这里就不贴代码了。实现起来也是比较简单。

作为一个开发者，我想说说我对小程序的看法，我们用安卓手机分析它的实现其实是个webview，然后微信对html5进行了一些他们封装，尽管也可以调用相册相机录音等功能，但时间最多为60s.不过微信也提供很多Api，封装了一些常用的组件，让开发更加简单和快捷。还有可能微信也做了些优化，是它体验比html5要好。所以它和原生的体验还是差距还是有的，个人觉得大家都这么热捧小程序主要是看重微信的巨大流量。可以问题来了，每次我要用个服务我都要打开微信，扫一扫或者搜索，本来我可以一步完成的操作完成硬是要我两步操作，这里面是有很多时间成本的。我反正暂时不习惯，除非小程序真的渗透到生活的各个角落，那可能会是另外一说。
似乎扯多了，还是打卡下班，祝大家周末愉快！！