小程序的构成
目录
小程序的构成
1.项目结构
1.1 项目的基本组成结构
1.1.1 p a g e s ( 目 录 ) \textcolor{MediumBlue}{pages(目录)} pages(目录)
1.1.2 utils(目录)
1.1.3 a p p . j s \textcolor{MediumBlue}{app.js} app.js
1.1.4 a p p . j s o n \textcolor{MediumBlue}{app.json} app.json
1.1.5 app.wxss
1.1.6 project.config.json
1.2 页面的基本文件(组成部分)
2.JSON-配置文件(配置文件)
2.1 p a g e s \textcolor{MediumBlue}{pages} pages
2.2 w i n d o w \textcolor{MediumBlue}{window} window
2.3 s t y l e \textcolor{MediumBlue}{style} style
2.4 sitemapLocation
3.WXSS-美化页面(样式文件)
3.1 新增了 rpx 尺寸单位
3.2 提供全局样式和局部样式
3.3 仅支持部分CSS选择器
4.WXML-渲染页面(结构文件)
4.1 WXML标签名称
4.2 属性节点
4.3 类似于Vue中的模板语法
5.JS-逻辑交互(脚本文件)
5.1 app.js
5.2 页面的 .js 文件
5.3 普通的.js文件
6.小程序的宿主环境
6.1 小程序宿主环境的内容
6.1.1 通信模型
6.1.2 运行机制
小程序的启动过程
6.1.3 组件
6.1.3.1 常用的视图容器类组件
6.1.3.2 常用的基础内容组件
6.1.4 API
7.小程序协同分工与分布
7.1 协同分工
7.1.1 项目成员的组织结构
7.1.2 开发者权限说明
7.1.3 小程序成员管理
7.1.4 小程序的开发流程
7.2 小程序的发布
7.2.1 小程序的版本
7.2.2 发布上线
1.上传代码
2.后台查看上传的版本
3.发布
1.项目结构
1.1 项目的基本组成结构
1.1.1 p a g e s ( 目 录 ) \textcolor{MediumBlue}{pages(目录)} pages(目录)
用来存放所有小程序页面
所有的页面都以单独的文件夹放在pages目录中
1.1.2 utils(目录)
用来存放工具性质的模块(例如:格式化事件的自定义模块)
1.1.3 a p p . j s \textcolor{MediumBlue}{app.js} app.js
小程序项目的入口文件
1.1.4 a p p . j s o n \textcolor{MediumBlue}{app.json} app.json
小程序项目的全局配置文件
1.1.5 app.wxss
小程序项目的全局样式文件
1.1.6 project.config.json
项目的配置文件
小程序开发者工具在每个项目的根目录只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
项目配置文件
可以在项目根目录使用 project.config.json 文件对项目进行配置。
字段名
类型
说明
miniprogramRoot
Path String
指定小程序源码的目录(需为相对路径)
qcloudRoot
Path String
指定腾讯云项目的目录(需为相对路径)
pluginRoot
Path String
指定插件项目的目录(需为相对路径)
compileType
String
编译类型
setting
Object
项目设置
libVersion
String
基础库版本
appid
String
项目的 appid，只在新建项目时读取
projectname
String
项目名字，只在新建项目时读取
packOptions
Object
打包配置选项
debugOptions
Object
调试配置选项
scripts
Object
自定义预处理
compileType 有效值
名字
说明
miniprogram
当前为普通小程序项目
plugin
当前为小程序插件项目
setting 中可以指定以下设置
字段名
类型
说明
es6
Boolean
是否启用 es6 转 es5
postcss
Boolean
上传代码时样式是否自动补全
minified
Boolean
上传代码时是否自动压缩
urlCheck
Boolean
是否检查安全域名和 TLS 版本
setting示例配置:
"setting": {
"urlCheck": true,
"es6": true,
"enhance": true,
"postcss": true,
"preloadBackgroundData": false,
"minified": true,
"newFeature": false,
"coverView": true,
"nodeModules": false,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false,
"uglifyFileName": false,
"checkInvalidKey": true,
"checkSiteMap": false,
"uploadWithSourceMap": true,
"compileHotReLoad": false,
"lazyloadPlaceholderEnable": false,
"useMultiFrameRuntime": true,
"useApiHook": true,
"useApiHostProcess": true,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"enableEngineNative": false,
"useIsolateContext": true,
"userConfirmedBundleSwitch": false,
"packNpmManually": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"disableUseStrict": false,
"minifyWXML": true,
"showES6CompileOption": false,
"useCompilerPlugins": false
},
scripts 中指定自定义预处理的命令
名字
说明
beforeCompile
编译前预处理命令
beforePreview
预览前预处理命令
beforeUpload