微信小程序开发【贰】

news2024/9/24 6:01:06

随手拍拍💁‍♂️📷


日期: 2023.01.28
地点: 台州
介绍: 吃完午饭后走在门前的步行道上,恰逢疫情高峰,整条步行道上只有我一个人,旁边的河面上时而掠过几只水鸟,试图打破这宁静的画面。墙上的涂鸦见证了疫情的开始,以及它的结束。
在这里插入图片描述

🐣🐣🐣🐣🐣往期回顾 🐣🐣🐣🐣🐣
微信小程序开发【壹】
🔗 http://t.csdn.cn/JFg5c

文章目录

    • 随手拍拍💁‍♂️📷
    • 👨‍🏫内容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仅在小游戏项目中有效
🔮🔮🔮🔮🔮🔮🔮🔮🔮🔮🔮🔮

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/376831.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

华为OD机试题,用 Java 解【人数最多的站点】问题

最近更新的博客 华为OD机试题,用 Java 解【停车场车辆统计】问题华为OD机试题,用 Java 解【字符串变换最小字符串】问题华为OD机试题,用 Java 解【计算最大乘积】问题华为OD机试题,用 Java 解【DNA 序列】问题华为OD机试 - 组成最大数(Java) | 机试题算法思路 【2023】使…

华为OD机试题,用 Java 解【最小传递延迟】问题

最近更新的博客 华为OD机试题,用 Java 解【停车场车辆统计】问题华为OD机试题,用 Java 解【字符串变换最小字符串】问题华为OD机试题,用 Java 解【计算最大乘积】问题华为OD机试题,用 Java 解【DNA 序列】问题华为OD机试 - 组成最大数(Java) | 机试题算法思路 【2023】使…

Java-扑克牌的创建以及发放

Java-扑克牌的创建以及发放题目:创建一个扑克牌(不需要包含大小王),分别分发给3个人,一个人发5张牌,输出结果要求包含全套牌(52张牌),以及3个人各自的牌的花色以及数字。1.扑克牌的源代码2.扑克牌运行结果3.扑克牌代码…

一种多场景通用备份容灾方案

导购链路中,因为业务对SLA的要求和下游无法保持一致,导致很多业务场景需要使用备份容灾。如当业务依赖的下游偶现异常或者超时的情况,在下游无法提供强依赖的数据时,为保证不空窗且当前业务对数据实时性要求不高时,可以…

【数据结构】单链表的C语言实现--万字详解介绍

​ ​📝个人主页:Sherry的成长之路 🏠学习社区:Sherry的成长之路(个人社区) 📖专栏链接:数据结构 🎯长路漫漫浩浩,万事皆有期待 文章目录1.链表1.1 链表的概念…

基于MSAM-YOLOv5的内河航道船舶识别方法

摘 要 针对内河航道上无人船识别目标时受背景复杂性和分布多样性影响而存在漏检的问题,提出了一种基于YOLOv5(you only look once)的算法。首先,提出了一种注意力模块MSAM(multiscale attention module,多尺度注意力模块),MSA…

【新型密集采样网络:遥感超分】

Remote Sensing Image Super-Resolution Using Novel Dense-Sampling Networks (基于新型密集采样网络的遥感图像超分辨率) 超分辨率技术在提高遥感数据的空间分辨率、克服星载成像系统的物理限制等方面发挥着重要作用。基于卷积神经网络(C…

可视化技术第一节课

主要内容通过echarts实现在网页上显示图表实现不同类型图表的转换实际操作&#xff08;1&#xff09;安装echarts如果想要安装echarts可以参考&#xff1a;安装步骤当然我们可以直接在我们的代码里面添加连接直接引用<script src"http://cdn.bootcss.com/echarts/4.8.0…

buu [BJDCTF2020]rsa_output 1 SameMod 1

[BJDCTF2020]rsa_output 1&#xff1a; 题目描述&#xff1a; {210583393373542878475341075446136053050154410905089240941988166912191033995268001128024163830889952539088574602667269256158268953033778016148293640346244751958599979431463055883159391307774504851…

2.27日报

情报上传接口添加字段&#xff1a;问题分配 调试手机号登录接口 解决困惑已久的bug&#xff1a;解析不到token; 问题描述&#xff1a; 在局域网下&#xff0c;前端页面请求时在请求头里携带token信息&#xff0c;后台获取不到header里的token参数&#xff0c;但是使用postma…

阶段八:服务框架高级(第六章:ElasticSearch3)

阶段八&#xff1a;服务框架高级&#xff08;第六章&#xff1a;ElasticSearch3&#xff09;Day-第六章&#xff1a;ElasticSearch分布式搜索引擎30.学习目标1.数据聚合1.1.聚合的种类1.2.DSL实现聚合1.2.1.Bucket聚合语法&#xff08;桶聚合&#xff09;1.2.2.聚合结果排序1.2…

软件测试面试题 —— 整理与解析(2)

&#x1f60f;作者简介&#xff1a;博主是一位测试管理者&#xff0c;同时也是一名对外企业兼职讲师。 &#x1f4e1;主页地址&#xff1a;&#x1f30e;【Austin_zhai】&#x1f30f; &#x1f646;目的与景愿&#xff1a;旨在于能帮助更多的测试行业人员提升软硬技能&#xf…

python学生信息管理系统

wx供重浩&#xff1a;创享日记 对话框发送&#xff1a;python学生信息 免费获取完整源码源文件配置教程说明等 在IDLE中运行《学生信息管理系统》即可进入如图1所示的系统主界面。在该界面中可以选择要使用功能对应的菜单进行不同的操作。在选择功能菜单时&#xff0c;有两种方…

SpringBoot2入门 第一个HelloWorld(参考尚硅谷SpringBoot2零基础入门教程)

文章目录0 官方文档1 系统要求2 maven设置3 HelloWorld3.0 需求3.1 创建Maven工程3.2 引入依赖3.3 创建主程序3.4 编写业务3.5 测试3.6 简化配置3.7 简化部署0 官方文档 https://docs.spring.io/spring-boot/docs/2.3.4.RELEASE/reference/html/index.html 1 系统要求 想要运…

RFS自动化测试工具安装与使用总结

一&#xff0c;调试 1&#xff0c;在调试时&#xff0c;总时提示“无法打开浏览器” 解决办法&#xff1a; 1&#xff0c;把浏览器的代理关闭 2&#xff0c;把浏览器的显示比例调到100% 3&#xff0c;在IE设置的安全选项中&#xff0c;把启用保护模式开启 4&#xff0c;去除进…

layui框架学习(12:进度条)

进度条是应用系统中的常见元素&#xff0c;无论是上传文件、下载文件、加载内容时都会显示进度条&#xff0c;Layui支持设置线条形进度条的样式&#xff0c;同时支持通过element模块动态操作进度条。   进度条样式分为两级结构&#xff0c;顶层一般为div元素&#xff0c;其cl…

【Opencv项目实战】背景替换:动态背景移除与替换(cvzone)

文章目录一、项目思路二、环境布置2.1、cvzone安装2.2、MediaPipe安装2.3、常见问题2.4、注意事项三、算法详解3.1、segmentor.removeBG()&#xff1a;去除背景&#xff08;抠出图像中的人&#xff09;3.2、cvzone.stackImages()&#xff1a;堆叠图像3.3、fpsReader.update()&a…

Hot Chocolate 构建 GraphQL .Net Core 服务

Hot Chocolate 是 .NET 平台下的一个开源组件库, 您可以使用它创建 GraphQL 服务, 它消除了构建成熟的 GraphQL 服务的复杂性, Hot Chocolate 可以连接任何服务或数据源&#xff0c;并创建一个有凝聚力的服务&#xff0c;为您的消费者提供统一的 API。 我会在 .NET 应用中使用…

mysql一两种索引方式hash和btree

1. Hash索引&#xff1a; Hash 索引结构的特殊性&#xff0c;其检索效率非常高&#xff0c;索引的检索可以一次定位&#xff0c;不像B-Tree 索引需要从根节点到枝节点&#xff0c;最后才能访问到页节点这样多次的IO访问&#xff0c;所以 Hash 索引的查询效率要远高于 B-Tree 索…

FFmpeg 编译和集成

背景FFmpeg 是一款知名的开源音视频处理软件&#xff0c;它提供了丰富而友好的接口支持开发者进行二次开发。FFmpeg 读作 “ef ef em peg” &#xff0c;其中的 “FF” 指的是 “Fast Forward”&#xff0c;“mpeg” 则是 “Moving Picture Experts Group” &#xff08;动态图…