【前端】小程序开发入门:安装开发工具、目录结构与项目配置

news/2024/7/20 1:54:40 标签: 前端, 微信小程序, 小程序

文章目录

    • 前期准备
    • 目录结构
    • app.json
      • pages
      • window
    • 其他

前期准备

开发小程序要先申请一个对应的AppID:小程序>微信小程序 (qq.com)

微信官方小程序开发文档:微信开放文档 (qq.com)

然后安装一个小程序开发工具:

在这里插入图片描述
选择稳定版:

在这里插入图片描述
安装后打开:

在这里插入图片描述
新建一个小程序,名字什么的随便写,注意:学习阶段不使用云服务

在这里插入图片描述

目录结构

新建完小程序后,会自动生成很多文件,我们对它们进行说明。

在这里插入图片描述
其中:app.json是整个小程序的配置。很重要。

json文件不支持注释。

app.json

pages

pages用于注册页面。所有要显示的页面都必须在pages中注册。

在这里插入图片描述
新建一个页面有两种方法:

方法1

先新建文件夹,在文件夹中新建page,会生成四个文件:js页面逻辑,json页面配置,wxml页面结构,wxss页面样式。

在这里插入图片描述
对应的app.json中的pages会自动注册:

在这里插入图片描述
方法2
在app.json中手动写上文件路径,则会自动生成对应四个文件:

在这里插入图片描述

window

这里的window指的是窗口。我们可以通过window来配置样式等。

默认为:

在这里插入图片描述
更改配置:

在这里插入图片描述

其他

详见官方文档。

在这里插入图片描述
微信开放文档 (qq.com)


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

相关文章

程序员的接单外卖平台

今天王同学给大家安利一款非常实用并且能接单的一款非常好的平台—— 独自开 独自开的功能非常之多 简直不要太香~ 集成第三方数学接口,形成标准化解决方案,提供开发者调用 支付分账功能电子签单功能税务接口硬件接口 独自开的开发功能简直不要太多~ 如…

Linux系列 linux 常用命令(笔记)

作者简介:一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭:低头赶路,敬事如仪 个人主页:网络豆的主页​​​​​​ 目录 前言 一.linux 常用命令(目录文和件基本操作) 1.命令的分类…

实验室设计SICOLAB第三方检测中心实验室设计

第三方检测中心实验室怎么设计?详细设计内容有哪些?功能区域有哪些?仪器有哪些?要多少面积?第三方检测中心实验室是一种独立的实验室,为客户提供各种测试和分析服务。以下是一个第三方检测中心实验室的详细…

图数据库中的 OLTP 与 OLAP 融合实践

在一些图计算的场景下,我们会遇到同时需要处理 OLTP 和 OLAP 的问题。而本文就给了一个 OLTP 与 OLAP 融合实践的指导思路,希望给你带来一点启发。 Dag Controller 介绍 Dag Controller 是 NebulaGraph 企业版的图系统,经过反复测试无误后已…

2023年 MCM美赛 C题 Wordle预测问题 求解!

目录2023年 MCM美赛 C题 Wordle预测问题 求解!问题一读取数据数据预处理数据分析数据变化趋势数据分布数据统计—— 均值、方差、极大极小值....数据相关性回归预测模型——XGBoost评价指标XGBoost 框架使用划分数据集,80% 训练数据和 20% 测试数据使用训…

leaflet 根据两个坐标值,设置arc弧线和Marker(079)

第069个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中根据提供的两个点,绘制出marker,同时将两点间绘制出一条弧线。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果. 文章目录 示例效果配置方式示例源代码(共88行)安装插件相关API参考…

day46

代码随想录算法训练营第46天 || 139.单词拆分 || 关于多重背包,你该了解这些! || 背包问题总结篇! 139.单词拆分 题目介绍: 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。请你判断是否可以利用字典中出现的单词拼接出…

在线教育有什么优势?

AI 1、便捷性:在线教育可以让学生在家里或者其他任何地方学习,不受时间和地点的限制,可以随时随地学习,极大的方便了学习者。 2、节约成本:在线教育可以节约学习者的时间和金钱,学习者可以节省出去上学的…