• 微信小程序开发规范文档-WXML代码规范


    标签

    小程序视图层开发基于小程序框架为开发者提供的一系列基础组件,这些基础组件通常以双标签或单标签的形式使用。

    • 双标签包括起始标签<标签>,结止标签</标签>和属性,内容在这两个标签之内
    • 单标签只有一个<标签/>,有属性,没有内容

    小程序规定,标签名有多个词时,词之间以连接符-连接。

    <tag-name property="value">
      内容放这里...
    </tag-name>
    
    <tag-name property="value"/>
    

    编码时要遵循标签的语义,要尽量使用最少的标签并保持最小的复杂度。

    代码大小写

    所有标签和属性,大部分属性值统一使用小写

    • 推荐写法

      ...

    • 不推荐写法

      ...

      <VIEW CLASS="DEMO">
          ...
      </VIEW>
      

    标签的闭合

    在小程序里,有些组件必须写成双标签,如视图容器类组件view;有些组件可以写成单标签,如媒体类组件image;但在小程序运行时,它们都会解析成双标签。

    在小程序里,所有的标签一旦使用都必须被闭合,使用标签不闭合会报错,导致程序无法运行。

    • 正确写法



      我是一段文字,我有始有
    • 错误写法


      我是一段文字,我有始有

    团队约定

    所有具有开始标签和结束标签的元素都要写上起止标签,某些可以省略结束标签的亦都要写上

    • 推荐写法



      我是一段文字,我有始有
    • 不推荐写法



    标签属性

    团队约定

    • 标签属性值使用双引号语法
    • 属性值可能写上的都写上
      • 推荐写法
      • 不推荐写法

      • 错误写法
    • 谨慎使用id属性
      id属性具有唯一性,可以用来标识具体组件,应避免在样式上使用id属性(选择器)
    • 属性书写顺序
      标签属性应按照以下顺序依次排列,以确保代码的可读性
      /*
      id,
      class,
      wx:for wx:item wx:key,
      wx:if,
      src,
      事件绑定类属性,如bind:tap,
      value,
      dataSet,(*需完善)
      组件自带的其它属性,
      */

    特殊字符

    正常情况下的小程序里,文本和字符实体不能混合出现。

    • 如需使用字符实体,需使用text组件并设置decode属性,并且decode目前仅可解析   < > & '    ,参考text文档
      • 正确用法
        <   >
      • 错误用法
        <   >
        <   >
    • 特殊符号使用输入法输入即可
    • 连续空格的使用
      • 需使用text组件并设置space属性
      • 无space属性的text内多个连续空格最终只显示一个
      • 非text组件设置space属性不会有连续空格的效果
        • 正确写法
          1 1 1 1
          // 输出:1 1 1 1
        • 无效写法
          1 1 1 1
          // 输出:1 1 1 1

    代码缩进

    统一使用2个空格字符进行代码缩进

    • 推荐写法

      2个空格字符缩进

      ...

    • 不推荐写法

      4个空格字符缩进

      ...


      在微信开发者工具-设置-编辑设置,勾选用空格代码Tab,Tab大小设置为2,使用格式化代码可以自动缩进对齐。

    代码嵌套

    编写wxml代码时,需要保证页面结构稳固,同时需要避免多余的父元素,减少嵌套。

    • 推荐写法
    • 不推荐写法

    块级标签的起止标签各占一行,行内标签的起止标签一般写在一行内,如果标签内容过多,起止标签则各占一行。

    • 推荐写法
    • 不推荐写法
  • 相关阅读:
    I2C协议
    SPI
    学习高速PCB设计,这些走线方式你要知道! 高速射频百花潭 20220121 08:53
    ORCAD中,怎么一次性去掉所有元器件下面的下划线呢
    PCB中波长和真空中波长的关系
    I2S
    解决 Vue 重复点击相同路由,出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题
    vue2搭建h5页面
    git提交代码
    vue报错解决方案
  • 原文地址:https://www.cnblogs.com/fightjianxian/p/12692270.html
Copyright © 2020-2023  润新知