项目结构构成

|-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

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

基于vue的微信小程序开发5分钟上手教程（官方文档转）
使用手册 mpvue 继承自 Vue.js,其技术规范和语法特点与 Vue.js 保持一致. 注:其实就是官方文档,只是习惯看博文学习才直接copy过来的,详见官方文档本文档适用于有一定 Vue.j ...
微信小程序如何实现支付功能？看官方文档头疼（使用云函数的方式操作）
先来个效果图 ^_^ 微信支付功能,个人公众号是没有办法进行开发支付功能的,需要是使用非个人公众号进行注册(如:营业执照等,可以去淘宝购买一个也行大概500左右) 公众平台的配置可以参考文档,这里 ...
微信小程序学习记录——4.框架-视图层
文章目录 1.WXML 数据绑定简单绑定运算组合列表渲染 wx:for block wx:for wx:key 条件渲染 wx:if block wx:if wx:if vs hidden 模 ...
json 微信小程序筛选_微信小程序学习记录
全局配置 app.json 文件用来对微信小程序进行全局配置. pages 类型为 String Array 是页面路径列表,创建目录和更改时会自动更改文件. 用于指定小程序由哪些页面组成,每一项 ...
微信小程序学习记录（一）
如何定义一个全局变量: 1,在根目录下app.js中添加 App({globalData: {g_isPlayingMusic : false,g_currentMusicPostId :null,d ...
微信小程序学习记录（二）MQTT连接阿里云
准备微信小程序开发工具 MQTT.js库:https://unpkg.com/mqtt@2.18.8/dist/mqtt.min.js点开链接,右击页面内容另存到电脑. 开始将MQTT.js复制到 ...
微信小程序学习记录——5.组件
文章目录 1.视图容器 view scroll-view swiper swiper-item movable-view movable-area movable-view cover-view co ...
微信小程序学习记录——3.框架-逻辑层
文章目录 1.逻辑层简介 2.注册程序 App() onLaunch,onShow参数 getApp() 3.场景值 4.注册页面 Page() 生命周期生命周期中的函数初始化数据页面相关事件处 ...
微信小程序学习记录（一）小实战——加法计算器
小实战--加法计算器在[app.json]文件下添加计算器页面: "pages": ["pages/calc/calc",//新建计算器页面"pag ...

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

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