推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序七日谈 - 第一天：人生若只如初见
发布时间:2020-12-10本文的目的不是讨论小程序的是或非，只是记录一下笔者在开发小程序过程中一些收获和感想。
有消息称第一批微信小程序在12月中下旬发布，在那之前，需要将已完成的小程序向腾讯提交审核。58到家看准了这次推广的机会，制定了小程序开发计划。笔者是主要开发者之一。
闲话少说，进入正题。
小程序号称使用前端技术开发接近native体验的webapp，微信提供了许多js和native交互的bridge API，同时将html/css进行改造，分别对应wxml和wxss。初见之时，看上去就是换个名字而已嘛，都是熟悉的技术，项目分分钟开发完成哈哈。然后就兴致勃勃的开始折腾，然后就...
小程序官方文档相当“简洁”，以示例代码的形式很形象地说明了各模块的开发模式。但是示例代码以及文字描述并未将其中的细节完全暴露出来，上手开发后才发现很多坑。
wxsswxss乍看上去就是css，名字相似，语法相似。但写起代码来真是痛苦的很，下面一一列出目前笔者遇到的问题。
1> 不支持级联选择器
css选择器可以支持自上而下一层层的级联选择，比如：
.parent .child{ color: #000; }
前端开发者对此非常熟悉。但是wxss并不支持上述语法，如果使用class作为匹配选择器，只能写一层，如下：
.parent{} .child{ color: #000; }
这种模式令开发者在为class命名上必须不能重复，限制了自由度。
2> 选择器支持非常有限
目前官方给出的wxss支持选择器只有以下几种：
其中的element是wxml支持的标签元素，并非所有html标签。
3> 不支持引用本地图片资源
比如我们需要使用本地的sprites图片：
.dj__icon { background-image; url("./assets/icons.sprites.png"); }
如果在wxss中编写以上代码并不会报错，但是也不会有任何理想的效果。官方给出的答复是：
所以如果我们需要使用自定义的图标UI的话，目前只能先将sprites图片上传到自己的服务器或者base64编译后再写入wxss中。
wxmlwxml的语法与vue.js有点相似，支持数据绑定以及部分模板逻辑。笔者目前在wxml开发中总结以下几点注意事项：
1> 使用wxml模板语法时只能使用部分js逻辑判断
或者也可以理解为只能使用以下几种逻辑：
引用变量；
二元操作符；
三元操作符。
由于wxml使用双花括号{{}}作为数据绑定标识，所以被{{}}包裹的逻辑语句不能出现花括号{}，否则会报语法错误。比如：
<view>{{ Object.assign({},data,{isTrue: false})}}</view>
2> event handler的参数event不支持访问DOM
小程序中不支持任何访问DOM的语法，因为它并不是在浏览器环境下运行，所以document、window等浏览器暴露的API均不能访问。事件响应函数接受的event参数的完整结构如下：
{ "type":"tap", "timeStamp":895, "target": { "id": "tapTest", "dataset": { "hi":"WeChat" } }, "currentTarget": { "id": "tapTest", "dataset": { "hi":"WeChat" } }, "detail": { "x":53, "y":14 }, "touches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }], "changedTouches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }] }
所以如果想使用常规浏览器环境下，通过event.target获取DOM是不可行的。只能通过操作数据来修改UI。
3> 使用剩余参数语法向模板传递对象格式的data
wxml支持模板引用以便开发通用组件，比如项目中存在item.wxml：
<!-- item.wxml --> <template name="item"> <text>{{text}}</text> </template>
在 index.wxml 中引用了 item.wxml，就可以使用item模板：
<import src=http://www.yiyongtong.com/archives/"item.wxml"/> <template is="item" data="{{text: 'forbar'}}"/>
其中的data是向item.wxml传递的参数。如果要循环一个列表数据，列表中每个元素都是key-value格式且对应一个item的话，需要使用以下格式：
