微信小程序开发

目录

开发教程 

JSON 语法

小程序配置

全局配置

页面配置

sitemap配置

视图层

WXML

WXSS

组件

逻辑层

小程序注册：App方法

页面注册：Page方法

 

---

参考链接：微信小程序配置文档、微信小程序开发指南

开发教程 

当我们使用小程序开发者工具创建一个小程序项目时，在该项目的根目录下会生成以下文件，如下图：

 

• app.json：该文件用来对当前小程序进行全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
• app.wxss：根目录中的app.wxss为整个小程序项目的公共样式，它会被注入到小程序的每个页面。
• project.config.json：是开发工具配置文件。小程序开发者工具在每个项目的根目录都会生成一个project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项
• sitemap.json：小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。

JSON 语法

这里说一下小程序里JSON配置的一些注意事项。

JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。

1. 数字，包含浮点数和整数
2. 字符串，需要包裹在双引号中
3. Bool值，true 或者 false
4. 数组，需要包裹在方括号中 []
5. 对象，需要包裹在大括号中 {}
6. Null

还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。

小程序配置

全局配置

在app.json文件中进行全局配置，完整配置项说明请参考小程序全局配置。

页面配置

每一个小程序页面可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中的配置项会覆盖 app.json 的 window 中相同的配置项。完整配置项说明请参考小程序页面配置。

sitemap配置

小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。完整配置项说明请参考小程序 sitemap 配置。

视图层

WXML

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000ee2c29d4f805b0086a37a254c0a

WXSS

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000c44c49141887b00864fbba5100a

组件

https://developers.weixin.qq.com/miniprogram/dev/component/

逻辑层

参考：逻辑层

在 JavaScript 的基础上，增加了一些功能，以方便小程序的开发：

• 增加 App 和 Page 方法，进行程序注册和页面注册。
• 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
• 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
• 提供模块化能力，每个页面有独立的作用域。

注意：小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，document 等。

小程序注册：App方法

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，以绑定生命周期回调函数、错误监听和页面不存在监听函数等。

详细的参数含义和使用请参考 App 参考文档 。

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 示例，获取App上的数据或调用开发者注册在 App 上的函数。这样在App中定义的变量即为全局变量，所有页面都可以通过 getApp 方法进行访问。

页面注册：Page方法

https://blog.youkuaiyun.com/ssyes123/article/details/79764433