微信小程序快速入门【二】

news/2024/7/20 2:55:55 标签: 微信小程序, 小程序, 微信

微信小程序>微信小程序快速入门【二】


在这里插入图片描述


文章目录

    • 微信小程序>微信小程序快速入门【二】
    • 👨‍🏫内容1:背景
    • 👨‍⚖️内容2:项目结构
    • 👨‍💻内容3:项目配置文件app.json
    • 👨‍🚀内容4:项目配置文件project.config.json
    • 🍉文末推荐 👨‍🏫

在这里插入图片描述


👨‍🏫内容1:背景


🙋‍♀️上一篇文章我们已经入门了小程序开发,申请了小程序号,也准备了开发环境,今天我们来分析一下小程序的项目结构。

🌸🌸🌸🌷🌷🌷💐💐💐🌷🌷🌷🌸🌸🌸

👨‍⚖️内容2:项目结构


🎃小程序的项目结构:
👉小程序的项目结构如下图所示,小程序的项目主要包含四种文件:

  • 1️⃣ .json 后缀的 JSON 配置文件
  • 2️⃣ .wxml 后缀的 WXML 模板文件
  • 3️⃣ .wxss 后缀的 WXSS 样式文件
  • 4️⃣ .js 后缀的 JS 脚本逻辑文件


    在这里插入图片描述
🌻🌻🌻🌼🌼🌼🌺🌺🌺🌼🌼🌼🌻🌻🌻

👨‍💻内容3:项目配置文件app.json


🎯app.json
👉JSON 是一种数据格式,在实际开发中,JSON 总是以配置文件的形式出现。app.json 是当前小程序的全局配置,可以通过app.json对小程序项目进行设置所有页面路径、窗口外观、界面表现、底部 tab 等。

在这里插入图片描述

属性类型必填描述
entryPagePathstring小程序默认启动首页
pagesstring[]页面路径列表
windowObject全局的默认窗口表现
tabBarObject底部 tab 栏的表现
networkTimeoutObject网络超时时间
debugboolean是否开启 debug 模式,默认关闭
functionalPagesboolean是否启用插件功能页,默认关闭
subpackagesObject[]分包结构配置
workersstring分包结构配置
requiredBackgroundModesstring[]需要在后台使用的能力,如音乐播放
pluginsObject使用到的插件
preloadRuleObject分包预下载规则
resizablebooleanPC 小程序是否支持用户任意改变窗口大小(包括最大化窗口);iPad 小程序是否支持屏幕旋转。默认关闭
usingComponentsObject全局自定义组件
permissionObject小程序接口权限相关设置
sitemapLocationstring指明 sitemap.json 的位置
stylestring指定使用升级后的weui样式
useExtendedLibObject指定需要引用的扩展库
entranceDeclareObject微信消息用小程序打开
darkmodeboolean小程序支持 DarkMode
themeLocationstring指明 theme.json 的位置,darkmode为true为必填
themeLocationstring配置自定义组件代码按需注入
singlePageObject单页模式相关配置
serviceProviderTicketstring定制化型服务商票据
embeddedAppIdListstring[]半屏小程序 appId
halfPageObject视频号直播半屏场景设置
debugOptionsObject调试相关配置

🎯可以参考下方官方文档:
👉小程序配置 /全局配置



🌏窗口配置:
为了方便了解,下面简单介绍一下必须的配置项
👉app.json 中的部分配置,也支持对单个页面进行配置,可以在页面对应的 .json 文件来对本页面的表现进行配置。
👉页面中配置项在当前页面会覆盖 app.json 中相同的配置项(样式相关的配置项属于 app.json 中的 window 属性,但这里不需要额外指定 window 字段),具体的取值和含义可参考全局配置文档中说明。
在这里插入图片描述
🏖️页面配置:
👉用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
👉未指定 entryPagePath 时,数组的第一项代表小程序的初始页面(首页)。
👉小程序中新增/减少页面,都需要对 pages 数组进行修改。
👇如开发目录为:

在这里插入图片描述

👉其中窗口配置需要了解一下:

属性类型默认值描述
backgroundTextStylestringdark下拉 loading 的样式,仅支持 dark / light
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 #000000
navigationBarTitleTextstring导航栏标题文字内容
navigationBarTextStylestringwhite导航栏标题颜色,仅支持 black / white

🎯更多配置可以参考下方官方文档:
👉小程序配置 /页面配置



🏄 其他配置:
👉style是指定使用升级后的weui样式,sitemapLocation是指明sitemap.json的位置,开发者可以通过 sitemap.json 配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。

🌻🌻🌻🌼🌼🌼🌺🌺🌺🌼🌼🌼🌻🌻🌻

🎯tarbar
👉我们之前创建的测试项目页面很简单,在实际的项目中可能包含多个tab,其中tab的内容是靠tabBar配置项去配置的。可以通过 tabBar 配置项指定tab栏的表现,以及tab切换时显示的对应页面。
👇其具体属性如下:

属性类型必填默认值描述
colorHexColortab 上的文字默认颜色,仅支持十六进制颜色
selectedColorHexColortab 上的文字选中时的颜色,仅支持十六进制颜色
backgroundColorHexColortab 的背景色,仅支持十六进制颜色
borderStylestringblacktabbar 上边框的颜色, 仅支持 black / white
listArraytab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab
positionstringbottomtabBar 的位置,仅支持 bottom / top
customboolean自定义 tabBar
👉其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:
属性类型必填描述
pagePathstring页面路径,必须在 pages 中先定义
textstringtab 上按钮文字
iconPathstring图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。 当 position 为 top 时,不显示 icon。
selectedIconPathstring选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。 当 position 为 top 时,不显示 icon。
👇下面我们举个案例:

在这里插入图片描述



👉效果图:

在这里插入图片描述

🐾🐾🐾🐾🐾🐾🐾🐾🐾🐾🐾🐾

👨‍🚀内容4:项目配置文件project.config.json


🎯project.config.json
👉通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。
👉考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个 project.config.json,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项.
👇其具体配置项如下表:

字段名类型说明
miniprogramRootPath String指定小程序源码的目录(需为相对路径)
qcloudRootPath String指定腾讯云项目的目录(需为相对路径)
pluginRootPath String指定插件项目的目录(需为相对路径)
cloudbaseRootPath String云开发代码根目录(需为相对路径)
cloudfunctionRootPath String云函数代码根目录(需为相对路径)
cloudfunctionTemplateRootPath String云函数本地调试请求模板的根目录(需为相对路径)
cloudcontainerRootPath String云托管代码根目录(需为相对路径)
compileTypeString编译类型
settingObject项目设置
libVersionString基础库版本
appidString项目的 appid,只在新建项目时读取
projectnameString项目名字,只在新建项目时读取
packOptionsObject打包配置选项
debugOptionsObject调试配置选项
watchOptionsObject文件监听配置设置
scriptsObject自定义预处理
staticServerOptionsObject仅在小游戏项目中有效
🔮🔮🔮🔮🔮🔮🔮🔮🔮🔮🔮🔮

🍉文末推荐 👨‍🏫


🎃Java 核心技术大特邀启动专场会:
👉人工智能在22年、23年的再次爆发让Python成为编程语言里最大的赢家;云原生的持续普及令Go、Rust等新生的语言有了进一步叫板传统技术体系的资本与底气。我们必须承认在近几年里,Java阵营的确受到了前所未有的挑战,出现了更多更强大的竞争者。
👉但是,迄今Java仍然有着非常庞大的开发者生态,仍是使用人数最多的编程语言,仍是服务端应用、大数据应用、企业级产品的首选。
👉本届技术大会由国内Java技术传播领军机构机械工业出版社华章分社发起,周志明、李三红、杨晓峰三位大会主席,与近30位国内外顶级专家将从Java语言、平台和趋势,Java应用开发和系统架构,以及Java性能优化等方面带来8大专场,24场主题分享。2023年6月25日-7月1日,让我们相约「 Java核心技术大会 」!

1️⃣特邀启动专场:
在这里插入图片描述

2️⃣Java语言、平台和趋势专场:
在这里插入图片描述

3️⃣Java应用开发专场:
在这里插入图片描述

4️⃣Java应用与系统架构专场:
在这里插入图片描述

5️⃣Java应用性能优化专场:
在这里插入图片描述

6️⃣大数据与数据库专场:
在这里插入图片描述

7️⃣云原生与Serverless专场:
在这里插入图片描述

8️⃣AI驱动的Java编程专场:
在这里插入图片描述

🎤现场参与更有:
1️⃣赢取Java核心技术 纸书&视频课
2️⃣带走CoreJava限量周边
3️⃣锁定购物袋超秒福利
4️⃣加入交流群,向专家请教、学习
5️⃣第一时间获取PPT等增值资源
在这里插入图片描述

🧀参与形式:
👉关注➕点赞➕收藏➕评论,每人最多可以评论三条,随机抽取3位小伙伴免费送书一本【卷一、卷二任选一本】🍿

🧀抽奖时间:
⏰2023-06-30 18:00
在这里插入图片描述

在这里插入图片描述


http://www.niftyadmin.cn/n/465290.html

相关文章

简单图论+二分搜索:环境治理

题目描述 LQ 国拥有 n 个城市, 从 0 到 n−1 编号, 这 n 个城市两两之间都有且仅有 一条双向道路连接, 这意味着任意两个城市之间都是可达的。每条道路都有一 个属性 D, 表示这条道路的灰尘度。当从一个城市 A 前往另一个城市 B 时, 可 能存在多条路线, 每条路线的灰尘度定义为…

HarmonyOS学习路之开发篇—AI功能开发(文档检测校正)

基本概念 文档校正提供了文档翻拍过程的辅助增强功能,包含两个子功能: 文档检测:能够自动识别图片中的文档,返回文档在原图中的位置信息。这里的文档泛指外形方正的事物,比如书本、相片、画框等。文档校正&#xff1a…

RabbitMQ安装以及SpringBoot整合RabbitMQ

SpringBootMQ整合Rabbit RabbitMQ安装以及SpringBoot整合 1、Docker安装RabbitMQ #拉取rabbitmq镜像 docker pull rabbitmq#启动RabbitMQ docker run -d --hostname my-rabbit --name rabbit -p 15672:15672 -p 5672:5672 rabbitmq#安装图形化插件 #进入容器 docker exec -i…

1分钟教你从0-1搭建Monorepo多包项目

1、monorepo是啥 在了解Monorepo之前,先说一下Multirepo Multirepo:指定的是不同项目由不同的仓库来存放管理 每个仓库都维护着各项目的npm包依赖 Monorepo指的是包含多个项目的单个仓库。 各个项目可以单独运行、打包、发布 Multirepo:分散式…

【光伏集群、需求响应】市场模式下光伏用户群的电能共享与需求响应模型(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

【yocto1】利用yocto工具构建嵌入式Linux系统

文章目录 1.获取Yocto软件源码2.初始化Yocto构建目录2.1 imx-setup-release.sh脚本运行2.2 imx-setup-release.sh脚本解析2.2.1 setup-environment脚本解析 3.构建嵌入式Linux系统3.1 BitBake构建系统3.2 BitBake构建系统过程简要解析3.2.1 解析Metadata基本配置Metadatarecipe…

VUE L ClassStyle ⑦

目录 文章有误请指正,如果觉得对你有用,请点三连一波,蟹蟹支持✨ V u e j s Vuejs Vuejs C l a s s Class Class与 S t y l e Style Style绑定总结 文章有误请指正,如果觉得对你有用,请点三连一波,蟹蟹支持…

金鸡湖赛龙舟 | 璞华龙舟队飞舟竞渡,荣获“最佳团队拼搏奖”!

端阳佳节可人天,溪北溪南竞斗船。 金鼓声喧齐喝彩,锦标争夺看谁先。 ——《漳州四时竹枝词》 今天(6月22日),2023中国电信"hello 5G"杯金鸡湖端午龙舟赛在金鸡湖城市广场举行。一年一度的龙舟赛,…