微信小程序开发学习笔记之基本结构

小程序的四大组成部分

四大组成部分：由WXML、WXSS、Javascript和WXS构成，WXML类似于HTML，用于描述页面结构；WXSS负责页面样式设计，与CSS功能相似，但有小程序特有的扩展；Javascript是处理页面交互逻辑和数据通信的核心脚本语言；而WXS作为增强型脚本语言，主要对请求数据进行过滤和计算处理，帮助WXML快速构建页面内容结构。

数据绑定

需要注意的是同名的wxml只能从同名的js中获取变量值，所以小程序的全局变量的使用相对繁琐，需要在小程序onload阶段时提取并转赋。

<!-- index.wxml -->
<view>
    <text>{{message}}</text>
</view>

//index.js
Page({
    data: {
        message: "Hello, world!"
    }
})

列表渲染

瞄过几眼vue的语法，连略懂都谈不上，但看到小程序的这个模式就觉得眼熟，本来觉得自己php都没学明白，就暂时别碰什么框架了，结果躲过了初一也没躲过十五。

<!-- index.wxml -->
<view>
    <block wx:for="{{items}}" wx:for-item="item" wx:key="index">
        <view>{{index}}{{item.name}}</view>
    </block>
</view>

//index.js
Page({
    data: {
        items:[
            {name:"商品A"},
            {name:"商品B"},
            {name:"商品C"},
            {name:"商品D"},
            {name:"商品E"}
        ]
    }
})

条件渲染

条件渲染
<!-- index.wxml -->
<view>今天吃什么?</view>
<view wx:if="{{condition === 1}}">
    饺子
</view>
<view wx:elif="{{condition ===2}}">
    米饭
</view>
<view wx:else>
    面食
</view>

//index.js
Page({
    data: {
        condition: Math.floor(Math.random()*3+1)
    }
})