小程序1月9正式發(fā)布了，我手機(jī)朋友圈被各種關(guān)于小程序的消息霸屏了。說實(shí)話我也不知道小程序以后會(huì)是怎么樣，不過出于好奇，恰巧今天有時(shí)間去簡單了的把公司的項(xiàng)目用小程序簡單實(shí)現(xiàn)了，只是實(shí)現(xiàn)了列表，就當(dāng)試試水。

參考
小程序簡易教程

先來張效果圖

yj_demo.gif

不得不說實(shí)現(xiàn)起來還是非常方便的

實(shí)現(xiàn)

簡單說明：小程序中app.js 和app.json是必須要的，在app.js中處理程序的生命周期相關(guān)，app.jaon 頁面配置。頁面也是有.wxml、.json 為必須有.wxss相當(dāng)于h5中.css，在.js中處理頁面交互邏輯和數(shù)據(jù)更新
1、我們首先搭建簡單的tab框架，在app.jason中實(shí)現(xiàn)
首先設(shè)置頁面的路徑，我們有三個(gè)頁面首頁、視頻、我的

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

然后是對(duì)tabBar的設(shè)置

"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

然后就是各個(gè)頁面的實(shí)現(xiàn)的，先看下基本的結(jié)構(gòu)圖

simple.png

推薦，文件命名和文件夾命名保持一致。

2、首頁新聞列表的實(shí)現(xiàn)
首先要獲取到新聞數(shù)據(jù)，然后把數(shù)據(jù)展示出來。
問題1：怎么發(fā)網(wǎng)絡(luò)請(qǐng)求？
使用微信的API，他都封裝好了，返回都是解析好的數(shù)據(jù)，直接就能用非常方便。

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: {}, // 設(shè)置請(qǐng)求的 header
  success: function(res){
    // success
   
    console.log(res.data)
    if (isLoadMore) {
        

        _this.setData({
      newsList : _this.data.newsList.concat(res.data.data),
      
    })
        console.log("這是上拉加載更多的調(diào)用")

    }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即請(qǐng)求的url
b、data中請(qǐng)求需要拼接的一些參數(shù)
c、method是請(qǐng)求的方法GET、POST等
d、success 請(qǐng)求成功回調(diào)
e、fail 請(qǐng)求失敗回調(diào)
f、complete請(qǐng)求完成回調(diào)

這里我開始寫的時(shí)候遇到一個(gè)坑，就是this在網(wǎng)絡(luò)請(qǐng)求成功回調(diào)中直接使用，data也不能直接賦值要用setData方法。

后面就是列表的實(shí)現(xiàn)，小程序的<block>標(biāo)簽實(shí)現(xiàn)和iOS中的tabview類似，這里就不貼代碼了。實(shí)現(xiàn)起來也是比較簡單。

作為一個(gè)開發(fā)者，我想說說我對(duì)小程序的看法，我們用安卓手機(jī)分析它的實(shí)現(xiàn)其實(shí)是個(gè)webview，然后微信對(duì)html5進(jìn)行了一些他們封裝，盡管也可以調(diào)用相冊(cè)相機(jī)錄音等功能，但時(shí)間最多為60s.不過微信也提供很多Api，封裝了一些常用的組件，讓開發(fā)更加簡單和快捷。還有可能微信也做了些優(yōu)化，是它體驗(yàn)比html5要好。所以它和原生的體驗(yàn)還是差距還是有的，個(gè)人覺得大家都這么熱捧小程序主要是看重微信的巨大流量。可以問題來了，每次我要用個(gè)服務(wù)我都要打開微信，掃一掃或者搜索，本來我可以一步完成的操作完成硬是要我兩步操作，這里面是有很多時(shí)間成本的。我反正暫時(shí)不習(xí)慣，除非小程序真的滲透到生活的各個(gè)角落，那可能會(huì)是另外一說。
似乎扯多了，還是打卡下班，祝大家周末愉快??！