微信小程序开发——入门第一站
|
68
|
分类,微信小程序开发
|

2577 字
|
10 分钟

文件和目录结构

一个完整的小程序项目分为两个部分：主题文件、页面文件

主体文件又称全局文件，能够作用于整个小程序，影响到小程序的每个界面，主体文件必须放到项目的根目录下。

由三部分组成

  1. app.js ： 小程序入口文件（必须以它开头）
  2. app.json : 小程序的全局配置文件（必须存在）
  3. app.wxss : 小程序的全局样式文件

页面文件是每个页面所需要的文件，小程序页面文件都存放在pages目录下，一个页面一个文件夹

通常由四个文件组成，每个文件只对当前页面有效：

  1. .js: 页面逻辑(必须存在)
  2. .wxml:页面结构（必须存在）
  3. .wxss：页面样式
  4. .json: 小页面配置
image-20250301224021728

目前的渲染模式由Skyline渲染模式和WebView渲染模式，但是由于Skyline比较新，还不稳定，这里用WebView渲染模式，这里我们需要

去掉这三个配置项即可。

创建新页面

我们找到pages文件夹，新建一个文件夹

image-20250303153014032

我们右击创建的文件夹，创建一个page，注意这里给page命名的时候，我们不许主要增加任何后缀，只需要输入page名字即可。

image-20250303153052255

我们可以在app.json里面找到我们创建的页面

image-20250303154137072

我们可以找到我们已经创建的三个页面，我们也可以在这里去增加。

image-20250303154510093

我们在pages里面增加新的网页，保存后，会自动增加一个页面文件夹

注意：不要漏了,哦

调试基础库

小程序的调试基础库，指的是微信开发者工具中可以选择的微信基础库版本。

微信基础库是指小程序的运行环境，给小程序提供了所需要的各种API和工具，以及基础框架和运行逻辑等。

每个小程序有自己所允许使用的基础库最低标准要求，开发者需要选择兼容的基础库版本，从而确保小程序功能的正常运行，

就比如分享到朋友圈功能基础库2.11.3开始支持。

如何调试小程序

我们先打开调试器

image-20250303160113317
image-20250303160202857

我们可以看见一串选项：

Wxml：我们可以以代码的形式看到整个文档的结构

Console: 看到JS输出的内容，我们发现有一些系统打印的信息，我们可以把系统打印的东西隐藏

image-20250303160349622

我们选中系统打印的东西，右键，即可隐藏系统打印的东西，这样没有了系统打印的东西，页面更加整洁更有利于大家来进行调试。

image-20250303160444494

Network：我们可以用来调试网络请求，可以调试自己向服务器发送的请求

因为截图没截全，这里补一张

image-20250303160641382

AppData：我们可以查看当前页面我们定义了哪些数据。

Storage: 我们可以查看，我们在本地存储了哪些数据，

image-20250303160918060

我们再来看看顶栏，编译就相当于网页里的刷新。

我们再看看预览

image-20250303161035152

点击继续预览小程序

image-20250303161215316

就会生成一个二维码，我们可以用手机扫描

image-20250303161715045

然后重启小程序我们就可以在手机上进行一些调试操作。

我们还可以通过真机调试

image-20250303161834583
image-20250304154335754

电脑就会弹出这个一个网页，当我我们选中的时候手机上会同步显示选中的内容，

最后的清缓存按钮

由于微信开发者工具的缓存非常严重，有些时候，我们完成之后我们发现代码和预期代码不太一样，我们通过编译来刷新内容,如果发现效果好还是没达到预期，我们就需要清缓存

image-20250304154709124

这里根据需求清楚缓存即可。

如果出现报错，重启开发者工具即可。

配置文件

配置文件介绍

JSON是一种轻量级的数据格式，常用于前后端数据的交互，但是在小程序中，JSON扮演的配置项的角色，用于配置项目或者页面中的属性和行为，每个页面或塑件都有一个对应的JSON文件

小程序常见的配置文件有以下几种：

  1. app.json:小程序的全局配置文件，用于配置小程序的一些全局属性和页面路由
  2. 页面.json:小程序页面配置文件，也称局部配置文件，用于配置当前页面的窗口样式，页面标题等
  3. project.config,json:小程序项目的配置文件，用于保存项目的一些配置信息，和开发者的个人设置
  4. sitemap.json:配置小程序及其页面是否允许被微信索引，提高小程序再搜索引擎被搜索到的概率。

全局配置

pages配置

pages字段：用来指定小程序由哪些页面组成，用于让小程序知道由哪些页面组成以及页面定义在哪个目录，每一项都对应一个页面的路径信息。

image-20250304161028022

注意：

  1. 页面路由不需要写文件后缀，框架会自动去寻找对应位置的四个文件进行处理。
  2. 小程序中新增或者删除页面，都需要对pages数组进行修改
  3. 未指定entryPagePath时。数组第一项代表小程序的初始页面（首页）

window 配置

window字段：用于设置小程序的状态栏，导航条，标题，窗口背景色。

我们有需要去查官方文档即可，这里放个传送门：小程序配置 / 全局配置

这里我们来看几个常见的项

   "window": {
     "navigationBarTitleText": "ttdr",
     "navigationBarBackgroundColor": "#f3514f",
     "enablePullDownRefresh": true，
     "backgroundColor": "#efefef"
   },

从上到下，分别设置的是，标题，标题背景颜色，是否可以刷新，刷新页面背景色

image-20250304165506062

Tabbar 配置

tabBar 字段：定义小程序顶部底部tab栏，用以实现页面之间的快速切换

可以通过tabBar配置项指定tab栏的表现，以及tab切换时对应的页面

image-20250307210727096

图中表明了一些常见元素。

这里list是一个数组，数组里面每一项都是一个对象，我们可以对每个对象配置上面四个属性。

注意：tab按数组顺序排序，list最少配置两个，最多五个tab。

image-20250307212243820

我们这里仅配置了一个tab我们可以看到了报错了。

页面配置

也成为局部配置

每一个小程序页面也可以使用自己.json文件来对本页面的窗口表现进行配置。

需要主要跌势：页面配置文件中的属性和全局配置文件中的window属性基本一致，只不过这里不需要额外指定window字段，因此如果出现相同的配置项，页面中的配置项会覆盖全局配置文件中相同的配置项。

项目配置文件和配置sass

在创建项目的时候，每个项目的根目录生成两个config.json文件（project.config.json和project.private,config.json），用于保存开发者在工具上做的个性化配置，例如和编译有关的配置，当重新安装微信开发者工具，或者换电脑工作室，只要在如同一个项目的代码包，开发者工具就会自动恢复到当时开发项目时的个性化设置。

这里为什么有两个文件呢？

为了满足小程序开发过程中团队协作的需求，避免因为不同成员习惯不同而导致的配置冲突，这里分为了两个文件。

project.config.json：项目配置文件，常用来进行配置公共的配置

project.private.config.json：项目的私有配置，常用来配置个人的配置

注意：

  1. project.private.config.json这个是个人的私有配置，不应该交给git来进行版本管理，要写到.gitignore里来避免版本管理的冲突。
  2. 影响最终编译结果的必须设置到project.config.json

这里一些相关的配置，我们可以查阅官方文档，下面我们来学习集成css的拓展语言sass。

这里sass肯定是影响最后编译结果的，这里我们需要把sass的配置放在project.config.json中，我们在setting中添加

 "useCompilerPlugins":["sass"],

这里我们把网页的.wxss文件改成.scss文件即可,这里注意哦是scss不是sass后缀哦

sitemap.json文件

配置小程序及其页面是否允许被微信索引，提高小程序在微信内部被用户搜索到的概率。

微信现已开放小程序内搜索，开发者可以通过调节该文件的配置来设置小程序页面是否允许被微信索引。当开发者允许被微信索引的时候，微信会通过爬虫的形式，为小程序页面的内容建立索引，当用户搜索到词条出发该索引的时候，小程序的页面将可能展示在搜索结果中。

注意

  1. 没有该文件则默认所有页面都能被索引
  2. {"action":"allow","page":"*"}是优先级最低的默认规则，未显式指明"disallow"的都默认被索引

但是在实际开发中通常不需要配置，默认的规则就可以。

微信小程序开发
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
									

			

			
			
		

	






上一篇
下一篇