微信小程序和一般的web区别

  1. WXML(HTML)
    1.1 小程序的WXML没有HTML的宽容度​那么高,单标签必需是 /> 结尾的。不然会报错。
    1.2 ​官方推荐使用的基础标签<view>是块标签,给了<text>作为文本标签,但是使用其他标签比如div也是可以使用的,并且都是inline标签。并且wxml的parser会把标签上的不在白名单上的属性都去掉,class, id, data 这些应该都在白名单内,但是href什么的是不会有的,所以如果你用传统的html的标签构建页面理论上也是可行的,不过这些都是inline标签,需要自行设定display。
    1.3 ​scroll-view 的scroll-top, scroll-left 是可以修改scroll-view的滚动位置的。但是用户自己滚动了之后小程序并不会去改变 scroll-top, scroll-left 的赋值(并不是双向同步的)。如果这时使用setData去修改的话,scroll-top, scroll-left 的赋值和上一次的值相同,小程序是不会运用这个修改的,所以表现就是设置没有生效。这时只能先设置一个其他值,再设置回去(这里还可以体现setData方法是同步的)。scroll-view 获取scroll位置,只能通过bindscroll的回调函数获取,所以需要取scroll位置的请自行预存好。scroll-view 还是有webview的 scroll 的臭毛病,在居顶位置如果第一个动作是向下滚动的,会导致之后手怎么滑都滚不动,设置scroll-top 不为0,设个1就好了。
    1.4 input 目前只支持文字居左,其他都是不行的(模拟器可以)。如果你做表单,建议把input等表单元素都放在form中,from触发submit时会返回内部所有表单元素的name-value。不然只能绑定所有表单元素的 change 事情来获取,甚是麻烦。
    1.5 只有 checkbox-group 有 change 事件,单个的checkbox是没有的,如果你只有一个checkbox, 觉得外面套一个checkbox-group麻烦又不美观的话,可以用 switch type="checkbox" 代替。(微信小程序应用号交流群 563752274)
    1.6 map 组建目前直接在app第一个页面加载会出现加载失败。需要在onLoad之后再加在。可以先wx:if="false" 然后onLoad的之后改成 true 就行了。
    1.7 map, canvas 像是在webview上面盖一个native组件的感觉。它们是没法被overflow 以及 上面盖元素的,你可以认为z-index写多高都没法在他上面。所以不建议在页面上做弹层和蒙层。canvas 无法放在scroll-view中滚动会定位在初始位置,如果你给canvas设置背景颜色的话,你会发现背景色块跟着滚了,图没滚。
  2. WXSS(CSS)
    2.1 WXSS 和 CSS很像,基本所有的CSS都支持,小程序还提供了 rpx 这个单位。一屏幕宽是750rpx。推荐使用这个来作为布局。不过有一些细小的差别我下面会列出
    2.2 WXSS不支持 大括号嵌套({{}} )。所以key-frames,CSS animation 就不可用了,不过transition 是可用的。
    2.3 目前测试引入字体也是不可用的,前面WXML中提到的内容看SVG也是没法使用的。所以icon目前只能用图的方式做了。
    2.4 WXSS中是不能引入本地资源的, 只能使用线上资源(模拟器是可以,但是别信),可以使用base64。(微信小程序应用号交流群 563752274)
    2.5 WXSS的 rule 是不支持集联的。所以不能 body .main {background:#000;} 这么写。所以写起来还是比较费劲的。每个class都得很长,不然怕重名。不过支持 li.current {color: red;} 这样的写法,支持after, before伪类,但是不支持 first-child last-child nth-child 这类伪类。
    2.6 app.wxss 和每个 page 的wxss 的覆盖关系是: 如果有同名 rule 的话,page 会覆盖 app 的,不是merge是覆盖。
  3. JS
    3.1 JS 的运行环境和view的运行环境是隔离的。JS只能通过事件获取时机和setData方法修改数据来改变view。
    3.2 JS 目前有个很大的问题是无法获取到页面px级的宽度高度, 所有事件回调的单位都是px级的而不是rpx的,但是又不知道当前rpx,px的转换关系。比如过你用canvas画图。你都不知道边界在哪里,这个很蛋疼。
    3.3 上面有说过 setData方法如果上一个值和下一个值相同时,是不会触发view修改的(见1.3)
    3.4 使用 navigate 跳转的时候可以使用queryString的方式跟在相对地址上,onLoad事件会在入参中传入(会转化成object),但是 navigate back的时候没有一个官方给出的数据通讯机制。可以使用getApp() 获取到全局对象,给上面加点东西,自行实现。navigate 最多5个什么的就不说了。
    3.5 canvas getActions被调用之后,actions是会被清空的。即连续调用两次getActions,第二次是空数组。
    3.6 开发者工具是nw写的,我就看了看裙底的源码,开发者工具中WXML确实是有parser再拼装的过程的。但是并不能说明小工具是native的,从css的支持力度到webview的一些bug相似度来看,我还是觉得像webview,但是组件比如map,canvas什么的用的是原生view,然后盖在webview上的感觉。但是不管怎么说 auto-focus 能自动呼出键盘就已经是个很大的好评了。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容