【小程序】小程序项目的创建(项目目录结构)
欢迎来到我的博客
📔博主是一名大学在读本科生,主要学习方向是前端。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
🌈博客主页👉codeMak1r.小新的博客😇本文目录😇
本文被专栏【小程序|原力计划】收录
🕹坚持创作✏️,一起学习📖,码出未来👨🏻💻!
前文回顾:
小程序开篇—国内IT技术圈的技能树貌似点歪了?
开发者工具设置
小程序开发者工具默认外观主题是深色模式的,可以在设置中配置自己喜欢的主题样式。
在代理设置中选择,【不使用任何代理,勾选后直连网络】。目的是,防止在开发过程中,电脑上的一些《科学上网软件》(懂得都懂)会影响到开发者工具的正常运行。
创建小程序项目
在开发者工具初始页面点击➕号,创建自己的第一个小程序项目:
选择好自己的项目名称、项目存放路径、AppID(AppID的获取以及开发者账号的注册已经在上一篇文章中有详细说明)。
选择不使用云服务,(云服务开发无需自己搭建服务器上线,即可使用云函数、云数据库、云存储以及微信云托管等完整云端能力。但是需要付费哟~我们目前的阶段是为了学习小程序的开发,无需使用云服务)
点击确定按钮,稍等片刻,即可开启我们的小程序之旅~
看到这样的界面就说明,小程序项目已经创建成功了~(有一说一,这个开发者界面怎么有点眼熟啊(●–●)
在界面的左侧模拟器区域,是对小程序界面的实时热更新的展示,可以在模拟器区域在线查看项目效果(点击上方的编译按钮即可刷新模拟器界面),一个界面即可完成编码与一些简单的功能测试(买显示屏的理由又少了一个)
当然,如果想在自己的手机上预览自己编写的小程序项目,可以点击【预览】按钮,扫描二维码即可预览自己的小程序啦~想必等项目完工的那一刻,自己使用自己开发的小程序的时候,一定是成就感满满趴~
我们在开发的过程中,可能还需要查阅微信官方的开发者文档,在开发者工具页面的上方,点击帮助按钮,即可找到开发者文档入口,点击就会跳转到微信官方开发者文档啦。在这里小新就不做过多的演示了。
小程序项目目录基本结构
- pages 用来存放所有小程序的页面
- utils 用来存放工具性质的模块(例如:格式化时间的自定义模块)
- app.js 小程序项目入口文件
- app.json 小程序项目的全局配置文件
- app.wxss 小程序项目的全局样式文件(类比css)
- project.config.json 项目的配置文件
- sitemap.json 用来配置小程序及其页面是否允许被微信索引
- .js 文件(页面的脚本文件,存放页面的数据、事件处理函数等)
- .json 文件(当前页面的配置文件,配置窗口的外观、表现等)
- .wxml 文件(页面的模版结构文件)
- .wxss 文件(当前页面的样式表文件)
其实就像咱们正常的Web开发一样,只要记住一点:
html ⇒ wxml
css ⇒ wxss
js ⇒ js
json 配置文件:JSON是一种数据格式,在实际开发中,JSON总是以配置文件的形式出现。小程序项目中也不例外:通过不同的
.json
配置文件,可以对小程序项目进行不同级别的配置。小程序项目中大致有以下几种json配置文件
- 项目根目录中的
app.json
配置文件- 项目根目录中的
project.config.json
配置文件- 项目根目录中的
sitemap.json
配置文件- 每个页面文件夹中的
.json
配置文件
app.json
:是当前小程序的全局配置,包括了当前小程序的所有页面路径、窗口外观、界面表现、底部tab 等。Demo 项目里边的app.json
配置内容如下:
{// pages 用来记录当前小程序所有页面的路径 "pages":[ "pages/index/index", "pages/logs/logs" ], // 全局定义小程序所有页面的背景色、文字颜色等 "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }, // 全局定义小程序组件所使用的样式版本 "style": "v2", // 指明sitemap.json 的位置 "sitemapLocation": "sitemap.json"}
project.config.json
是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置,例如:setting
中保存了编译相关的配置;projectname
中保存的是项目名称;appid
中保存的是小程序的账号ID
{ "description": "项目配置文件", "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, "babelSetting": { "ignore": [], "disablePlugins": [], "outputPath": "" } }, "compileType": "miniprogram", "libVersion": "2.19.4", "appid": "wxdxxxxxxxx107", "projectname": "miniprogram-92", "condition": {}, "editorSetting": { "tabIndent": "insertSpaces", "tabSize": 2 }}
setting中保存的其实就是一些本地设置的配置。
比如:勾选【将JS编译成 ES5】其实就是将setting 中的es6 这一项设置为 true
。
勾选【上传代码时样式自动补全】其实就是将setting 中的 postcss 这一项设置为true
。
在本地设置中选择功能的一些操作,最终会体现在根目录下的project.config.json
这个文件的setting
这一项中。
sitemap.json
文件:微信已开放小程序内搜索,效果类似于 PC 网页的 SEO。sitemap.json文件就是用来配置小程序页面是否允许微信索引。
当开发者允许微信索引时,微信会为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。
sitemap.json文件内容:
{ "desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", "rules": [{ "action": "allow", // allow / disallow "page": "*" }]}
rules数组指的就是索引规则,page值为 * 号,action值为 allow,意思就是所有的页面都允许被微信建立索引。
注意:sitemap.json 的索引提示是默认开启的,如需要关闭 sitemap.json 的索引提示,可在小程序项目配置文件 project.config.json
的setting 中配置字段 "checkSiteMap": false
。
- 页面中的
.json
配置文件
小程序中的每一个页面,都可以使用 .json
文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖 app.json
中 window
中相同的配置项,权重高于app.json
。
例如,在app.json
中配置了导航bar的背景色为白色,随后在index/index.json
文件中设置背景色为绿色,此时index页面的配置项会覆盖 app.json
中window的全局配置项,于是模拟器显示绿色。
下篇文章内容:WXML模版|WXSS样式|JS逻辑交互
专栏订阅入口【小程序|原力计划】