微信小程序开发知识结构体系大全/图解(2022)

3 篇文章 0 订阅

小程序开发


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

一、开发环境

系统: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、查找页面内容所在文件:

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

二、开发流程

(一)文件格式

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.四个配置项:
  1. pages:用来记录当前小程序所有页面的路径
  2. window:全局定义小程序所有页面的背景色、文字颜色等
  3. style:全局定义小程序组件所使用的样式版本
  4. 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.配置项:
  1. setting 中保存编译相关配置
  2. projectname 中保存项目名称
  3. 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、查找页面内容所在文件:

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

二、开发流程

(一)文件格式

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.四个配置项:
  1. pages:用来记录当前小程序所有页面的路径
  2. window:全局定义小程序所有页面的背景色、文字颜色等
  3. style:全局定义小程序组件所使用的样式版本
  4. 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.配置项:
  1. setting 中保存编译相关配置
  2. projectname 中保存项目名称
  3. 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

私有单独配置文件优先
私有>全局
  • 8
    点赞
  • 59
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值