• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

标签

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

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

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

<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代码时,需要保证页面结构稳固,同时需要避免多余的父元素,减少嵌套。

  • 推荐写法
  • 不推荐写法

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

  • 推荐写法
  • 不推荐写法

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序之自定义组件(附源码)发布时间:2022-07-18
下一篇:
C#开发微信小程序(一)发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap