最近小程序一公測(cè)，我也來(lái)學(xué)習(xí)了一下，然后玩了個(gè)簡(jiǎn)單的APP。
廢話不多說(shuō)，先上圖

數(shù)據(jù)是來(lái)源于易源數(shù)據(jù)
各自去下載吧，里面有注釋。

這里也說(shuō)一些我這兩天以來(lái)學(xué)習(xí)的感受和踩過(guò)的坑

踩坑：

• 首先是IDE不好用，有很多BUG，比如打開(kāi)項(xiàng)目窗口很小，保存沒(méi)有效果，而且文件顯示有問(wèn)題等的
• 有時(shí)候賦值粘貼的代碼，沒(méi)有效果。解決：把那個(gè)文件最好手動(dòng)再修改一下，然后重啟IDE，有時(shí)候copy不管用，還是手動(dòng)敲一下
• 有時(shí)候CSS文件修改沒(méi)有效果。解決：對(duì)應(yīng)文件手動(dòng)修改然后保存，command+B重新加載。
• 還有，文件的賦值粘貼也有問(wèn)題，實(shí)際上你不可以直接復(fù)制文件，然后在IDE里面直接粘貼。只有先打開(kāi)硬盤，然后賦值粘貼，有時(shí)候你復(fù)制粘貼了之后，沒(méi)有效果。重新修改保存一下文件，重啟IDE

技術(shù)點(diǎn):

• 我是從Android過(guò)來(lái)的，發(fā)現(xiàn)它最大的不同就是，它確實(shí)有點(diǎn)像react，聽(tīng)說(shuō)好想內(nèi)核算法機(jī)制那些用的就是react的。比如頁(yè)面的數(shù)據(jù)來(lái)源，一般是在page的data里面，如果加載好了數(shù)據(jù)，只需要修改page的data里的xxx，對(duì)應(yīng)的頁(yè)面就會(huì)動(dòng)態(tài)響應(yīng)式的修改數(shù)據(jù)。
• 小程序比較方便的地方就是它已經(jīng)被封裝的比較好了，很多操作都包含在了API里面，微信已經(jīng)把自身和小程序一起封裝在了一起，比如什么上傳圖片，調(diào)用相機(jī)，客服消息，通知消息等等
• app類的文件，可以全局使用。比如app.wxss里面的樣式可以全局使用，app.json可以配置整個(gè)app的一些屬性，app.js里面可以寫全局的數(shù)據(jù):globleData，每個(gè)頁(yè)面都可以getApp()獲得app對(duì)象

注意：

• 在實(shí)現(xiàn)上下拉刷新加載，最好是用scroll-view的bindscrolltoupper、bindscrolltolower然后觸發(fā)對(duì)應(yīng)的方法進(jìn)行刷新和加載

• 在實(shí)現(xiàn)請(qǐng)求數(shù)據(jù)的時(shí)候，是寫了一個(gè)方法，這個(gè)方法是在Page{}外面的

  /**
  *page之外的函數(shù)
  page 的data 就是前面的data
  page就是Page的對(duì)象
  */
  var getJokeData = function () {
  console.log("page:" + page.data.pageIndex);
  wx.request({
    url: 'http://route.showapi.com/341-2',
    data: {
      // 這里要填填 page對(duì)象的data里面的page
      "page": page.data.pageIndex,
      "showapi_appid": showapi_appid,
      "showapi_sign": showapi_sign
    },
    method: 'GET',
    success: function (res) {
  
      // success
      wx.hideToast();
      console.log(that.data.list);
      console.log(res.data.showapi_res_body.contentlist);
      //這里可以填page.data.list 也可以that.data.list
      //因?yàn)閠hat就指向page
      var list = page.data.list;
      for (var i = 0; i < res.data.showapi_res_body.contentlist.length; i++) {
        list.push(res.data.showapi_res_body.contentlist[i]);
      }
      console.log(list);
      //但是這里的that不能換成page 至于page和that的關(guān)系
      //因?yàn)楝F(xiàn)在的這個(gè)page對(duì)象 確實(shí)不= that ,that才是真正page對(duì)象的上下文對(duì)象，也就是page對(duì)象本身。 而，我的page只是作為一個(gè)形參傳入，并沒(méi)有初始化  所以page！=that
      that.setData({
        list: list,
        isRefresh: false,
        isLoadMore: false
      })**
  
    },
    fail: function () {
      // fail
    },
    complete: function () {
      // complete
    }
  })
  }

  里面要使用page的data。
  兩種方法：
  1、定義一個(gè)全局that ，在page中去賦值，這樣外部的方法就可以調(diào)用that.setData賦值了（我用的是這種）
  2、把this作為形參傳給外部的方法使用

• 我看到很多demo里面把page對(duì)象定義成一個(gè)對(duì)象提出來(lái)，然后使用其data

var page =
{
xxxx
}
Page(page)

這樣可以使用page.data.xxx的數(shù)據(jù)，但是不可以使用page.setData({
xxx:xxx
})

但是我們可以使用上面的that.data.xxx的數(shù)據(jù)，也要用that.setData({
xxx:xxx
})

原因：現(xiàn)在的這個(gè)page對(duì)象 確實(shí)不= that ,
that才是真正page對(duì)象的上下文對(duì)象，也就是page對(duì)象本身。
而，我的page只是作為一個(gè)形參傳入，并沒(méi)有初始化  所以page！=that

總結(jié)

這兩天學(xué)習(xí)小程序，就開(kāi)發(fā)者而言發(fā)現(xiàn)，它確實(shí)開(kāi)發(fā)起來(lái)比較簡(jiǎn)單，而且很多東西依賴微信，而微信又封裝了，所以調(diào)用API就能解決很多問(wèn)題。但是，有一些個(gè)性化定制的問(wèn)題現(xiàn)在有很多坑，因?yàn)槲⑿判〕绦蛴幸恍┫拗拼嬖冢翰荒艹^(guò)5M，搜索沒(méi)有關(guān)鍵字，每個(gè)賬號(hào)只能發(fā)布1個(gè)，發(fā)布還要300塊，使得我們做的東西都不能隨意發(fā)布展示。。。

對(duì)比Android而言：
確實(shí)，這種程序只能叫做 小程序，拿來(lái)玩一玩，因?yàn)樗荒軐?shí)現(xiàn)一些很簡(jiǎn)單的展示型功能，在交互上面有很大的限制，并且它的5M比65535可難受多了。性能上面，我覺(jué)得跟webApp差不多，但是webApp由于發(fā)展了這么久，肯定比它的優(yōu)勢(shì)還大得多。但是跟原生比，性能上面還是差得太遠(yuǎn)

對(duì)于運(yùn)營(yíng)推廣而言：
小程序確實(shí)在張小龍的N個(gè)不下面難以發(fā)揮我們所期盼它發(fā)揮的作用（賺取第一桶金的熱頭），但是張小龍的戰(zhàn)略機(jī)會(huì)，未來(lái)的微信的生態(tài)圈趨勢(shì)發(fā)展如何，我們還沒(méi)有太多的看法，只有順應(yīng)局勢(shì)，等待機(jī)會(huì)啦。

github地址：https://github.com/fly7632785/Weixin-joke-demo

源碼下載：Weixin-joke-demo-master.zip