微信小程序系列「一」

2016年9月21日,在前端届的确是一个值得纪念的日子。这天,微信放出杀手锏,WeChatApp 又称微信小程序。但是就目前来看,有诸多不便,但是这个事情,依然有很大的意义。因为这是一个生态。从放出来这个消息,就开始关注。加上公司也有内测资格,所以准备写一些文章来聊聊weChatApp开发的一些情况,以及踩到的坑。

首先提到的便是1M的大小限制🚫,其实这个看到1M的大小,觉得没什么,但是作为一个大的公司,那么多业务,总共就1M,那么就比较可怜了。算起来我们BU获得的大小容量就100Kb,100Kb是什么概念,纯代码大概只有3000行左右的代码。但是我们之前的代码压缩之后也有235kb呢。反正容量是一个限制。
其次:很多官方推荐的API也是不能用的。比如ES6,虽然后来开发工具支持了ES6,但是一些android 机是不支持ES6的,也是呵呵哒。还有官方推荐flex布局,但是在iOS 8及其以下是不支持flex布局的,那怎么办呢?官方给的解释是,自己去做兼容。
官方很容易改变API,很多官方组件还没上线呢,就已经废弃了。比如一下的截图:



这个就比较尴尬了。很多在内测的公司,估计第一版就是按着官方的组件来的,结果还没上架,你就把官方的组件给废弃了,这是拿内测公司当小白鼠呢。但是,就算是当小白鼠,很多公司还是跪舔着争当小白鼠。
下面来说说开发中遇到的坑

setData 以数据来驱动view

在第一版的API中,setData是可以在onLoad的时候,设置数据的,但是更新一次api之后,在onload就不能设置setData了,但是官方的文档,并没有提到这个。还有在setData的时候,如果数据,有多层级。当数据有改变的时候,必须从外层开始设置,例如

obj:{
    innerObj:{}
}

如果在setData的时候写法这样的话,是无效的。

this.setData({
    innerObj:innerObj
})

这样是无效的。
还有在上面提到,在onload 的时候设置setData无效,那怎么办呢,就像我们的项目,必须设置的话,只能采取官方不推荐或者说,比较猥琐的解决方案。

this.data.obj = obj;

虽然官方不推荐,但是也没办法不是吗
setData在内部的一个队列方案,这个以后会详细的说,这一篇主要是说说小程序有哪些坑。现在有解决方案的,就把解决方案说一下,没有的话,就是吐槽吧。

数据存储

每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB。
在第一版的api中,删除storage是不能指定key进行删除的。那么怎么删除指定的storage呢,只有把当前的key的value值设置为空了。

wx.setStorage({
  key:"key",
  data:""
})

这个确实也够猥琐的,不过后来的更新中,微信提供了,指定key的删除方法。

wx.removeStorage(OBJECT)

也提供了,同步删除的方法。
wx.removeStorageSync(KEY)
用法

request请求并发限制

微信为了保证安全,在同时request请求的时候,做了限制,也就是同时并发5个请求,这个暂时无解。只能自己去封装队列来处理请求。
request没有cancel的事件,只要这个请求发出去了,是不能取消的。

5层url跳转

微信也是为了安全考虑,限制了,页面跳转的限制,如果层级大于5个的话,不报错,页面就是白页,官方提供的wx.redirectTo去处理,而不是wx.navigateTo。

view的布局以及wxss

官方推荐flex布局,但是当使用form表单的时候,form表单支持flex的并不是很好,使用的时候,要注意。
action-sheet 这个东西,很适合做下面的筛选项,但是这个适合少量的数据,因为不能滚动而且自带的样式也是不好控制。呵呵哒。不过也被官方判了死刑,还未上线就被废弃。modal lodding toast,这3个组件已经被官方判了死刑了,还没上线就被废弃。

wxss的一些限制

第一版的时候,wxss不支持层级选择,后来更新的时候,官方把这句话给删除了,也不知道是推荐使用层级还是不支持,反正就是把不支持层级选择给删除了。官方的changelist也没提到这块。
iconfont能不能使用?可以,但是ios下有兼容性,如果使用在线的iconfont的话,ios不支持,所以为了包的容量,只能base64在本地了。

另外一些别的坑,如业务交互

这块等下一篇再详细介绍

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

推荐阅读更多精彩内容