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

这篇具有很好参考价值的文章主要介绍了微信小程序快速入门【二】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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


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


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


👨‍🏫内容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 等。

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

属性 类型 必填 描述
entryPagePath string 小程序默认启动首页
pages string[] 页面路径列表
window Object 全局的默认窗口表现
tabBar Object 底部 tab 栏的表现
networkTimeout Object 网络超时时间
debug boolean 是否开启 debug 模式,默认关闭
functionalPages boolean 是否启用插件功能页,默认关闭
subpackages Object[] 分包结构配置
workers string 分包结构配置
requiredBackgroundModes string[] 需要在后台使用的能力,如音乐播放
plugins Object 使用到的插件
preloadRule Object 分包预下载规则
resizable boolean PC 小程序是否支持用户任意改变窗口大小(包括最大化窗口);iPad 小程序是否支持屏幕旋转。默认关闭
usingComponents Object 全局自定义组件
permission Object 小程序接口权限相关设置
sitemapLocation string 指明 sitemap.json 的位置
style string 指定使用升级后的weui样式
useExtendedLib Object 指定需要引用的扩展库
entranceDeclare Object 微信消息用小程序打开
darkmode boolean 小程序支持 DarkMode
themeLocation string 指明 theme.json 的位置,darkmode为true为必填
themeLocation string 配置自定义组件代码按需注入
singlePage Object 单页模式相关配置
serviceProviderTicket string 定制化型服务商票据
embeddedAppIdList string[] 半屏小程序 appId
halfPage Object 视频号直播半屏场景设置
debugOptions Object 调试相关配置

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



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

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

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

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

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



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

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

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

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

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



👉效果图:

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

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

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


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

字段名 类型 说明
miniprogramRoot Path String 指定小程序源码的目录(需为相对路径)
qcloudRoot Path String 指定腾讯云项目的目录(需为相对路径)
pluginRoot Path String 指定插件项目的目录(需为相对路径)
cloudbaseRoot Path String 云开发代码根目录(需为相对路径)
cloudfunctionRoot Path String 云函数代码根目录(需为相对路径)
cloudfunctionTemplateRoot Path String 云函数本地调试请求模板的根目录(需为相对路径)
cloudcontainerRoot Path String 云托管代码根目录(需为相对路径)
compileType String 编译类型
setting Object 项目设置
libVersion String 基础库版本
appid String 项目的 appid,只在新建项目时读取
projectname String 项目名字,只在新建项目时读取
packOptions Object 打包配置选项
debugOptions Object 调试配置选项
watchOptions Object 文件监听配置设置
scripts Object 自定义预处理
staticServerOptions Object 仅在小游戏项目中有效
🔮🔮🔮🔮🔮🔮🔮🔮🔮🔮🔮🔮

🍉文末推荐 👨‍🏫


🎃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
微信小程序快速入门【二】

微信小程序快速入门【二】文章来源地址https://www.toymoban.com/news/detail-500020.html

到了这里,关于微信小程序快速入门【二】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序快速入门【一】

    🙋‍♀️自2017年微信推出《微信小程序》以来,阿里、百度、字节跳动等一众大佬平台相继也推出了自己的小程序体系。 👉由于微信自身的强势社交属性,以及其对小程序的战略定位(连接人与服务)的前提下进行了持续的大力支持,所以到目前为止,微信小程序还是所有

    2024年02月08日
    浏览(34)
  • 微信小程序快速入门02(含案例)

    🏡浩泽学编程 :个人主页  🔥 推荐专栏 :《深入浅出SpringBoot》《java项目分享》               《RabbitMQ》《Spring》《SpringMVC》 🛸学无止境,不骄不躁,知行合一 讲诉内容:页面导航、页面事件。 页面导航指的是 页面之间的相互跳转 。例如,浏览器中实现页面导

    2024年02月02日
    浏览(41)
  • 微信小程序前后端开发快速入门(完结篇)

    这篇是微信小程序前后端快速入门完结篇了,今天利用之前学习过的所有知识做一个新的项目「群登记助手v1.0」小程序。 整体技术架构:小程序原生前端+小程序云开发。 经历了前面教程的学习,大家有了一定的基础,所以本次分享重心主要是带着大家理清楚逻辑相关的云开

    2024年02月12日
    浏览(31)
  • 从0到1之微信小程序快速入门(03)

    目录 什么是生命周期函数 WXS脚本   ​编辑 与 JavaScript 不同 纯数据字段  组件生命周期 定义生命周期方法 代码示例 组件所在页面的生命周期 代码示例 插槽 什么是插槽 启用多插槽  ​编辑 定义多插槽  组件通信 组件间通信 监听事件 触发事件 获取组件实例 自定义的组

    2024年02月03日
    浏览(41)
  • 从0到1之微信小程序快速入门(02)

    目录 页面导航 - 声明式导航 1. 导航到 tabBar 页面 2. 导航到非 tabBar 页面 3. 后退导航 ​编辑 页面导航 - 编程式导航 页面导航 - 导航传参  页面事件 - 下拉刷新事件  监听下拉刷新事件 停止下拉刷新的效果 页面事件 - 上拉触底事件 监听页面的上拉触底事件  配置上拉触底距

    2024年02月07日
    浏览(39)
  • 从零开始快速搭建SpringBoot+Mybatis+小程序应用--微信小程序的入门和前后端的联调

    目录 项目介绍  vx小程序简介 VX开发工具介绍 列表页开发 list的编写   列表页前后端联调  信息编辑页开发 operation的编写 区域信息编辑页的联调 从0搭建后端的Springboot+mybatis框架 实现后端的业务功能 实现本地微信小程序的前端开发 前端与后端的调控 技术储备要求 1.基础的

    2024年02月10日
    浏览(54)
  • 【微信小程序入门到精通】— 轮播图你会了么?快速拿下 swiper 和 swiper-item

    对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢? 为此我特意开设此专栏,在我学习的同时也将其分享给大家! 本篇文章主要介绍我们微信小程序常用的视图容器类组件,对于 swiper 和 swiper-item 我们将逐一讲解。 如果在往下阅读

    2024年02月20日
    浏览(41)
  • 【微信小程序 | 实战开发】配置微信小程序APPID并快速接入

    你是否想要掌握人工智能的最新技术和应用?你是否想要成为未来社会的创新者和领导者?你是否想要和全球的优秀导师和同学一起学习和交流?如果你的答案是肯定的,那么欢迎来到床长人工智能教程网站,这里是你实现梦想的起点! 个人名片: 🐼 作者简介:一名大一在

    2024年01月24日
    浏览(49)
  • 微信小程序实现快速精确定位

    腾讯位置服务注册 前置需求:拥有一个 APPID(只要你注册了小程序就都会有) 腾讯为每个独立开发者都准备了 10000次/天 的接口调用量,足够我们开发使用了 前往腾讯位置服务官网:https://lbs.qq.com/ 注册一个账号 点击 控制台-应用管理-我的应用 点击创建新的应用,应用名称

    2024年02月05日
    浏览(33)
  • uniapp微信小程序消息订阅快速上手

    这边的模板id和详细内容后续前后端需要使用 需要是一个button触发 js: 其中thing2、phrase3是模板的字段名,根据自己模板去修改即可 HttpClient.java

    2024年02月12日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包