微信小程序开发基础

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
• 小程序系统默认提供的app.js 文件内容如图2 -4 所示。
• 2.2.3 数据层
• 数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储) 和网 络存储与调用。
上一页 下一页 返回
2.2 小程序的开发框架
• 1.页面临时数据或缓存 • 在Page( ) 中, 使用setData 函数将数据从逻辑层发送到视
上一页 下一页 返回
2.2 小程序的开发框架
• ■ wx.clearStorage 清理本地数据缓存。 • 3.网络存储与调用 • 上传或下载文件API 接口, 如下: • ■ wx.request 发起网络请求。 • ■ wx.uploadFile 上传文件。 • ■ wx.downloadFile 下载文件。 • 调用URL 的API 接口, 如下: • ■ wx.navigateTo 新窗口打开页面。 • ■ wx.redirectTo 原窗口打开页面。
• 接下来, 打开index.json 文件, 输入如下代码:
• 在index.json 文件中, 只需加入一对空“ {}” 即可。 • 打开index.js 文件, 输入如下代码:
上一页 下一页 返回
2.3 创建小程序页面
• 只需引入Page() 方法, 保证index.js 文件不为空即可。 • 将这4 个文件保存后进行编译, 在模拟器中即可得到所需的结果。 各
• MINA 框架为页面组件提供了bindtap、bindtou chstart 等与事件监听相关的属性, 并与逻辑层中的事件处理 函数绑定在一起, 实现面向逻辑层与用户同步交互数据。
上一页 下一页 返回
2.2 小程序的开发框架
• MINA 框架还提供了很多方法将逻辑层中的数据与页面进行单向 绑定, 当逻辑层中的数据变更时, 小程序会主动触发对应页面组件的重 新数据绑定。
第2 章 微信小程序开发基础
• 2.1 • 2.2 • 2.3 • 2.4 • 2.5 • 2.6 • 2.7
小程序的基本目录结构 小程序的开发框架 创建小程序页面 配置文件 逻辑层文件 页面结构文件 页面样式文件
返回
2.1 小程序的基本目录结构
• 我们以第1 章新建的系统默认示例项目为参考, 了解微信小程序项目 的基本目录结构。 如图2 - 1 所示,在微信小程序的基本目录结构 中, 项目主目录下有2 个子目录(pages 和utils) 和4 个 文件(app. js、app. json、app. wxss 和pro ject. config. json)。
• 微信小程序开发框架的逻辑层是采用JavaScript 编写的 。 在JavaScript 的基础上, 微信团队做了适当修改, 以便 提高开发小程序的效率。 主要修改包括:
• (1) 增加app() 和Page() 方法, 进行程序和页面的注册。 • (2) 提供丰富的API, 如扫一扫、支付等微信特有的能力。 • (3) 每个页面有独立的作用域, 并提供模块化能力。
• 微信小程序在逻辑层将数据进行处理后发送给视图层展现出来, 同时 接收视图层的事件反馈。 视图层以给定的样式展现数据并反馈时间 给逻辑层, 而数据展现是以组件来进行的。组件是视图的基本组成单 元。
• 2.2.2 逻辑层
• 逻辑层用于处理事务逻辑。
上一页 下一页 返回
2.2 小程序的开发框架
• 对于微信小程序而言, 逻辑层就是所有.js 脚本文件的集合。微信小 程序在逻辑层将数据进行处理后发送给视图层, 同时接受视图层的事 件反馈。
上一页 下一页 返回
2.1 小程序的基本目录结构
• utils 目录用来存放一些公共的.js 文件, 当某个页面需要用 到utils.js 函数时, 可以将其引入后直接使用。 在微信小程 序中, 可以为一些图片、音频等资源类文件单独创建子目录用来存放 。
• 2.1.1 主体文件
• 微信小程序的主体部分由3 个文件组成, 这3 个文件必须放在项目的 主目录中, 负责小程序的整体配置, 它们的名称是固定的。
• 微信小程序不仅在底层架构的运行机制上做了大量的优化, 还在重要 功能(如page 切换、tab 切换、多媒体、网络连接等) 上使用 接近于系统层(Native) 的组件承载。 所以,小程序MINA 框 架有着接近原生App 的运行速度, 对Android 端和iOS 端能呈现得高度一致,并为开发者准备了完备的开发和调试工具。
• 图2 -2 (b) 是开发工具项目详情的可视文件, 其目的和功能与pr oject. config. json 文件的目的和功能是一样的。
• pages 目录中有2 个子目录, 分别是index 和logs, 每 个子目录中保存着一个页面的相关文件。 通常, 一个页面包含4 个不 同扩展名(.wxml、.wxss、.js 和.json) 的文件, 分别用 于表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件 。 按照规定, 同一个页面的4 个文件必须具有相同的路径与文件名。
• ■ app.wxss 小程序主样式表文件, 类似HTML 的.css 文件。 在主样式表文件中设置的样式在其他页面文件中同样有效。 该文件在项目中不是必需的。
• 2.1.2 页面文件
• 小程序通常是由多个页面组成的, 每个页面包含4 个文件, 同一页面 的这4 个文件必须具有相同的路径与文件名。 当小程序被启动或小 程序内的页面进行跳转时, 小程序会根据app.json 设置的路径 找到相对应的资源进行数据绑定。
上一页
返回
2.2 小程序的开发框架
• 微信团队为小程序的开发提供了MINA 框架。 MINA 框架通过 微信客户端提供文件系统、网络通信、任务管理、数据安全等基础功 能, 对上层提供了一整套JavaScript API, 让开发者能 够非常方便地使用微信客户端提供的各种基础功能快速构建应用。
• 小程序MINA 框架示意如图2 -3 所示。 • 小程序MINA 框架将整个系统划分为视图层和逻辑层。 视图层(V
• ■ .wxss 文件 页面样式表文件, 用于定义本页面中用到的各类 样式表。 当页面中有样式表文件时, 文件中的样式规则会层叠覆盖a pp.wxss 中的样式规则; 否则, 直接使用app.wxss 中指 定的样式规则。 该文件在页面中不可缺少。
• ■ .json 文件 页面配置文件。 该文件在页面中不可缺少。
上一页 下一页 返回
2.1 小程序的基本目录结构
• ■ .js 文件 页面逻辑文件, 在该文件中编写JavaScrip t 代码控制页面的逻辑。 该文件在每个小程序的页面中不可缺少。
• ■ .wxml 文件 页面结构文件, 用于设计页面的布局、数据绑定 等, 类似HTML 页面中的.html 文件。 该文件在页面中不可缺 少。
上一页
返回
2.3 创建小程序页面
• 启动微信开发工具, 创建新的项目demo2,此处不勾选“创建Qu ickStart 项目” 复选项, 如图2 -5所示。
• 单击“确定” 按钮后, 可以看到开发工具中的“目录结构” 界面只显 示项目配置文件(project.config.json), 同时系统 提示错误信息,如图2 -6所示。
2.3 创建小程序页面
• 这段代码将index 页面注册到小程序中, 这个对象的第一属性p ages 接受了一个数组,该数组的每一项是一个字符串, 该字符串由 “路径” + “文件名” 组成, 不包含扩展名。
上一页 下一页 返回
2.3 创建小程序页面
• pages 属性用来指定这个项目由哪些页面组成, 多个页面之间用 “,”分隔。
图层, 同时改变对应的this.data 的值。 • setData() 函数的参数接收一个对象, 以(key,value)
的形式表示将key 在this.data 中对应的值改变成val ue。 • 2.文件存储(本地存储) • 使用数据API 接口, 如下: • ■ wx.getStorage 获取本地数据缓存。 • ■ wx.setStorage 设置本地数据缓存。
文件的代码内容如表2 -1 所示。
• 2.3.2 创建另一个页面文件
• 在2.3.1 小节中, 我们采用逐步创建目录及4 个文件的方式成功创 建了一个页面文件。在本节中, 我们采用另一种方式来创建另一个页 面文件news。
• 打开app.json 文件, 输入以下代码:
上一页 下一页 返回
2.3 创建小程序页面
• ■ app.js 小程序逻辑文件, 主要用来注册小程序全局实例。 在编译时, app.js 文件会和其他页面的逻辑文件打包成一个Ja vaScript 文件。 该文件在项目中不可缺少。
上一页 下一页 返回
2.1 小程序的基本目录结构
• ■ app.json 小程序公共设置文件, 配置小程序全局设置。 该文件在项目中不可缺少。
iew) 由框架设计的标签语言WXML (WeiXin Marku p Language) 和用于描述WXML 组件样式的WXSS (W eiXinStyle Sheets) 组成, 它们的关系就像HTM L 和CSS 的关系。
下一页 返回
2.2 小ຫໍສະໝຸດ Baidu序的开发框架
• 逻辑层(App Service) 是MINA框架的服务中心, 由微信 客户端启用异步线程单独加载运行。 页面数据绑定所需的数据、页 面交互处理逻辑都在逻辑层中实现。 MINA 框架中的逻辑层使用 JavaScript 来编写交互逻辑、网络请求、数据处理, 但不 能使用JavaScript 中的DOM 操作。 小程序中的各个页 面可以通过逻辑层来实现数据管理、网络通信、应用生命周期管理和 页面路由。
• 2.2.1 视图层
上一页 下一页 返回
2.2 小程序的开发框架
• MINA 框架的视图层由WXML 与WXSS 编写, 由组件来进行 展示。 对于微信小程序而言, 视图层就是所有.wxml 文件与.wx ss 文件的集合: .wxml 文件用于描述页面的结构;.wxss 文 件用于描述页面的样式。
• 将在2.1.1 小节中提到的3 个主体文件(app.js、app.js on 和app.wxss) 在项目的主目录下建立, 小程序依然提示错 误信息。
• 2.3.1 创建第一个页面文件
下一页 返回
2.3 创建小程序页面
• 继续在项目主目录下新建一个pages 目录,在pages 目录下 新建一个index 目录, 并在index 目录下新建index. js、index.json、in ̄dex.wxml 和index. wxss 空文件。 新建index 页面后的项目目录结构如图2 - 7 所示。
• 在主目录中, 3 个以“app” 开头的文件是微信小程序框架的主描 述文件, 是应用程序级别的文件。 这3个文件不属于任何页面。
• project.config.json 文件是项目配置文件, 包含 项目名称、AppID 等相关信息, 如图2 -2 (a) 所示。
下一页 返回
2.1 小程序的基本目录结构
• 此时, 系统仍然提示错误信息。 假设, 我们的目的是页面能显示“欢 迎学习小程序, 实现大梦想”。 首先, 打开index.wxml 文件 , 输入“欢迎学习小程序, 实现大梦想”。 然后,告诉系统这个文件的 名称及所处路径。 因此, 打开项目配置文件app.json, 输入如 下代码:
上一页 下一页 返回
上一页 下一页 返回
2.2 小程序的开发框架
• 逻辑层就是通过各个页面的.js 脚本文件来实现的。 由于小程序并 非运行在浏览器中,所以JavaScript 在Web 中的一些功 能在小程序中无法使用, 如document、window 等。
• 开发者开发编写的所有代码最终会被打包成独立的JavaScri pt 文件, 并在小程序启动的时候运行, 直到小程序被销毁。
• 将文件保存后, 我们发现系统在目录结构中自动添加了相应的目录和 文件, 系统还自动补全了每个页面文件中必需的基本代码, 而且没有出 现错误提示, 如图2 -8 所示。
上一页
返回
2.4 配置文件
• 2.4.1 全局配置文件
相关文档
最新文档