小程序代码结构——简明教程(二)

 

一、下载

微信小程序的开发工具是在微信开发者平台下面的工具栏下载,具体地址是:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html。

这里有三个版本,Windows 64Windows 32macOS。大家可以自行选择下载。

image-20200120101951184

二、登录

下载好之后我们需要登录使用,需要进行微信的扫码登录,在登录之后我们可以看到这样的一个界面,左下角有我们微信账号的一个头像,我们也可以去切换我们的一个账号。

三、界面介绍

image-20200120102809386

我们可以去创建两种项目,一种是小程序的项目,另一种是公众号网页的项目,这里我们选择去创建一个小程序的项目。

点击创建小程序项目,这个界面需要我们去输入三种信息,第1种是我们的一个项目目录,那么第2个是APPId,第3个是我们那个项目名称项目。目录这里我们就一般填入我们嗯小程序项目的一个根目录,APPId是我们之前申请的一个微信小程序账号的APPId那项目,项目名称这里我们可以填入我们自己想要输入的一个项目名。

那如果我们项目目录有一个目录,会检测到,如果我们填入的是一个空的目录,它会出现一个快速启动的模板的一个选项,我们可以通过这个选项来快速的在我们本地创建一个微信小程序的项目,我们在输入版信息点击确定后,看到微信平台的工具,它上面有一个工具栏,下面有我们的一个模拟器,还有代码编辑器以及我们的一个调试器,微信开发者工具主要就分为了这4个模块。

image-20200120110208724

四、目录结构和代码结构

image-20200120110259071

一个小程序的目录结构和代码结构是怎么样?首先我们看到了,这个目录截图下它有4个文件,这4个文件的作用就是帮我们注册一个微信小程序,然后帮我们配置微信小程序,是一个全局的配置信息,设置一下微信小程序它的一个全局样式。

1、Project.config.json

Project.config.json这个文件的作用就是嗯保存我们的微信开发者工具的配置信息,因为我们大家平常在使用的一个工具的时候,都可以针对各自的喜好去做一些个性化的设置,例如,入界面的颜色编译的配置等等,但是我们换了编译台电脑重新安装这个工具的时候,往往还需要自己去重新配置,考虑到这一点微信小程序的开发者工具会帮我们重新安装工具或者换电脑的时候,我们只需要把我们这个项目的代码导入进去,Project.config.json就可以自动的去帮我们恢复这个项目的个性化设置。

2、app.js

app.js主要就是帮我们呃微信小程序去注册一个这样的微信小程序应用。

3、app.json

app.json就是帮我们去进行一个微信小程序的一个全局配置,包括我们的一些网络请求的超时时间,还有我们一些窗口的表现,还有我们各个页面的一个注册的路径。

4、app.wxss

app.wxss这个文件呢,是帮我们去设置我们微信小程序全局的一个样式,那么我们看到这个结构上有两个文件夹

【pages】里面存放的是我们微信小程序所有的小程序页面。

每个小程序页面呢,我们最多是由4个文件组成,分别是js文件,json文件,wxml文件和wxss文件。

js文件是帮我们去处理微信小程序页面的逻辑和一些数据交互,json文件是帮我们去配置它微信小程序页面的一个配置信息,wxml文件是去帮我们展示我们小程序页面的一些元素和内容,wxss文件是帮我们去设置我们这些小程序页面的这些元素的一个样式。

utils文件主要存放的是一些工具的函数,可以达到我们嗯代码重复使用的一个目的。

上面就是我们这个小程序应用的一个简单的代码结构。

推荐阅读:

本文为博主原创文章,知识共享,开源精神,转载注明出处。