微信小程序学习记录【1】【项目结构构成、官方文档构成、基本配置】

---

项目结构构成

|-pages    	// 项目的模板页面
	|-index 	// 页面文件夹，每个文件夹表示一个页面，页面由四个文件构成，文件名必须相同。默认加载的是index页面
  	|-index.js    // 页面逻辑文件
		|-index.json  // 页面配置文件
		|-index.wxml  // 页面结构文件
		|-index.wxss  // 页面样式文件
	|-logs		// 页面文件夹
  	|-logs.js
		|-logs.json
		|-logs.wxml
		|-logs.wxss
|-utils		// 项目的工具
  	|-util.js
|-app.js   // 项目逻辑文件
|-app.json // 项目配置文件
|-app.wxss // 项目样式文件
|-project.config.json  // 项目的描述文件
|-sitemap.json  // 小程序搜索定义文件

---

官方文档结构

微信官方文档：

• 框架

  小程序的框架配置、框架接口、wxml语法、wxs语法等

• 组件

  微信提供的可以在页面中直接使用的内置标签，用来构成小程序的页面结构

  内置组件一般都具有特定的页面结构、样式和功能

  微信也提供了自定义组件的功能

• API

  微信提供的内置功能方法，用于实现数据请求、硬件调用等功能

• 服务端

  小程序仅提供页面构成等交换功能，对于项目运行需求的后台功能，需要通过后台代码进行结构调用获取（提供给后端程序员使用）

• 云开发

  云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器。

  使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代。

• 扩展能力

  扩展的组件标签，下载后可以在小程序中直接使用

---

基本配置

​ 创建页面的两种方式：

• 点击+新建——>目录/Page，会根据提供的名称自动创建四个文件，并添加到app.json的pages选项中

• 

• 直接在app.json的pages选项中添加页面路径，然后保存，如果不存在对应文件夹，会自动在对应路径下创建四个文件

1. 小程序配置

​ 分为：全局配置app.json、页面配置page.json、sitemap配置sitemap.json

1.1 app.json

​ 小程序根目录下的app.json 文件用来对微信小程序进行全局配置，定义小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等

​ 参考 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

例如：tabBar

1.2 page（页面名）.json

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

​ 参考 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

1.3 sitemap.json

​ 开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引，提供小程序搜索功能

​ 参考 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html

2. 框架接口

2.1 app.ts

​ app.ts文件是项目的核心逻辑文件，在该文件中完成小程序实例的注册和全局功能的定义

• 通过调用 App(Object) 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等
• App() 必须在 app.ts 中调用，必须调用且只能调用一次，不然会出现无法预期的后果
• 整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp() 方法获取到全局唯一的 App 实例
• onShow()/onHide()，控制小程序在进入前台和切入后台（被隐藏）时的动作
• 可定义全局变量或函数，通过App实例来调用（在其他页面获取App实例：const app=getApp();）
• onLaunch(),小程序加载，只加载一次

​ 参考 https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

2.2 page.ts

​ page.ts文件是页面的逻辑文件，在该文件中完成当前页面的注册和页面功能的定义

• 通过调用 Page(Object) 方法注册当前页面，指定页面的初始数据、生命周期回调、事件处理函数等
• 在该文件中this表示当前页面实例对象，可以通过this访问当前页面实例的数据和方法
• 在该文件中可以通过this.setData(object)修改数据仓库data中的数据，并同步更新页面中绑定的值，即改变页面的状态
• onload() 页面加载，只加载一次，onready()也只执行一次
• onshow()的第一次执行早于onready()的执行
• 设置页面转发内容（注：path要与App.json中路径相同，否则会找不到页面）
• 

​ 参考 https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

---

笔记内容来源：https://www.w3cschool.cn/minicourse/play/txywxxcx