微信小程序

小程序入门教程及实例
为什么需要小程序???

一般情况下我们不会选择卸载低频应用,因为需要以备不时之需,无形之中造成存储空

间的浪费。现在,用户可以将部分低频应用删掉,然后用小程序取而代之。

想必大家都关心微信新推出的应用号的最终形态到底是什么样子?怎样将一个“服务

号”改造成为“小程序”?

开发环境

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

发表评论