微信小程序开发基础

• 小程序系统默认提供的ａｐｐ.ｊｓ 文件内容如图２ －４ 所示。
• ２.２.３ 数据层
• 数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储) 和网 络存储与调用。
上一页 下一页 返回
２.２ 小程序的开发框架
• １.页面临时数据或缓存 • 在Ｐａｇｅ( ) 中, 使用ｓｅｔＤａｔａ 函数将数据从逻辑层发送到视
上一页 下一页 返回
２.２ 小程序的开发框架
• ■ ｗｘ.ｃｌｅａｒＳｔｏｒａｇｅ 清理本地数据缓存。 • ３.网络存储与调用 • 上传或下载文件ＡＰＩ 接口, 如下: • ■ ｗｘ.ｒｅｑｕｅｓｔ 发起网络请求。 • ■ ｗｘ.ｕｐｌｏａｄＦｉｌｅ 上传文件。 • ■ ｗｘ.ｄｏｗｎｌｏａｄＦｉｌｅ 下载文件。 • 调用ＵＲＬ 的ＡＰＩ 接口, 如下: • ■ ｗｘ.ｎａｖｉｇａｔｅＴｏ 新窗口打开页面。 • ■ ｗｘ.ｒｅｄｉｒｅｃｔＴｏ 原窗口打开页面。
• 接下来, 打开ｉｎｄｅｘ.ｊｓｏｎ 文件, 输入如下代码:
• 在ｉｎｄｅｘ.ｊｓｏｎ 文件中, 只需加入一对空“ {}” 即可。 • 打开ｉｎｄｅｘ.ｊｓ 文件, 输入如下代码:
上一页 下一页 返回
２.３ 创建小程序页面
• 只需引入Ｐａｇｅ() 方法, 保证ｉｎｄｅｘ.ｊｓ 文件不为空即可。 • 将这４ 个文件保存后进行编译, 在模拟器中即可得到所需的结果。 各
• ＭＩＮＡ 框架为页面组件提供了ｂｉｎｄｔａｐ、ｂｉｎｄｔｏｕ ｃｈｓｔａｒｔ 等与事件监听相关的属性, 并与逻辑层中的事件处理 函数绑定在一起, 实现面向逻辑层与用户同步交互数据。
上一页 下一页 返回
２.２ 小程序的开发框架
• ＭＩＮＡ 框架还提供了很多方法将逻辑层中的数据与页面进行单向 绑定, 当逻辑层中的数据变更时, 小程序会主动触发对应页面组件的重 新数据绑定。
第２ 章 微信小程序开发基础
• ２.１ • ２.２ • ２.３ • ２.４ • ２.５ • ２.６ • ２.７
小程序的基本目录结构 小程序的开发框架 创建小程序页面 配置文件 逻辑层文件 页面结构文件 页面样式文件
返回
２.１ 小程序的基本目录结构
• 我们以第１ 章新建的系统默认示例项目为参考, 了解微信小程序项目 的基本目录结构。 如图２ － １ 所示,在微信小程序的基本目录结构 中, 项目主目录下有２ 个子目录(ｐａｇｅｓ 和ｕｔｉｌｓ) 和４ 个 文件(ａｐｐ. ｊｓ、ａｐｐ. ｊｓｏｎ、ａｐｐ. ｗｘｓｓ 和ｐｒｏ ｊｅｃｔ. ｃｏｎｆｉｇ. ｊｓｏｎ)。
• 微信小程序开发框架的逻辑层是采用ＪａｖａＳｃｒｉｐｔ 编写的 。 在ＪａｖａＳｃｒｉｐｔ 的基础上, 微信团队做了适当修改, 以便 提高开发小程序的效率。 主要修改包括:
• (１) 增加ａｐｐ() 和Ｐａｇｅ() 方法, 进行程序和页面的注册。 • (２) 提供丰富的ＡＰＩ, 如扫一扫、支付等微信特有的能力。 • (３) 每个页面有独立的作用域, 并提供模块化能力。
• 微信小程序在逻辑层将数据进行处理后发送给视图层展现出来, 同时 接收视图层的事件反馈。 视图层以给定的样式展现数据并反馈时间 给逻辑层, 而数据展现是以组件来进行的。组件是视图的基本组成单 元。
• ２.２.２ 逻辑层
• 逻辑层用于处理事务逻辑。
上一页 下一页 返回
２.２ 小程序的开发框架
• 对于微信小程序而言, 逻辑层就是所有.ｊｓ 脚本文件的集合。微信小 程序在逻辑层将数据进行处理后发送给视图层, 同时接受视图层的事 件反馈。
上一页 下一页 返回
２.１ 小程序的基本目录结构
• ｕｔｉｌｓ 目录用来存放一些公共的.ｊｓ 文件, 当某个页面需要用 到ｕｔｉｌｓ.ｊｓ 函数时, 可以将其引入后直接使用。 在微信小程 序中, 可以为一些图片、音频等资源类文件单独创建子目录用来存放 。
• ２.１.１ 主体文件
• 微信小程序的主体部分由３ 个文件组成, 这３ 个文件必须放在项目的 主目录中, 负责小程序的整体配置, 它们的名称是固定的。
• 微信小程序不仅在底层架构的运行机制上做了大量的优化, 还在重要 功能(如ｐａｇｅ 切换、ｔａｂ 切换、多媒体、网络连接等) 上使用 接近于系统层(Ｎａｔｉｖｅ) 的组件承载。 所以,小程序ＭＩＮＡ 框 架有着接近原生Ａｐｐ 的运行速度, 对Ａｎｄｒｏｉｄ 端和ｉＯＳ 端能呈现得高度一致,并为开发者准备了完备的开发和调试工具。
• 图２ －２ (ｂ) 是开发工具项目详情的可视文件, 其目的和功能与ｐｒ ｏｊｅｃｔ. ｃｏｎｆｉｇ. ｊｓｏｎ 文件的目的和功能是一样的。
• ｐａｇｅｓ 目录中有２ 个子目录, 分别是ｉｎｄｅｘ 和ｌｏｇｓ, 每 个子目录中保存着一个页面的相关文件。 通常, 一个页面包含４ 个不 同扩展名(.ｗｘｍｌ、.ｗｘｓｓ、.ｊｓ 和.ｊｓｏｎ) 的文件, 分别用 于表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件 。 按照规定, 同一个页面的４ 个文件必须具有相同的路径与文件名。
• ■ ａｐｐ.ｗｘｓｓ 小程序主样式表文件, 类似ＨＴＭＬ 的.ｃｓｓ 文件。 在主样式表文件中设置的样式在其他页面文件中同样有效。 该文件在项目中不是必需的。
• ２.１.２ 页面文件
• 小程序通常是由多个页面组成的, 每个页面包含４ 个文件, 同一页面 的这４ 个文件必须具有相同的路径与文件名。 当小程序被启动或小 程序内的页面进行跳转时, 小程序会根据ａｐｐ.ｊｓｏｎ 设置的路径 找到相对应的资源进行数据绑定。
上一页
返回
２.２ 小程序的开发框架
• 微信团队为小程序的开发提供了ＭＩＮＡ 框架。 ＭＩＮＡ 框架通过 微信客户端提供文件系统、网络通信、任务管理、数据安全等基础功 能, 对上层提供了一整套ＪａｖａＳｃｒｉｐｔ ＡＰＩ, 让开发者能 够非常方便地使用微信客户端提供的各种基础功能快速构建应用。
• 小程序ＭＩＮＡ 框架示意如图２ －３ 所示。 • 小程序ＭＩＮＡ 框架将整个系统划分为视图层和逻辑层。 视图层(Ｖ
• ■ .ｗｘｓｓ 文件 页面样式表文件, 用于定义本页面中用到的各类 样式表。 当页面中有样式表文件时, 文件中的样式规则会层叠覆盖ａ ｐｐ.ｗｘｓｓ 中的样式规则; 否则, 直接使用ａｐｐ.ｗｘｓｓ 中指 定的样式规则。 该文件在页面中不可缺少。
• ■ .ｊｓｏｎ 文件 页面配置文件。 该文件在页面中不可缺少。
上一页 下一页 返回
２.１ 小程序的基本目录结构
• ■ .ｊｓ 文件 页面逻辑文件, 在该文件中编写ＪａｖａＳｃｒｉｐ ｔ 代码控制页面的逻辑。 该文件在每个小程序的页面中不可缺少。
• ■ .ｗｘｍｌ 文件 页面结构文件, 用于设计页面的布局、数据绑定 等, 类似ＨＴＭＬ 页面中的.ｈｔｍｌ 文件。 该文件在页面中不可缺 少。
上一页
返回
２.３ 创建小程序页面
• 启动微信开发工具, 创建新的项目ｄｅｍｏ２,此处不勾选“创建Ｑｕ ｉｃｋＳｔａｒｔ 项目” 复选项, 如图２ －５所示。
• 单击“确定” 按钮后, 可以看到开发工具中的“目录结构” 界面只显 示项目配置文件(ｐｒｏｊｅｃｔ.ｃｏｎｆｉｇ.ｊｓｏｎ), 同时系统 提示错误信息,如图２ －６所示。
２.３ 创建小程序页面
• 这段代码将ｉｎｄｅｘ 页面注册到小程序中, 这个对象的第一属性ｐ ａｇｅｓ 接受了一个数组,该数组的每一项是一个字符串, 该字符串由 “路径” ＋ “文件名” 组成, 不包含扩展名。
上一页 下一页 返回
２.３ 创建小程序页面
• ｐａｇｅｓ 属性用来指定这个项目由哪些页面组成, 多个页面之间用 “,”分隔。
图层, 同时改变对应的ｔｈｉｓ.ｄａｔａ 的值。 • ｓｅｔＤａｔａ() 函数的参数接收一个对象, 以(ｋｅｙ,ｖａｌｕｅ)
的形式表示将ｋｅｙ 在ｔｈｉｓ.ｄａｔａ 中对应的值改变成ｖａｌ ｕｅ。 • ２.文件存储(本地存储) • 使用数据ＡＰＩ 接口, 如下: • ■ ｗｘ.ｇｅｔＳｔｏｒａｇｅ 获取本地数据缓存。 • ■ ｗｘ.ｓｅｔＳｔｏｒａｇｅ 设置本地数据缓存。
文件的代码内容如表２ －１ 所示。
• ２.３.２ 创建另一个页面文件
• 在２.３.１ 小节中, 我们采用逐步创建目录及４ 个文件的方式成功创 建了一个页面文件。在本节中, 我们采用另一种方式来创建另一个页 面文件ｎｅｗｓ。
• 打开ａｐｐ.ｊｓｏｎ 文件, 输入以下代码:
上一页 下一页 返回
２.３ 创建小程序页面
• ■ ａｐｐ.ｊｓ 小程序逻辑文件, 主要用来注册小程序全局实例。 在编译时, ａｐｐ.ｊｓ 文件会和其他页面的逻辑文件打包成一个Ｊａ ｖａＳｃｒｉｐｔ 文件。 该文件在项目中不可缺少。
上一页 下一页 返回
２.１ 小程序的基本目录结构
• ■ ａｐｐ.ｊｓｏｎ 小程序公共设置文件, 配置小程序全局设置。 该文件在项目中不可缺少。
ｉｅｗ) 由框架设计的标签语言ＷＸＭＬ (ＷｅｉＸｉｎ Ｍａｒｋｕ ｐ Ｌａｎｇｕａｇｅ) 和用于描述ＷＸＭＬ 组件样式的ＷＸＳＳ (Ｗ ｅｉＸｉｎＳｔｙｌｅ Ｓｈｅｅｔｓ) 组成, 它们的关系就像ＨＴＭ Ｌ 和ＣＳＳ 的关系。
下一页 返回
２.２ 小ຫໍສະໝຸດ Baidu序的开发框架
• 逻辑层(Ａｐｐ Ｓｅｒｖｉｃｅ) 是ＭＩＮＡ框架的服务中心, 由微信 客户端启用异步线程单独加载运行。 页面数据绑定所需的数据、页 面交互处理逻辑都在逻辑层中实现。 ＭＩＮＡ 框架中的逻辑层使用 ＪａｖａＳｃｒｉｐｔ 来编写交互逻辑、网络请求、数据处理, 但不 能使用ＪａｖａＳｃｒｉｐｔ 中的ＤＯＭ 操作。 小程序中的各个页 面可以通过逻辑层来实现数据管理、网络通信、应用生命周期管理和 页面路由。
• ２.２.１ 视图层
上一页 下一页 返回
２.２ 小程序的开发框架
• ＭＩＮＡ 框架的视图层由ＷＸＭＬ 与ＷＸＳＳ 编写, 由组件来进行 展示。 对于微信小程序而言, 视图层就是所有.ｗｘｍｌ 文件与.ｗｘ ｓｓ 文件的集合: .ｗｘｍｌ 文件用于描述页面的结构;.ｗｘｓｓ 文 件用于描述页面的样式。
• 将在２.１.１ 小节中提到的３ 个主体文件(ａｐｐ.ｊｓ、ａｐｐ.ｊｓ ｏｎ 和ａｐｐ.ｗｘｓｓ) 在项目的主目录下建立, 小程序依然提示错 误信息。
• ２.３.１ 创建第一个页面文件
下一页 返回
２.３ 创建小程序页面
• 继续在项目主目录下新建一个ｐａｇｅｓ 目录,在ｐａｇｅｓ 目录下 新建一个ｉｎｄｅｘ 目录, 并在ｉｎｄｅｘ 目录下新建ｉｎｄｅｘ. ｊｓ、ｉｎｄｅｘ.ｊｓｏｎ、ｉｎ￣ｄｅｘ.ｗｘｍｌ 和ｉｎｄｅｘ. ｗｘｓｓ 空文件。 新建ｉｎｄｅｘ 页面后的项目目录结构如图２ － ７ 所示。
• 在主目录中, ３ 个以“ａｐｐ” 开头的文件是微信小程序框架的主描 述文件, 是应用程序级别的文件。 这３个文件不属于任何页面。
• ｐｒｏｊｅｃｔ.ｃｏｎｆｉｇ.ｊｓｏｎ 文件是项目配置文件, 包含 项目名称、ＡｐｐＩＤ 等相关信息, 如图２ －２ (ａ) 所示。
下一页 返回
２.１ 小程序的基本目录结构
• 此时, 系统仍然提示错误信息。 假设, 我们的目的是页面能显示“欢 迎学习小程序, 实现大梦想”。 首先, 打开ｉｎｄｅｘ.ｗｘｍｌ 文件 , 输入“欢迎学习小程序, 实现大梦想”。 然后,告诉系统这个文件的 名称及所处路径。 因此, 打开项目配置文件ａｐｐ.ｊｓｏｎ, 输入如 下代码:
上一页 下一页 返回
上一页 下一页 返回
２.２ 小程序的开发框架
• 逻辑层就是通过各个页面的.ｊｓ 脚本文件来实现的。 由于小程序并 非运行在浏览器中,所以ＪａｖａＳｃｒｉｐｔ 在Ｗｅｂ 中的一些功 能在小程序中无法使用, 如ｄｏｃｕｍｅｎｔ、ｗｉｎｄｏｗ 等。
• 开发者开发编写的所有代码最终会被打包成独立的ＪａｖａＳｃｒｉ ｐｔ 文件, 并在小程序启动的时候运行, 直到小程序被销毁。
• 将文件保存后, 我们发现系统在目录结构中自动添加了相应的目录和 文件, 系统还自动补全了每个页面文件中必需的基本代码, 而且没有出 现错误提示, 如图２ －８ 所示。
上一页
返回
２.４ 配置文件
• ２.４.１ 全局配置文件