一、整体框架
每个页面包含四个文件:
1、.js文件:逻辑层,在里面定义渲染层要用到的数据(date:{ ……}),函数。
2、.json文件:配置,对微信小程序进行全局配置,设置页面文件的路径、窗口表现、设置网络超时时间、 设置多 tab 切换页等
3、.wxml文件:全称是WeiXin Markup Language(微信标记语言),类似于HTML也是一种使用 <标签>和</标签>来构建页面结构的语言。WXML具有数据绑定、列表渲染、条件渲染、模板、事件和引用的能力。
4、.wxss文件:WXSS文件的全称是WeiXin Style Sheets(微信样式表),这是一种样式语言,用于描述WXML 的组件样式(例如尺寸、颜色、边框效果等)。为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。
二、注册页面
1、小程序每个页面JS文件通过Page(OBJECT)函数来进行页面注册。在page({})中,可包含以下内容:
其中data中的数据类型必须为数组、数字、字符串、布尔值或者对象。 在wxml中通过 {{"数据名称"}} 进行调用。
2、基础事件:
其中dataset属性常用,例如:
微信小程序通过按钮传递参数
三、flex布局
1、小程序使用了flex模型来提高页面布局效率。这是一种灵活的布局模型,当页面需要适应不同屏幕大小以及 设备类型时该模型可以确保元素在恰当的位置。
2、flex属性: