微信小程序开发系列-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.mzph.cn/news/237451.shtml

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

相关文章

新型智慧视频监控系统:基于TSINGSEE青犀边缘计算AI视频识别技术的应用

边缘计算AI智能识别技术在视频监控领域的应用有很多。这项技术结合了边缘计算和人工智能技术,通过在摄像头或网关设备上运行AI算法,可以在现场实时处理和分析视频数据,从而实现智能识别和分析。目前来说,边缘计算AI视频智能技术可…

aws-waf-cdn 基于规则组的永黑解决方案

1. 新建waf 规则组 2. 为规则组添加规则 根据需求创建不同的规则 3. waf中附加规则组 (此时规则组所有规则都会附加到waf中,但是不会永黑) 此刻,可以选择测试下规则是否生效,测试前确认保护资源绑定无误 4. 创建堆…

大数据开发职业规划

大数据开发职业规划 我的学历是双非本,在学校学习的是大数据专业,目前是在企业做大数据全栈的工作,爬虫,数仓,风控项目,etl开发都做 .................................................................…

FFmpeg实现rtp推流

以下是一个简单的示例代码&#xff0c;演示了如何使用 UDP 或 TCP 进行音视频传输&#xff1a; 代码未经验证&#xff0c;供参考 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <sys/types.h> #in…

Mac设置ll永久生效,设置.bash_profile生效

Mac设置ll永久生效&#xff0c;设置.bash_profile生效 前言&#xff1a;Mac上自带的终端不好用&#xff0c;一般我推荐ITerm终端&#xff0c;官网下载即可 如果想只生效一次&#xff1a; 直接在终端执行alias llls -l即可 如果想永久生效&#xff1a; vim ~/.bash_profile&…

02 - Kbuild子系统(整理中)

1. Kbuild简介 Kernel build&#xff0c;用来编译 Linux 内核基于 GNU make 设计&#xff0c;对 Makefile 进行扩充 菜单式配置&#xff1a;Kconfig预定义目标和变量&#xff1a;xx_defconfig、menuconfig、obj-y跨平台工具、递归式 Makefile Linux 模块化设计、高度可以裁剪 …

java开发面试:常见业务场景之单点登录SSO(JWT)、权限认证、上传数据的安全性的控制、项目中遇到的问题、日志采集(ELK)、快速定位系统的瓶颈

单点登录&#xff08;SSO&#xff09; 单点登录&#xff0c;Single Sign On&#xff08;简称SSO&#xff09;,只需要登录一次&#xff0c;就可以访问所有信任的应用系统。 如果是单个tomcat服务&#xff0c;session可以共享&#xff0c;如果是多个tomcat&#xff0c;那么服务s…

tcp 的限制 (TCP_WRAPPERS)

#江南的江 #每日鸡汤&#xff1a;青春是打开了就合不上的书&#xff0c;人生是踏上了就回不了头的路&#xff0c;爱情是扔出了就收不回的赌注。 #初心和目标&#xff1a;拿到高级网络工程师 TCP_WRAPPERs Tcp_wrappers 对于七层模型中是位于第四层的安全工具&#xff0c;他…

微信小程序 动态设置状态栏样式

onLoad(options) {//修改状态栏标题wx.setNavigationBarTitle({title: 页面标题, //页面标题success: () > {}, //接口调用成功的回调函数fail: () > {}, //接口调用失败的回调函数complete: () > {} //接口调用结束的回调函数&#xff08;调用成功、失败…

[CVPR 2023:3D Gaussian Splatting:实时的神经场渲染]

文章目录 前言小结 原文地址&#xff1a;https://blog.csdn.net/qq_45752541/article/details/132854115 前言 mesh 和点是最常见的3D场景表示&#xff0c;因为它们是显式的&#xff0c;非常适合于快速的基于GPU/CUDA的栅格化。相比之下&#xff0c;最近的神经辐射场&#xf…

从0开始学Git指令

从0开始学Git指令 因为网上的git文章优劣难评&#xff0c;大部分没有实操展示&#xff0c;所以打算自己从头整理一份完整的git实战教程&#xff0c;希望对大家能够起到帮助&#xff01; 初始化一个Git仓库&#xff0c;使用git init命令。 添加文件到Git仓库&#xff0c;分两步…

Ceph基本环境配置

基本环境准备 准备三台服务器&#xff08;服务器至少需要添加两块磁盘&#xff09;以及一台客户端&#xff0c;最好配置时间同步同时再次配置hosts解析。 node1192.168.134.160node2192.168.134.161node3192.168.134.162node4192.168.134.163客户端 配置免密登录 [rootnode…

智能优化算法应用:基于金鹰算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于金鹰算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于金鹰算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.金鹰算法4.实验参数设定5.算法结果6.参考文献7.MA…

多模态大模型机器人VIMA讲解与资料整理 #持续更新

简单录制了一个视频&#xff0c;欢迎查看&#xff0c;希望对您有帮助&#xff1a; 具身智能开源工作试玩&#xff1a;VIMA_哔哩哔哩_bilibili 参考资料&#xff1a; 多模态prompt通往通用机器人操控——VIMA论文解读 - 知乎 (zhihu.com) 40. VIMA&#xff1a;基于多模态输入…

数据库学习日常案例20231221-oracle libray cache lock分析

1 问题概述&#xff1a; 阻塞的源头为两个ddl操作导致大量的libray cache lock 其中1133为gis sde的create table as语句。 其中697为alter index语句。

第二十一章网络通讯

网络程序设计基础 局域网与互联网 为了实现两台计算机的通信&#xff0c;必须用一个网络线路连接两台计算机。如下图所示 网络协议 1.IP协议 IP是Internet Protocol的简称&#xff0c;是一种网络协议。Internet 网络采用的协议是TCP/IP协议&#xff0c;其全称是Transmission…

2312llvm,05后端下

匹配模式 每个目标都有个叫<Target_Name>DAGToDAGISel的SelectionDAGISel子类.它通过实现子类的Select方法来选指. 如SPARC中的SparcDAGToDAGISel::Select()(见lib/Target/Sparc/SparcISelDAGToDAG.cpp文件).接收要匹配的SDNode参数,返回代表物理指令的SDNode值;否则出…

案例125:基于微信小程序的个人健康数据管理系统的设计与实现

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

龙蜥开源操作系统能解决CentOS 停服造成的空缺吗?

龙蜥开源操作系统能解决CentOS 停服造成的空缺吗&#xff1f; 本文图片来源于龙蜥&#xff0c;仅做介绍时引用用途&#xff0c;版权归属龙蜥和相关设计人员。 一、《国产服务器操作系统发展报告&#xff08;2023&#xff09;》称操作系统已步入 2.0 时代&#xff0c;服务器操作…

MacOS+Homebrew+iTerm2+oh my zsh+powerlevel10k美化教程

MacOS终端 你是否已厌倦了MacOS终端的大黑屏&#xff1f; 你是否对这种美观的终端抱有兴趣&#xff1f; 那么&#xff0c;接下来我将会教你用最简单的方式来搭建一套自己的终端。 Homebrew的安装 官网地址&#xff1a;Homebrew — The Missing Package Manager for macOS (o…