小程序入门教程及实例
为什么需要小程序???
一般情况下我们不会选择卸载低频应用,因为需要以备不时之需,无形之中造成存储空
间的浪费。现在,用户可以将部分低频应用删掉,然后用小程序取而代之。
想必大家都关心微信新推出的应用号的最终形态到底是什么样子?怎样将一个“服务
号”改造成为“小程序”?
开发环境
1、下载和安装
2、参考
目录结构
一个小程序由两部分组成:框架主体部分、框架页面部分
1、框架主体部分包含3个文件:app.js app.json app.wxss(样式表)
app.js (脚本文件)
内调用了 App 函数, 用来注册小程序实例, 可以在这个文件中监听处理小程序的声明周期函数,并可以在此声明全局变量。小程序提供了全局方法getApp()方法返回小程序实例。此外,还提供了getCurrentPage获取当前页面的实例。
app.json (配置文件)
用来对小程序进行全局配置 我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。
App.wxss (样式表文件)
Window 设置页面窗口表现
tabBar 设置页面底部tab表现,其中list数组长度不 超过5且至少为2
networkTimeout 设置网络超时时间
Debug 设置debug模式的开启
微信小程序会读取这些文件,生成一个小程序实例
2、框架页面部分:index页面 和 logs页面,即欢迎页和小程序启动日志的展示页
每一个页面是由同路径下同名的4个不同后缀文件组成,如:index.js、index.wxml、index.wxss、index.json。分别是脚本、配置、样式、页面结构文件。
WXML组件
小程序中并没有html 标签,而是提供了一系列 WXML 组件,目前小程序并没有提供
自定义组件的动能
View 视图容器
Input input
Button button
Text text
Checkbox 多选项目
数据绑定
数据绑定采用 “Mustache” 语法(双大括号)包裹变量
WXML 中的动态数据均来自对应Page 的data,并且需要调用 setData 方法通知视图数
据变化
深入了解
流程: App Launch-->App Show-->onload-->onShow-->onReady