您的当前位置:首页正文

小程序开发规范-视图层

2024-11-22 来源:个人技术集锦

此文参考

WXML代码规范

标签的闭合

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

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

团队约定

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

  • 推荐写法
    <view>
      <image src="src"></image>
      <input value="test"></input>
      <text>我是一段文字,我有始有</text>
    </view>
    
  • 不推荐写法
    <view>
      <image src="src"/>
      <input value="test"/>
    </view>
    

标签属性

团队约定

  • 标签属性值使用双引号语法

  • 属性值可能写上的都写上

    • 推荐写法
      <button type="default"  disabled="{{true}}"> 按钮 </button>
      
    • 不推荐写法
      <button type='default'  disabled='{{true}}'> 按钮 </button>
      <button type="default"  disabled> 按钮 </button>
      
    • 错误写法
      <button type=default disabled=true> 按钮 </button>
      
  • 谨慎使用id属性

    id属性具有唯一性,可以用来标识具体组件,应避免在样式上使用id属性(选择器)

  • 属性书写顺序

    标签属性应按照以下顺序依次排列,以确保代码的可读性

    /*
        id,
        class,
        wx:for wx:item wx:key,
        wx:if,
        src,
        事件绑定类属性,如bind:tap,
        value,
        dataSet,(*需完善)
        组件自带的其它属性,
    */
    

特殊字符

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

  • 如需使用字符实体,需使用text组件并设置decode属性,并且decode目前仅可解析 &nbsp; &lt; &gt; &amp; &apos;&ensp; &emsp;,参考
    • 正确用法
      <text decode>&lt; &nbsp; &gt;</text>
      
    • 错误用法
      <text>&lt; &nbsp; &gt;</text>
      <view decode>&lt; &nbsp; &gt;</view>
      
  • 特殊符号使用输入法输入即可
  • 连续空格的使用
    • 需使用text组件并设置space属性

    • space属性的text内多个连续空格最终只显示一个

    • text组件设置space属性不会有连续空格的效果

      • 正确写法
        <text space="ensp">1 1  1    1</text>
        // 输出:1 1  1    1
        
      • 无效写法
        <text>1 1  1    1</text>
        // 输出:1 1 1 1
        

代码缩进

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

  • 推荐写法
    <view>
      <text>2个空格字符缩进</text>
      <view>
        ...
      </text>
    <view/>
    
  • 不推荐写法
    <view>
        <text>4个空格字符缩进</text>
        <view>
            ...
        </view>
    <view/>
    

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

代码嵌套

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

  • 推荐写法
    <view class="user_info">
      <image class="avatar" src="src"></image>
      <text class="nickname">小明</text>
    </view>  
    
  • 不推荐写法
    <view class="user_info">
      <view class="avatar">
        <image src="src"></image>
      </view>
      <view class="nickname">
        <text>小明</text>
      </view>
    </view>
    

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

  • 推荐写法
    <view class="user_info">
      <image src="src"></image>
      <text>小明</text>
      <text>
         原有奖励模式已改为积分奖励,针对部分未兑换礼品的用户,已为您补发积分奖励,如有疑问请联系微信客服:yiniankefu
      </text>
    </view>
    
  • 不推荐写法
    <view class="user_info"><image src="src"></image><text>小明</text></view>
显示全文