微信小程序 WXML、WXSS 和JS介绍及详解

近日，我接触到微信小程序的相关资料，对其中涉及的WXML、WXSS和JS有了更深入的了解。在此，与大家分享我的一些心得和体验。

关于微信小程序的开发工具，虽然模拟器和真机调试存在差异，但建议大家在真机上进行调试，以获取更准确的实验结果。毕竟在实际设备上的体验更加真实可靠。

接下来是WXML部分。它与HTML有一定的相似性，但也有其独特之处。比如，小程序的WXML标签需要严格遵循规范，单标签必须以/>结尾。官方推荐使用的基础标签是块标签，而用于文本显示。虽然可以使用传统的HTML标签构建页面，但需要注意标签的属性和样式设置。例如，scroll-view组件的滚动位置可以通过scroll-和scroll-left属性进行修改。在使用setData方法修改滚动位置时，需要注意方法的应用时机和方式。input组件目前只支持文字居左，对于表单开发需要注意一些细节。关于map组件，如果在app的第一个页面直接加载可能会出现加载失败的情况，需要在onLoad事件之后再进行加载。map和canvas组件类似于在webview上覆盖一个native组件，它们无法被overflow覆盖或置于其上方。在页面设计时要特别注意这些限制。

接下来是WXSS部分。它与CSS非常相似，基本所有的CSS都支持，并且小程序还提供了rpx这个单位用于布局。WXSS不支持大括号嵌套，因此CSS animation无法使用，但transition是可用的。引入字体和本地资源也是不可用的，因此icon的设计可能需要采用其他方式实现。在编写WXSS时，需要注意规则的写法，不能采用集联的方式。每个class都需要写得很明确，以避免重名的问题。

微信小程序的开发涉及许多细节和技巧。建议开发者们在实际开发中多加注意和尝试，以充分利用这些工具构建出优秀的小程序应用。也欢迎大家加入微信小程序应用号交流群 563752274，与更多开发者一起分享经验和技巧。

希望以上分享对大家有所帮助！随着前端技术的不断发展，小程序的开发逐渐受到广泛关注。关于小程序中的样式和脚本，有一些重要的特性和规则需要开发者了解和掌握。

在样式方面，比如 `app.wxss` 和各个页面 `wxss` 的覆盖关系，如果存在同名规则，页面的样式会覆盖应用的样式，而不是两者合并。比如 `li.current {color: red;}` 这样的写法在小程序中是支持的，而 `first-child`、`last-child` 和 `nth-child` 等伪类目前并不支持。

接下来，关于 JavaScript 运行环境，它与视图运行环境是隔离的。这意味着 JavaScript 无法直接操作视图元素，只能通过事件获取时机和 `setData` 方法来修改数据，从而改变视图。目前 JavaScript 面临的一个问题是无法获取页面像素级的宽度和高度。所有事件回调的单位都是像素（px），而不是响应式像素（rpx），这使得在某些情况下，如使用 canvas 绘图时，开发者无法确定绘图的边界。

关于 `setData` 方法，如果连续两次调用并传递的值相同，视图并不会更新（详见 1.3）。在使用 `navigate` 进行页面跳转时，可以通过 queryString 的方式传递参数，这些参数会在页面的 `onLoad` 事件中作为对象传入。而对于 `navigate back`，目前并没有官方的数据通讯机制，但可以通过 `getApp()` 获取全局对象来实现自定义通讯。使用 canvas 的 `getActions` 方法后，actions 数组会被清空，因此连续调用可能会得到空数组。

关于小程序开发者工具，它是用 nw 写的。从底层源码来看，WXML 的确存在一个和拼装的过程。尽管开发者工具表现出一些原生特性，比如自动聚焦能自动呼出键盘，但从小程序对 css 的支持以及 webview 的一些 bug 来看，它更像是基于 webview 的。某些原生组件，如 map 和 canvas，可能是用的原生视图，叠加在 webview 上。

以上是关于小程序开发中一些重要特性和规则的介绍，希望能对大家有所帮助。感谢大家的阅读和支持！如果有任何疑问或需要进一步的解释，请随时提问。

通过 `cambrian.render('body')` 渲染文章内容，为开发者提供清晰、生动的阅读体验。