微信小程序实战：搞笑动图app

最近小程序一公测，我也来学习了一下，然后玩了个简单的APP。
废话不多说，先上图

数据是来源于易源数据
各自去下载吧，里面有注释。

这里也说一些我这两天以来学习的感受和踩过的坑

踩坑：

• 首先是IDE不好用，有很多BUG，比如打开项目窗口很小，保存没有效果，而且文件显示有问题等的
• 有时候赋值粘贴的代码，没有效果。解决：把那个文件最好手动再修改一下，然后重启IDE，有时候copy不管用，还是手动敲一下
• 有时候CSS文件修改没有效果。解决：对应文件手动修改然后保存，command+B重新加载。
• 还有，文件的赋值粘贴也有问题，实际上你不可以直接复制文件，然后在IDE里面直接粘贴。只有先打开硬盘，然后赋值粘贴，有时候你复制粘贴了之后，没有效果。重新修改保存一下文件，重启IDE

技术点:

• 我是从Android过来的，发现它最大的不同就是，它确实有点像react，听说好想内核算法机制那些用的就是react的。比如页面的数据来源，一般是在page的data里面，如果加载好了数据，只需要修改page的data里的xxx，对应的页面就会动态响应式的修改数据。
• 小程序比较方便的地方就是它已经被封装的比较好了，很多操作都包含在了API里面，微信已经把自身和小程序一起封装在了一起，比如什么上传图片，调用相机，客服消息，通知消息等等
• app类的文件，可以全局使用。比如app.wxss里面的样式可以全局使用，app.json可以配置整个app的一些属性，app.js里面可以写全局的数据:globleData，每个页面都可以getApp()获得app对象

注意：

• 在实现上下拉刷新加载，最好是用scroll-view的bindscrolltoupper、bindscrolltolower然后触发对应的方法进行刷新和加载

• 在实现请求数据的时候，是写了一个方法，这个方法是在Page{}外面的

  /**
  *page之外的函数
  page 的data 就是前面的data
  page就是Page的对象
  */
  var getJokeData = function () {
  console.log("page:" + page.data.pageIndex);
  wx.request({
    url: 'http://route.showapi.com/341-2',
    data: {
      // 这里要填填 page对象的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
      //因为that就指向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的关系
      //因为现在的这个page对象 确实不= that ,that才是真正page对象的上下文对象，也就是page对象本身。 而，我的page只是作为一个形参传入，并没有初始化  所以page！=that
      that.setData({
        list: list,
        isRefresh: false,
        isLoadMore: false
      })**
  
    },
    fail: function () {
      // fail
    },
    complete: function () {
      // complete
    }
  })
  }

  里面要使用page的data。
  两种方法：
  1、定义一个全局that ，在page中去赋值，这样外部的方法就可以调用that.setData赋值了（我用的是这种）
  2、把this作为形参传给外部的方法使用

• 我看到很多demo里面把page对象定义成一个对象提出来，然后使用其data

var page =
{
xxxx
}
Page(page)

这样可以使用page.data.xxx的数据，但是不可以使用page.setData({
xxx:xxx
})

但是我们可以使用上面的that.data.xxx的数据，也要用that.setData({
xxx:xxx
})

原因：现在的这个page对象 确实不= that ,
that才是真正page对象的上下文对象，也就是page对象本身。
而，我的page只是作为一个形参传入，并没有初始化  所以page！=that

总结

这两天学习小程序，就开发者而言发现，它确实开发起来比较简单，而且很多东西依赖微信，而微信又封装了，所以调用API就能解决很多问题。但是，有一些个性化定制的问题现在有很多坑，因为微信小程序有一些限制存在：不能超过5M，搜索没有关键字，每个账号只能发布1个，发布还要300块，使得我们做的东西都不能随意发布展示。。。

对比Android而言：
确实，这种程序只能叫做 小程序，拿来玩一玩，因为它只能实现一些很简单的展示型功能，在交互上面有很大的限制，并且它的5M比65535可难受多了。性能上面，我觉得跟webApp差不多，但是webApp由于发展了这么久，肯定比它的优势还大得多。但是跟原生比，性能上面还是差得太远

对于运营推广而言：
小程序确实在张小龙的N个不下面难以发挥我们所期盼它发挥的作用（赚取第一桶金的热头），但是张小龙的战略机会，未来的微信的生态圈趋势发展如何，我们还没有太多的看法，只有顺应局势，等待机会啦。

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

源码下载：Weixin-joke-demo-master.zip