WXML(WeiXin Markup Language):
1. 语法: WXML类似于HTML,但有一些差异。标签名、属性名、属性值等的书写方式与HTML相似。
<!-- WXML 示例 -->
<view class="container">
<text>{{ message }}</text>
<button bindtap="handleTap">点击我</button>
</view>
2. 数据绑定: WXML支持数据绑定,可以通过双花括号 {{ }} 将页面的数据与JS文件中的数据进行绑定。
<!-- 数据绑定示例 -->
<text>{{ message }}</text>
3. 事件绑定: 通过bind前缀,可以将页面上的事件和JS文件中的事件处理函数进行绑定。
<!-- 事件绑定示例 -->
<button bindtap="handleTap">点击我</button>
WXSS(WeiXin Style Sheet):
1. 语法: WXSS类似于CSS,但也有一些微信小程序特有的语法和特性。
/* WXSS 示例 */
.container {
width: 100%;
padding: 20rpx;
}
button {
background-color: #007aff;
color: #fff;
}
2. 尺寸单位: WXSS中支持 rpx 单位,相对长度单位,可以根据屏幕宽度自适应。
.container {
padding: 20rpx;
}
3. 选择器: WXSS中支持大部分CSS的选择器,但不支持复杂的选择器嵌套。
/* 选择器示例 */
.container {
/* 样式 */
}
button {
/* 样式 */
}
4. 全局样式和局部样式: WXSS中可以定义全局样式和局部样式。
/* 全局样式 */
.global-style {
color: #333;
}
/* 页面局部样式 */
.container {
font-size: 16px;
}
总体来说,WXML和WXSS的语法与HTML和CSS类似,但由于微信小程序的特殊环境,它们具有一些微信独有的特性和语法,需要开发者适应并了解。同时,这两种语言都在微信小程序的官方文档中有详细的说明,可以作为参考资料。
转载请注明出处:http://www.zyzy.cn/article/detail/9561/小程序云开发