草庐IT

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

REMLILI 2023-11-03 原文

小程序开发


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

一、开发环境

系统: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

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

有关微信小程序开发知识结构体系大全/图解(2022)的更多相关文章

  1. ruby - 使用 C 扩展开发 ruby​​gem 时,如何使用 Rspec 在本地进行测试? - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时,我会遵循TDD的过程,我会写一个失败的规范,然后处理代码直到它通过,等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb,如何运行我的规范并仍然加载我的C扩展?当我更改C代码时,我需要采取哪些步骤来重新编译代码?这可能是个愚蠢的问题,但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时,我确实得到了一个Makefile(在整个项目的根目录中),然后当

  2. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序,它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择,是开发还是生产,一些方法的逻辑应该改变,这取决于部署类型。是否有任何想法,如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现? 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  3. ruby - 是否可以覆盖 gemfile 进行本地开发? - 2

    我们的git存储库中目前有一个Gemfile。但是,有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它,我必须将它添加到我们的Gemfile中,但每次我checkout到我们的master/dev主分支时,由于与跟踪的gemfile冲突,我必须删除它。我想要的是类似Gemfile.local的东西,它将继承从Gemfile导入的gems,但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗? 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

  4. ruby - 在 Windows 机器上使用 Ruby 进行开发是否会适得其反? - 2

    这似乎非常适得其反,因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby​​-mysqlgem问题(gem本身发生段错误,一个名为UnixSocket的类显然在Windows机器上不能正常工作,等等)。我只是在浪费时间吗?我应该转向不同的脚本语言吗? 最佳答案 我在Windows上使用Ruby的经验很少,但是当我开始使用Ruby时,我是在Windows上,我的总体印象是它不是Windows原生系统。因此,在主要使用Windows多年之后,开始使用Ruby促使我切换回原来的系统Unix,这次是Linux。Rub

  5. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器,但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型,并且只返回text/plain,如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  6. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  7. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中,有时候我们需要获取系统的设备信息,用于数据上报和行为分析。那在鸿蒙系统中,我们应该怎么去获取设备的系统信息呢,比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况,一种是设备信息的获取,一种是系统信息的获取。1.1、获取设备信息获取设备信息,鸿蒙的SDK包为我们提供了DeviceInfo类,通过该类的一些静态方法,可以获取设备信息,DeviceInfo类的包路径为:ohos.system.DeviceInfo.具体的方法如下:ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  8. 7个大一C语言必学的程序 / C语言经典代码大全 - 2

    嗨~大家好,这里是可莉!今天给大家带来的是7个C语言的经典基础代码~那一起往下看下去把【程序一】打印100到200之间的素数#includeintmain(){ inti; for(i=100;i 【程序二】输出乘法口诀表#includeintmain(){inti;for(i=1;i 【程序三】判断1000年---2000年之间的闰年#includeintmain(){intyear;for(year=1000;year 【程序四】给定两个整形变量的值,将两个值的内容进行交换。这里提供两种方法来进行交换,第一种为创建临时变量来进行交换,第二种是不创建临时变量而直接进行交换。1.创建临时变量来

  9. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  10. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

随机推荐