微信开发中WXML、WXSS和JS的详细介绍

本文主要介绍微信小程序wxml、wxss、js的介绍和详细讲解，有需要的朋友可以参考一下。

前几天我掷硬币。然后列出一些实验结果，供大家参考。

用开发工具模拟和真机还是有很大区别的。我也建议调试真机比较靠谱。

1.WXML(HTML)

1.1 applet的WXML不如HTML宽容，单个标签必须以/>结尾。否则，您将报告一个错误。

1.2官方推荐的基本标签是block标签，给出的是文本标签，但也可以使用P等其他标签，而且都是行内标签。而且wxml的解析器会去掉所有不在白名单上的属性，比如class、ID、data，这些属性应该在白名单上，但是没有href这种东西，所以如果你用传统的html标签构建页面，理论上是可行的，但是这些都是内联标签，需要你自己设置显示。

1.3 scroll-view的scroll -top和scroll -left可以修改scroll -view的滚动位置。但是用户自己滚动后，小程序不会改变scroll -top和scroll -left的赋值(两个方向都不同步)。如果此时使用setData进行修改，那么scroll -top和scroll -left的赋值和上次一样，小程序不会使用这个修改，所以表现就是设置无效。这时候只能先设置一个其他值，然后再设置回来(这里也可以体现setData方法是同步的)。Scroll-view只能通过bindscroll的回调函数获取滚动位置，所以如果需要获取滚动位置，请自行保存。Scroll-view还有webview的卷轴的臭味。如果第一个动作是在顶部位置向下滚动，会导致手滑动而不滚动。设置scroll -top为0，设置为1即可。

1.4目前input只支持文本的左侧位置，其他都不行(模拟器可以)。如果做一个表单，建议把input等所有表单元素都放在表单里。当from触发器提交时，它将返回所有内部表单元素的name -值。否则只能通过绑定所有表单元素的change东西才能得到，很麻烦。

1.5只有复选框-组有变更事件，但没有单个复选框。如果你只有一个checkbox，又觉得在外面设置checkbox -组很麻烦不好看，可以用switch type="checkbox "来代替。(微信小程序应用号交流群563752274)

目前，1.6地图组件将无法直接加载到应用程序的第一页。需要在onLoad之后添加。可以先wx:if="false "再onLoad的然后改成true。

1.7地图，画布就像是在webview上覆盖一个原生组件的感觉。它们不能被溢出和其上的元素覆盖。你可以认为z-索引不能写在上面。因此，不建议在页面上制作弹性层和覆盖层。画布不能放在scroll -视图中。滚动将定位在初始位置。如果为canvas设置背景色，会发现背景色块会滚动，但图片不会滚动。

2.WXSS(CSS)

2.1 WXSS和CSS很像，基本上支持所有的CSS，小程序也提供了单元rpx。屏幕宽度为750rpx。这是推荐的布局。然而，有一些小的区别，我将在下面列出。

2.2 WXSS不支持花括号嵌套({{}})。所以key -帧，CSS动画不可用，但是转场可用。

2.3目前测试中介绍的字体也不可用，上面WXML提到的内容SVG也无法使用。所以图标目前只能以图表的形式来做。

2.4本地资源不能引入WXSS，只能用在线资源(模拟器也可以，但是不要相信)，base64都可以。(微信小程序应用号交流群563752274)

2.5 WXSS规则不支持集合关联。所以你不能收尸。主{背景:# 000；}这样写。所以还是很难写。每节课一定要很长，不然怕重名。但是，它支持Li . current { color:red；}这种写法支持after和before伪类，不支持First -Child last -Child nth -Child等伪类。

app.wxss和每个页面的wxss的叠加关系是，如果有同名规则，页面会叠加app，而不是合并。

3.射流研究…

3.1 JS的运行环境与view的运行环境是隔离的。JS只能通过事件采集定时和setData方法改变数据来改变视图。

3.2 JS目前有一个很大的问题就是无法获得px级别的页面宽度和高度。所有的事件回调都是px级别的，而不是rpx，但是我们不知道目前rpx和px的转换关系。比如你用画布画画。你甚至不知道边界在哪里。这很痛。

3.3上面已经说过，如果前一个值与下一个值相同，setData方法不会触发视图修改(见1.3)。

3.4使用navigate跳转时，可以使用queryString跟随相对地址，onLoad事件会在输入参数中传递(会转换成对象)，但navigate back时没有官方的数据通信机制。可以用getApp()获取全局对象，给它添加一些东西，自己实现。导航，最多五个，啥都别说了。

3.5调用canvas get actions后，动作将被清空。也就是连续调用两次getActions，第二次是空数组。

3.6开发者工具是nw写的，所以我只是看了一下裙子的源代码。开发者工具中的WXML确实有解析器重组的过程。但不代表小工具就是原生的。从css的支持到webview的一些bug的相似性，我感觉还是webview的，只是地图、画布等组件用了原生视图然后覆盖了。但无论如何，auto-focus能自动调出键盘已经是很大的赞了。

[相关建议]

1.下载微信微信官方账号平台源代码。

2.微信投票源代码

3.微信拉拉外卖2.2.4解密微信魔方开源版源代码。

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：微信开发中WXML、WXSS和JS的详细介绍 https://zhujicankao.com/113481.html