《微信小程序七日谈》- 第一天:人生若只如初见

《微信小程序七日谈》系列文章:

  1. 第一天:人生若只如初见
  2. 第二天:你可能要抛弃原来的响应式开发思维
  3. 第三天:玩转Page组件的生命周期
  4. 第四天:页面路径最多五层?导航可以这么玩
  5. 第五天:你可能要在登录功能上花费大力气
  6. 第六天:小程序devtool隐藏的秘密;
  7. 第七天:不要捡了芝麻丢了西瓜

本系列的文章并非初学教程,而是笔者在具体开发过程中遇到的问题以及部分解决方案。

微信小程序自公布以来就被捧上了天,新闻一波接一波。一部分声音来自前端界,把小程序当成前端历史地位提升的一次革新;一部分声音来自app开发界,把小程序当成失业的助推器(摊手)。本文的目的不是讨论小程序的是或非,只是记录一下笔者在开发小程序过程中一些收获和感想。

有消息称第一批微信小程序在12月中下旬发布,在那之前,需要将已完成的小程序向腾讯提交审核。58到家看准了这次推广的机会,制定了小程序开发计划。笔者是主要开发者之一。

闲话少说,进入正题。

小程序号称使用前端技术开发接近native体验的webapp,微信提供了许多js和native交互的bridge API,同时将html/css进行改造,分别对应wxml和wxss。初见之时,看上去就是换个名字而已嘛,都是熟悉的技术,项目分分钟开发完成哈哈。然后就兴致勃勃的开始折腾,然后就...

小程序官方文档相当“简洁”,以示例代码的形式很形象地说明了各模块的开发模式。但是示例代码以及文字描述并未将其中的细节完全暴露出来,上手开发后才发现很多坑。

wxss

wxss乍看上去就是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中。

wxml

wxml的语法与vue.js有点相似,支持数据绑定以及部分模板逻辑。笔者目前在wxml开发中总结以下几点注意事项:

**1> 使用wxml模板语法时只能使用部分js逻辑判断 **

或者也可以理解为只能使用以下几种逻辑:

  • 引用变量;
  • 二元操作符;
  • 三元操作符。

由于wxml使用双花括号{{}}作为数据绑定标识,所以被{{}}包裹的逻辑语句不能出现花括号{},否则会报语法错误。比如:

<view>{{ Object.assign({},data,{isTrue: false})}}</view>

2> event handler的参数event不支持访问DOM

小程序中不支持任何访问DOM的语法,因为它并不是在浏览器环境下运行,所以documentwindow等浏览器暴露的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="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

其中的data是向item.wxml传递的参数。如果要循环一个列表数据,列表中每个元素都是key-value格式且对应一个item的话,需要使用以下格式:

<import src="item.wxml"/>
<template is="item" wx:for="{{list}}" wx:for-item="item" data="{{..item}}"/>

上述代码将列表的每个元素整体传递给item.wxml,使用 data="{{..item}}"语法。当然,你也可以在data中添加其他数据,比如 data="{{..item, text:'forbar'}}"

3> 可将事件响应函数名称通过data传递给组件模板

组件对引用它的模板来说就是一个黑盒,外部不应该干涉组件的内部逻辑。如果想要组件响应某些操作并反馈外部定义的响应函数,可以将外部已定义的响应函数名称传给组件。

我们将上文的代码改造一下演示这个问题。比如item.wxml暴露了tap响应API:

<!-- item.wxml -->
<template name="item">
<text bindtap="{{tapHandler}}">{{text}}</text>
</template>

index.wxml中引入item组件并传递了tapHandler:

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar', tapHandler: 'indexTapHandler'}}"/>

其中indexTapHandlerindex.wxml对应的js中声明的响应函数:

Page({
indexTapHandler(e){
alert('trigger index tap event');
}
});

这样就完成了组件事件响应的定制。

3> 可变数组数据渲染务必使用wx:key

渲染列表数据时,如果列表中的数据是动态的(比如点击之后修改列表中某个元素的值),那么在渲染UI时务必将渲染的模板加上wx:key。请看以下代码:

<import src="item.wxml"/>
<template is="item" wx:for="{{list}}" wx:for-item="item" wx:for-index="idx" wx:key="item-{{idx}}" data="{{..item}}"/>

上述代码使用列表的index作为wx:key的值,保证每个元素对应template的唯一性。

wx:key的取值还可以是保留字*this,官方给出的定义如下:

保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。

根据以上的解释,如果item本身是动态不唯一的,是不能使用*this作为wx:key取值的,否则会出现非常诡异的情况。

总结

第一天的开发感想就是:小程序并不像第一眼看上去那么美好,不能把小程序简单地理解为html+css+js。本文暂时不讨论小程序背后的运行原理,单纯出开发层面看,wxss相当于极度缩减版的css;wxml是mustache的简化版。至于js,后续笔者会将遇到的问题和经验写出来,以供参考。

上一篇:MySQL 大数据量快速插入方法和语句优化


下一篇:Java &