微信小程序-搞笑动图app

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

<img src="http://upload-images.jianshu.io/upload_images/1311457-52595180d53b4701.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/340" width="30%"/>

<img src="http://upload-images.jianshu.io/upload_images/1311457-a12647866a1172b9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/340" width="30%"/>

<img src="http://upload-images.jianshu.io/upload_images/1311457-e75926df78ca62c5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/340" width="30%"/>


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

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

踩坑:
  • 首先是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就能解决很多问题。但是,有一些个性化定制的问题现在有很多坑,因为微信小程序有一些限制存在:不能超过1M,搜索没有关键字,每个账号只能发布5个,发布还要300块,使得我们做的东西都不能随意发布展示。。。

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容