微信小程序开发知识结构体系大全/图解（2022）_微信小程序销售平台技术路线图-CSDN博客

本文链接：https://blog.csdn.net/qq_25482375/article/details/124356083

小程序开发

一、开发环境
二、开发流程
三、文件详解
- （一）项目JSON配置文件
一、开发环境
二、开发流程
三、文件详解
- （一）项目JSON配置文件

请通读全文、切勿随机阅读、以便快速掌握

一、开发环境

系统：win
软件：wechat_devtools_1.05.2204180_x64.exe

（一）开发者注册

注册：
	https://mp.weixin.qq.com/
获取APPID：
	https://mp.weixin.qq.com/
APPID获取位置：
	</>开发
		开发管理
			开发设置

（二）软件下载

地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

（三）快捷键

1、代码放大：

ctrl ＋

2、代码缩小：

ctrl －

3、选择页面内容：

ctrl shift  C
与终端冲突

（四）快捷方式

1、查找页面内容所在文件：

先使用选择工具选择页面内容
再打开控制台一栏右边AppData
先使用选择工具选择页面内容
再查看左边底部页面路径

二、开发流程

（一）文件格式

1、网页（骨架）：index.wxml

2、脚本（动作）：app.js

配置全局接口调用、生命周期、全局逻辑配置
配置节点

1.项目入口

3、数据（配置）：app.json

JSON 对象、属性

1.项目全局配置

4、样式（属性）：app.wxss

全局样式

1.项目全局样式

（二）一个页面组成结构

1、.js文件

页面的脚本文件
存放页面的数据、事件处理函数等

2、.json文件

当前页面的配置文件
配置窗口的外观、表现等

3、.wxml文件

页面的模板结构文件

4、.wxss文件

当前页面的样式表文件

（三）项目组成结构

REMLI：项目名称
	pages：所有小程序页面
		index
			index.js
			index.json
			index.wxmll
			index.wxss
		logs
			logs.js
			logs.json
			logs.wxml
			logs.wxss
	utils：工具模块（自定义模块）
		util.js
	.eslintrc.js
	app.js：项目入口文件
	app.json：项目全局配置文件
	app.wxss：项目全局配置文件
	project.config.json：项目配置文件
	project.private.config.json
	sitemap.json：配置微信索引

（三）图解流程

1、创建项目

在这里插入图片描述

2、开发页面

在这里插入图片描述

三、文件详解

（一）项目JSON配置文件

一种数据格式、以配置文件形式出现
不同.json配置文件可对小程序项目进行不同级别的配置

1、根目录中app.json

全局配置：含有小程序所有页面路径、窗口外观、界面表现、底部tab
小程序中每1个页面、可以使用.json文件来对本页面的窗口外观进行配置
页面中的配置项会覆盖app.json 的 window 中相同的配置项

1.配置内容：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

2.四个配置项：

pages：用来记录当前小程序所有页面的路径
window：全局定义小程序所有页面的背景色、文字颜色等
style：全局定义小程序组件所使用的样式版本
sitemapLocation：指明sitemap.json 的位置

2、根目录中project.config.json

项目配置文件、记录开发环境个性化配置

1.配置内容：

{
  "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": {
    "bundle": false,
    "userConfirmedBundleSwitch": false,
    "urlCheck": true,
    "scopeDataCheck": false,
    "coverView": true,
    "es6": true,
    "postcss": true,
    "compileHotReLoad": false,
    "lazyloadPlaceholderEnable": false,
    "preloadBackgroundData": false,
    "minified": true,
    "autoAudits": false,
    "newFeature": false,
    "uglifyFileName": false,
    "uploadWithSourceMap": true,
    "useIsolateContext": true,
    "nodeModules": false,
    "enhance": true,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": true,
    "showShadowRootInWxmlPanel": true,
    "packNpmManually": false,
    "enableEngineNative": false,
    "packNpmRelationList": [],
    "minifyWXSS": true,
    "showES6CompileOption": false,
    "minifyWXML": true,
    "useStaticServer": true,
    "checkInvalidKey": true,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    },
    "disableUseStrict": false,
    "useCompilerPlugins": false
  },
  "compileType": "miniprogram",
  "libVersion": "2.19.4",
  "appid": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "projectname": "miniprogram-92",
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  }
}

2.配置项：

setting 中保存编译相关配置
projectname 中保存项目名称
appid 中保存小程序账号ID

3、根目录中sitemap.json

小程序内搜索、配置小程序页面是否允许微信索引
允许微信索引时：微信会通过爬虫形式、为小程序页面内容建立索引
用户搜索关键字和页面索引匹配成功时候、小程序页面将可能展示在搜索结果中

1.配置内容：

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",
  "page": "*"
  }]
}

2.配置项：

注意：sitemap 索引提示默认开启
关闭sitemap索引提示：可在小程序项目配置文件project.config.json 的 setting 中配置字段 checkSiteMap 为 false

4、每个页面文件夹中.json

私有单独配置文件优先
私有＞全局

请通读全文、切勿随机阅读、以便快速掌握

一、开发环境

系统：win
软件：wechat_devtools_1.05.2204180_x64.exe

（一）开发者注册

注册：
	https://mp.weixin.qq.com/
获取APPID：
	https://mp.weixin.qq.com/
APPID获取位置：
	</>开发
		开发管理
			开发设置

（二）软件下载

地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

（三）快捷键

1、代码放大：

ctrl ＋

2、代码缩小：

ctrl －

3、选择页面内容：

ctrl shift  C
与终端冲突

（四）快捷方式

1、查找页面内容所在文件：

先使用选择工具选择页面内容
再打开控制台一栏右边AppData
先使用选择工具选择页面内容
再查看左边底部页面路径

二、开发流程

（一）文件格式

1、网页（骨架）：index.wxml

2、脚本（动作）：app.js

配置全局接口调用、生命周期、全局逻辑配置
配置节点

1.项目入口

3、数据（配置）：app.json

JSON 对象、属性

1.项目全局配置

4、样式（属性）：app.wxss

全局样式

1.项目全局样式

（二）一个页面组成结构

1、.js文件

页面的脚本文件
存放页面的数据、事件处理函数等

2、.json文件

当前页面的配置文件
配置窗口的外观、表现等

3、.wxml文件

页面的模板结构文件

4、.wxss文件

当前页面的样式表文件

（三）项目组成结构

REMLI：项目名称
	pages：所有小程序页面
		index
			index.js
			index.json
			index.wxmll
			index.wxss
		logs
			logs.js
			logs.json
			logs.wxml
			logs.wxss
	utils：工具模块（自定义模块）
		util.js
	.eslintrc.js
	app.js：项目入口文件
	app.json：项目全局配置文件
	app.wxss：项目全局配置文件
	project.config.json：项目配置文件
	project.private.config.json
	sitemap.json：配置微信索引

（三）图解流程

1、创建项目

在这里插入图片描述

2、开发页面

在这里插入图片描述

三、文件详解

（一）项目JSON配置文件

一种数据格式、以配置文件形式出现
不同.json配置文件可对小程序项目进行不同级别的配置

1、根目录中app.json

全局配置：含有小程序所有页面路径、窗口外观、界面表现、底部tab
小程序中每1个页面、可以使用.json文件来对本页面的窗口外观进行配置
页面中的配置项会覆盖app.json 的 window 中相同的配置项

1.配置内容：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

2.四个配置项：

pages：用来记录当前小程序所有页面的路径
window：全局定义小程序所有页面的背景色、文字颜色等
style：全局定义小程序组件所使用的样式版本
sitemapLocation：指明sitemap.json 的位置

2、根目录中project.config.json

项目配置文件、记录开发环境个性化配置

1.配置内容：

{
  "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": {
    "bundle": false,
    "userConfirmedBundleSwitch": false,
    "urlCheck": true,
    "scopeDataCheck": false,
    "coverView": true,
    "es6": true,
    "postcss": true,
    "compileHotReLoad": false,
    "lazyloadPlaceholderEnable": false,
    "preloadBackgroundData": false,
    "minified": true,
    "autoAudits": false,
    "newFeature": false,
    "uglifyFileName": false,
    "uploadWithSourceMap": true,
    "useIsolateContext": true,
    "nodeModules": false,
    "enhance": true,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": true,
    "showShadowRootInWxmlPanel": true,
    "packNpmManually": false,
    "enableEngineNative": false,
    "packNpmRelationList": [],
    "minifyWXSS": true,
    "showES6CompileOption": false,
    "minifyWXML": true,
    "useStaticServer": true,
    "checkInvalidKey": true,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    },
    "disableUseStrict": false,
    "useCompilerPlugins": false
  },
  "compileType": "miniprogram",
  "libVersion": "2.19.4",
  "appid": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "projectname": "miniprogram-92",
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  }
}

2.配置项：

setting 中保存编译相关配置
projectname 中保存项目名称
appid 中保存小程序账号ID

3、根目录中sitemap.json

小程序内搜索、配置小程序页面是否允许微信索引
允许微信索引时：微信会通过爬虫形式、为小程序页面内容建立索引
用户搜索关键字和页面索引匹配成功时候、小程序页面将可能展示在搜索结果中

1.配置内容：

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",
  "page": "*"
  }]
}

2.配置项：

注意：sitemap 索引提示默认开启
关闭sitemap索引提示：可在小程序项目配置文件project.config.json 的 setting 中配置字段 checkSiteMap 为 false

4、每个页面文件夹中.json

私有单独配置文件优先
私有＞全局