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

这篇具有很好参考价值的文章主要介绍了微信小程序开发知识结构体系大全/图解(2022)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


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

一、开发环境

系统: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、创建项目

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

2、开发页面

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

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

微信小程序开发知识结构体系大全/图解(2022)文章来源地址https://www.toymoban.com/news/detail-444405.html

三、文件详解

(一)项目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、创建项目

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

2、开发页面

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

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

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

三、文件详解

(一)项目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

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

到了这里,关于微信小程序开发知识结构体系大全/图解(2022)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 一文看懂大数据生态圈完整知识体系【大数据技术及架构图解实战派】

    一文看懂大数据生态圈完整知识体系 徐葳 随着大数据行业的发展,大数据生态圈中相关的技术也在一直迭代进步 ,作者有幸亲身经历了国内大数据行业从零到一的发展历程,通过本文希望能够帮助大家快速构建大数据生态圈完整知识体系。 目前大数据生态圈中的核心技术

    2024年02月11日
    浏览(50)
  • 【java】【ssm】【微信小程序】 初级移动医院预约系统成品代码动态网站开发网页WEB浏览器端B/S结构移动微信小程序端项目

    本系统是使用java语言结合mysql数据库开发的医院预约系统,后台管理是网页WEB浏览器端B/S结构,移动端是微信小程序。 其中分为前端和后台。 前端主要是患者预约使用,包括预约、医生详情查看、医生列表查询、个人中心等。 后台则是对系统的所有数据进行管理。 后台用户

    2024年02月03日
    浏览(50)
  • 【体系结构】山东大学计算机体系结构知识点清单

    涵盖所有考点,复习绝对高效,点赞+留邮箱获取pdf版本 1. 计算机系统的层次结构 语言实现的两种基本技术: 翻译:先把 N+1 级程序全部转换成 N 级程序后,再去执行新产生的 N 级程序,在执行过程中 N+1 级程序不再被访问。 解释:每当一条 N+1 级指令被译码后,就直接去执

    2024年02月11日
    浏览(74)
  • 微信小程序开发 | 小程序开发框架

    2023年04月17日
    浏览(43)
  • 【Linux】冯诺依曼体系结构与进程的基础知识点

    计算器、笔记本、服务器大都遵循冯诺依曼体系结构。 结构如下图所示: 外设:速度相对慢,价格相对较低(输入输出设备都属于外设) 内存:速度相对快,价格相对较高,数据掉电易失 CPU:速度最快,价格高 1.那么是否可以不通过存储器,直接使用输入设备将数据传给

    2023年04月24日
    浏览(48)
  • 微信小程序开发教程:项目二微信小程序开发基础 课后习题

    《微信小程序开发教程》主编/黄寿孟 易芳 陶延涛 湖南大学出版社 目录 一、单选题 二、多选题 三、判断题 四、填空题 五、简答题 1.请简单描述页面样式的单位rpx与px的关系。 2.简单地介绍开发常用页面组件。 六、编程题 1.请编写一个商品列表页面,展示商品名称和价格。

    2024年02月09日
    浏览(54)
  • 小程序开发-后端基础知识(上)

    本章主要介绍后端开发所需要的基础知识,包括HTTP请求、服务端处理、数据库操作等。学习者将会学到: HTTP请求的基础知识和处理方法 服务端开发的基础知识 数据库操作的基础知识 理解并熟练掌握后端基础知识对于协调前后端交互,以及开发小程序后台服务有着关键作用

    2024年02月06日
    浏览(38)
  • 计算机体系结构基础知识介绍之指令级并行性:概念和挑战

    自 1985 年以来,所有处理器都使用流水线来重叠指令的执行并提高性能。 指令之间的这种潜在重叠称为指令级并行性(ILP)。  具体来说:流水线和指令级并行是两个相关的概念。 流水线是一种将每条指令分解为多个阶段,并让不同阶段的操作重叠进行的一种技术,可以提

    2024年02月13日
    浏览(45)
  • 微信小程序开发—添加开发者

    微信公众平台 (qq.com)

    2023年04月18日
    浏览(49)
  • 微信公众号开发和小程序开发

    公众号开发,需要的后端技术,是把一个后台服务注册到公众号,这样用户通过微信发给公众号的消息,都经过微信转发到后台服务了,这个后台服务要在5秒内响应,如果没有响应则触发重试机制,重试3次没有响应,连接将断开。 小程序开发需要的是前端技术,我们按照微

    2024年02月07日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包