小程序demo文档

124 阅读1分钟

1. Flex布局

代码里有 display: flex; 就是flex布局。

例如:movie.wxss: image.png

2. 数据绑定

设置变量,用双大括号{{}}把数据给到页面就是数据绑定。

例如:home.wxml:

image.png

3. 列表渲染

在组件上使用 wx:for 控制属性绑定一个数组。

例如:home.wxml:

image.png

4. 条件渲染

在框架中,使用 wx:if="" 来判断是否需要渲染该代码块。

例如:home.wxml: image.png

5. 模板

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

image.png

6. 事件

例如:movie.wxml:

image.png

7. 引用

WXML 提供两种文件引用方式importinclude

例如:home.wxml:使用include引入loading模板

image.png

8. 小程序 API

wx.开头的方法

image.png

9. 样式属性

所有.wxss文件的内容

10. 组件的应用

components/film-item文件夹就是组件

11. 选择器

class选择器id选择器

image.png

12. 页面路由、页面传参

navigator标签是路由,参数是id

image.png

13. 生命周期函数

home.js使用了onReady生命周期

image.png