请通读全文、切勿随机阅读、以便快速掌握
一、开发环境
系统: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、开发页面
文章来源:https://www.toymoban.com/news/detail-444405.html
文章来源地址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.四个配置项:
- 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
私有单独配置文件优先
私有>全局
到了这里,关于微信小程序开发知识结构体系大全/图解(2022)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!