小程序文件结构与传统web对比

	微信小程序	传统web
结构	WXML	HTML
样式	WXSS	CSS
逻辑	Javascript	Javascript
配置	JSON	无

项目基本目录

模板语法

数据绑定

<view> {{ sayHello }} </view>

Page({data: {sayHello: 'Hello MooZiXiao!'}
})

组件属性

<view id="item-{{id}}"> </view>

Page({data: {id: 0}
})

运算

三元运算

<view class="{{isFlag ? 'cr_red' : 'cr_grey'}}"> 字体颜色切换 </view>

算数运算

<view> {{a + b}} + {{c}} + d </view>

逻辑判断

<view wx:if="{{data.length > 0}}"></view>

渲染

列表渲染 — wx:for

项默认的变量是 item 可用 wx:for-item 指定数组项的变量名

默认下标变量是 index 可用 wx:for-index指定数组当前下标名

wx:key 是用来提高数组渲染的性能

wx:key 绑定的值 有以下方式：

1. string 类型，表示 循环项中的唯一属性 如

   data:[{id:0,name:"moo"},{id:1,name:"zi"}]wx:key="id"
   

2. 保留字 *this ，意思是 item 本身 ，*this 代表的必须是 唯一的字符串和数组。

   list:[1,2,3,4,5]wx:key="*this"
   

代码：

<view wx:for="{{list}}" wx:key="id">{{index}}: {{item.name}}
</view><block wx:for="{{[1, 2, 3]}}" wx:key="*this" ><view> {{index}}: </view><view> {{item}} </view>
</block>

Page({data: {list: [{id:0,name: '蜡笔没有小新',}, {id:1,name: '小新没有蜡笔'}]}
})

条件渲染

wx:if

在框架中，使用 wx:if="{{show}}" 来判断是否需要渲染该代码块：

  <view wx:if="{{false}}">1</view><view wx:elif="{{true}}">2</view><view wx:else>3</view>

hidden

<view hidden="{{show}}"> True </view>

类似 wx:if

频繁切换 用 hidden

不常使用 用 wx:if

事件绑定

通过 bind 关键字来实现的

（ bindtap bindinput bindchange … ）

<input bindinput="handleInput"/>

handleInput: function(e) {console.log(e);
}

事件传值需通过标签自定义属性来设置

<view class="act_wrap" wx:for="{{actData}}" wx:key="id" bind:tap="handleJump" data-id="{{item.id}}">

handleJump: function (e) {const {id} = e.currentTarget.dataset;
},

WXSS

与 CSS 相比，WXSS 扩展的特性有：

• 响应式长度单位 rpx
• 样式导入

尺寸单位

rpx：根据屏幕宽度自适应

开发小程序时设计师可以 iPhone6 (750rpx) 作为视觉稿的标准。

使用步骤：

1. 确定设计稿宽度 pageWidth
2. 计算比例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth。
3. 在less文件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。

样式导入

使用 @import 导入外联样式(只支持相对路径)。

如：

// normalize.css
page,view,text,swiper,swiper-item,navigator,image,button,input{margin: 0;padding: 0;box-sizing: border-box;
}

// app.wxss
@import "normalize.css";

注意： 小程序 不支持通配符 *

使用 less

原生小程序并不支持less，所以需要以下操作：

1.在vs code 中，安装插件 Easy LESS

2.在 vs code 的设置中加入以下配置

// setting.json
"less.compile": {"outExt": ".wxss"
},

3.使用，新建 less文件，然后正常编辑即可。

常见组件

view

text

rich-text

button

image

navigator

icon

swiper

radio

checkbox …

标签页切换

待续~