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

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

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

文章目录

    • 创建一个空项目
    • 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.niftyadmin.cn/n/5278663.html

相关文章

react+ts父子组件传值

父传子 ①在父组件中定义const nameFromParent: string "John"; ②从父组件传递给子组件<ChildComponent name{nameFromParent} /> ③在子组件中定义属性的类型interface ChildProps { age: number;} ④如果数据多需要解构再使用const { name,... } props;&a…

Docker安装(CentOS)+简单使用

Docker安装(CentOS) 一键卸载旧的 sudo yum remove docker* 一行代码(自动安装) 使用官方安装脚本 curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun 启动 docker并查看状态 运行镜像 hello-world docker run hello-world 简单使用 使用 docker run …

三防平板定制|5G三防工业平板电脑终端联发科MTK方案

三防平板&#xff0c;顾名思义&#xff0c;是指具备防水、防尘、防坠落等特性的平板电脑。它可以在各种恶劣环境中正常使用&#xff0c;如煤矿、工业制造、户外、建筑等。 三防平板的优势在于其坚固耐用、性能稳定。它通常采用高强度的材料制成&#xff0c;具有较强的抗冲击性和…

信号与线性系统翻转课堂笔记6——卷积

信号与线性系统翻转课堂笔记6——卷积 The Flipped Classroom6 of Signals and Linear Systems 对应教材&#xff1a;《信号与线性系统分析&#xff08;第五版&#xff09;》高等教育出版社&#xff0c;吴大正著 一、要点 &#xff08;1&#xff0c;重点&#xff09;卷积积…

力扣面试题 17.22. 单词转换(java DFS解法)

Problem: 面试题 17.22. 单词转换 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 由于该题目涉及到所有的路径&#xff08;可能&#xff09;&#xff0c;即我们可以想到利用DFS解法同时&#xff0c;题目只要求我们返回一条合法的路径即可&#xff0c;我们又可以在DF…

深度学习——关于adam优化器和交叉熵损失函数介绍

在深度学习中&#xff0c;选择优化器和损失函数是非常重要的决策&#xff0c;因为它们直接影响模型的训练和性能。在你的代码中&#xff0c;使用了Adam优化器和交叉熵&#xff08;categorical crossentropy&#xff09;损失函数&#xff0c;这是常见且在许多情况下表现良好的选…

Debian在升级过程中报错

当我们在升级的过程中出现如下报错信息 报错信息如下所示&#xff1a; The following signatures couldnt be verified because the public key is not available: NO_PUBKEY ED444FF07D8D0BF6 W: GPG error: http://mirrors.jevincanders.net/kali kali-rolling InRelease: …

华为mpls vpn跨域方案c-2无RR

重要的几点注意&#xff1a; 1、r2和r5上面不需要跑bgp&#xff0c;只开mpls ldp负责传递标签 2、r3和r4上面不需要跑vpnv4路由&#xff0c;只传标签就可以了。所以不要和自己as内的对端建立vpnv4路由&#xff0c;减轻压力。 3、2个asbr不用和自己的pe上建立bgp邻居&#xff0…