微信小程序开发系列-01创建一个最小的小程序项目

本文讲述了通过微信开发者工具,创建一个新的小程序项目,完全从零开始,不依赖开发者工具的模板。目的是为了更好的理解小程序工程项目的构成。

文章目录

    • 创建一个空项目
    • app.json
      • 全局配置
        • pages
        • sitemapLocation
    • app.js

创建一个空项目

打开微信开发者工具,创建一个空的项目。

请添加图片描述

点击“确定”按钮后,会默认生成一个项目,如下图所示:
请添加图片描述

微信开发者工具默认帮我们生成了一些目录和文件,现在我尝试将这些文件全部删除,看看会有什么现象。

删除所有的文件后,工具报错:[ app.json 文件内容错误] app.json: 在项目根目录未找到 app.json

请添加图片描述

按照提示,我们接下来创建一个app.json文件。

请添加图片描述
此时,又提示:[ app.json.json 文件错误] app.json: Empty file is NOT a valid json file

app.json

那么,app.json是什么文件,又有什么作用呢?

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

全局配置

查看官方文档发现,app.json的全局配置项还比较多,哪些是必须的呢?

请添加图片描述
发现只有两个配置项是必须的。pages和sitemapLocation。

pages

用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

未指定 entryPagePath 时,数组的第一项代表小程序的初始页面(首页)。

sitemapLocation

指明 sitemap.json 的位置;默认 sitemap.json 在 app.json 同级目录下。小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引,文件内容为一个 JSON 对象,如果没有 sitemap.json ,则默认为所有页面都允许被索引;

接下来,我分别创建一个页面和sitemap.json。

请添加图片描述

现在可以正常显示index页面了;虽然在模拟器上可以显示index页面,但是当我点击“预览”想看看在真机上是否可以运行小程序时,居然报错了:

请添加图片描述

说明仅有 pages、app.json、sitemap.json还不是一个完整的小程序应用,还需要app.js。那么,app.js又是个什么文件呢?

app.js

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。整个小程序只有一个 App 实例,是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例,获取App上的数据或调用开发者注册在 App 上的函数。

根据官方规定App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。

接下来,我在demo1项目中再新建一个app.js文件,然后再次“预览”,看是否有什么变化?

请添加图片描述

点击“编译并预览”按钮后,我手机端小程序会出现如下效果:

请添加图片描述

至此,说明一个最小的小程序项目已经完成了,虽然它没有什么实际的功能,但是,已经走出了第一步。现在工程的目录结构如下图所示:

请添加图片描述

但是,现在还有3个疑问,

  1. 当前的目录结构是否是完备的呢?(虽然小程序可以运行起来)
  2. app.js文件内容还是空的?实际也能运行起来,看来微信小程序平台没有针对app.js是否为空做强制约束。那么小程序的启动机制是怎样的呢?
  3. app()函数要怎么使用?它的作用是什么?

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C语言】指针详解(一)

目录 1.内存和地址 1.1内存 1.2如何理解编址 2.指针变量和地址 2.1取地址操作符(&) 2.2指针变量和解引用操作符(*) 2.2.1指针变量 2.2.2拆解指针类型 2.2.3解引用操作符 2.3指针变量大小 1.内存和地址 1.1内存 在讲内…

大型医院PACS系统源码,影像存储与传输系统源码,支持多种图像处理及三维重建功能

PACS系统是医院影像科室中应用的一种系统,主要用于获取、传输、存档和处理医学影像。它通过各种接口,如模拟、DICOM和网络,以数字化的方式将各种医学影像,如核磁共振、CT扫描、超声波等保存起来,并在需要时能够快速调取…

模型实战(18)之C++ - tensorRT部署GAN模型实现人脸超分辨重建

模型实战(18)之C++ - tensorRT部署GAN模型实现人脸超分辨重建 一个实现人脸超分辨率重建的demo支持StyleGAN: GPEN or GFPGAN通过C++ - tensorrt 快速部署,推理速度每帧 在RTX3090上5.5ms+,RTX3050上10ms+下边是实现效果(图片来源于网络search,如若侵权,联系删除) 下边…

先进制造身份治理现状洞察:从手动运维迈向自动化身份治理时代

在新一轮科技革命和产业变革的推动下,制造业正面临绿色化、智能化、服务化和定制化发展趋势。为顺应新技术革命及工业发展模式变化趋势,传统工业化理论需要进行修正和创新。其中,对工业化水平的判断标准从以三次产业比重标准为主回归到工业技…

Flink系列之:Savepoints

Flink系列之:Savepoints 一、Savepoints二、分配算子ID三、Savepoint 状态四、算子五、触发Savepoint六、Savepoint 格式七、触发 Savepoint八、使用 YARN 触发 Savepoint九、使用 Savepoint 停止作业十、从 Savepoint 恢复十一、跳过无法映射的状态恢复十二、Resto…

gem5 RubyPort: mem_request_port作用与连接 simple-MI_example.py

简介 回答这个问题:RubyPort的口下,一共定义了六个口,分别是mem_request_port,mem_response_port,pio_request_port,pio_response_port,in_ports, interrupt_out_ports,他们分别有什…

2023 年人工智能研究与技术排名前 10 的国家

人工智能研究是一项全球性的工作。虽然美国和中国因其对人工智能的贡献而备受关注,但事实是,世界各国都在涉足这项技术,尝试新的突破,并吸引投资者的关注。 斯坦福大学的《2023年人工智能报告》估计,到 2022 年&#…

深入理解网络 I/O:mmap、sendfile、Direct I/O

🔭 嗨,您好 👋 我是 vnjohn,在互联网企业担任 Java 开发,CSDN 优质创作者 📖 推荐专栏:Spring、MySQL、Nacos、Java,后续其他专栏会持续优化更新迭代 🌲文章所在专栏&…

React网页转换为pdf并下载|使用jspdf html2canvas

checkout 分支后突然报错,提示: Cant resolve jspdf in ... Cant resolve html2canvas in ... 解决方法很简单,重新 yarn install 就好了,至于为什么,我暂时也不知道,总之解决了。 思路来源: 先…

华清远见作业第十四天

思维导图 1、顺序表按元素删除 代码: int delete_num_delete(sqlist *list,datatype key) {int indexseek_num(list,key);//元素查找函数if(index-1){return -1;}delete_index(list,index);return 0; } 2、顺序表按照元素修改 代码: //顺序表按照元…

使用Flask逐步搭建Web应用程序

大家好,Flask是一个使用Python编写的轻量级Web应用框架。它被设计成简单、易于学习和使用的,同时具备足够的灵活性和扩展性,以满足各种规模的Web应用开发需求。本文我们将介绍一个使用Flask逐步搭建Web应用程序的简单入门示例。 1.安装Flask…

C语言---井字棋(三子棋)

Tic-Tac-Toe 1 游戏介绍和随机数1.1 游戏介绍1.2 随机数的生成1.3 棋盘大小和符号 2 设计游戏2.1 初始化棋盘2.2 打印棋盘2.3 玩家下棋2.4 电脑下棋2.5 判断输赢2.6 game()函数2.7 main()函数 3 完整三子棋代码3.1 Tic_Tac_Toe.h3.2 Tic_Tac_Toe.c3.3 Test.c 4 游戏代码的缺陷 …