【小程序探索之路】——1、开发框架组成

小程序的框架组成

小程序的框架组成由四部分组成：

• WXML
• WXSS
• JavaScript
• WXS

---

WXML

官方给出的解释是：“WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。”也就是HTML。

• 区别与HTML的两点

  1. WXML中的标签是严格闭合的
  2. WXML中的属性是区分大小写的

• WXML的特点

  1. 数据绑定
     所有的属性和组件都要小写

<text data-test="{{test}}"> hello world</text>
---------
<!-- js文件中 -->
Page({
    data:{
        test:'测试'
    }
})

1. 列表渲染

<view>
    <block wx:for="{{mylist}}" wx:for-item="abcd" wx:key="id">
      <view>{{abcd.id}}:{{abcd.name}}</view>
    </block>
  </view>
<!-- js文件中 -->
Page({
 data: {
     mylist:[
          { id: 1, name: '商品1' },
          { id: 2, name: '商品2' },
          { id: 3, name: '商品3' },
          { id: 4, name: '商品4' },
          { id: 5, name: '商品5' },
          { id: 6, name: '商品6' }
        ]
    }
  }
 )

1. 条件渲染

<view wx:if="{{decision === 1}}"> 米饭 </view>
<view wx:if="{{decision === 2}}"> 粥 </view>
<view wx:if="{{decision === 3}}"> 面条 </view>
<!-- js文件中 -->
Page({
  data: {
    decision:1
    }
  })

1. 模板引用
   import与include的区别（作用域的不同）：
   import只会引用template中的内容；
   include只会引用除去template的内容

---

WXSS

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。

选择器的优先级
!important(∞) > style(1000) > #element(100) > .element(10) > element(1)

---

JavaScript

不多说

---

WXS

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

1. wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
2. wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
3. wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
4. wxs 函数不能作为组件的事件回调。
5. 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

WXS的功能js都能实现，不知道这玩意有啥特别的