微信小程序开发调研资料总结

微信小程序开发调研资料总结

开发环境部署

申请帐号：

安装开发工具：

创建demo，验证开发环境是否就绪：使用申请帐号时分配的AppID，创建demo（小程序开发工具有默认demo），点击编译，会生成二维码，使用微信扫一扫该二维码，即可运行demo。demo一段时间内有效，超时后自动失效。

工程目录结构

项目根目录：用来代表整个App的默认配置，默认样式等。

页面目录：用来代表一个页面下专属的配置，样式等。

JSON：配置。

WXML：对应于HTML。

WXSS：对应于CSS。

JS：负责实现业务逻辑。

四种文件构成一套：

【一套文件】可能出现在两个地方：

JSON配置

window：和app.json的window字段相同，在当前页面下，覆盖app.json中的window字段。

pages：设置小程序包括的页面，是所有页面路径构成的数组。

tabBar：设置底部tabBar，包括：

networkTimeout：设置网络超时时间，包括：

debug：是否开启debug选项。

window：设置整个窗体的属性，包括：

text：文案。

pagePath：页面路径。

iconPath：图标路径。

selectedIconPath：按下态图标路径。

color，selectedColor，backgroundColor等常规属性。

list，即tab的item构成的列表，包括：

request：普通请求。

uploadFile：上传文件。

downloadFile：下载文件。

navigationBarTitleText：导航栏标题。

backgroundColor：背景色。

libVersion：基础库版本。

es6：是否支持ES6语法。

minified：上传工程时，是否压缩。

IDE及工程配置（project.config.json），包括：

App全局配置（app.json），包括：

页面配置（page.json），包括：

WXML

如bindTap等，传入一个方法，方法的参数是一个event。

template标签。

定义模板时使用name声明标签。

使用模板时使用is进行引用，使用data填充数据。

wx-if：使用数据绑定确定if条件是否为true。

wx-elseif。

wx-else。

wx-for。

item和index魔术变量。

内容、标签属性、控制属性等，都可以使用{{}}进行绑定。

{{}}中可进行算数运算、逻辑运算、字符串拼接等。

View。

Button、Progress、Radio、Switch等常规组件。

Audio、Image、Video等多媒体组件。

Map等功能组件。

Canvas等动画组件。

WebView直接嵌入页面。

组件：

数据绑定：

列表渲染：

条件渲染：

模板：

事件绑定：

WXSS

rpx：750，iphone6。

选择器是子集。

JS交互及端能力