兰州千联网络有限公司
当前位置:主页 > 成功案例 > 手机网站 >

手机网站

微信小程序详解003

日期:2020-06-14      浏览次数:

上一篇文章,我们对微信开发的准备工作进行了介绍,包括微信开发的账号申请、开发者工具的下载安装、第一个微信小程序的自动生成,以及小程序的编译。

在上一篇文章中,我们成功的看到了开发者工具自动生成的小程序,对小程序有了初步的认识。下面我们将对开发工具自动生成的小程序模板进行介绍,通过对模板中小程序目录结构、文件构成的分析,对小程序有更深的了解。

项目:有新建项目、打开项目、导入项目等功能。所谓的项目,可以理解为一个小程序所包含的所有文件的总和;文件:新建、保存、关闭文件。文件就是项目中包含的各类文件,包含.wxml/.wxss/.js/.json等文件,通过命名修改后缀,就可以保存为相应的文件;编辑:编辑文件所用到的一些命令,包含搜索、缩进、格式化。一般编程很少用到,因为有相对应的快捷键。其中记住Alt+Shift+F就是格式化快捷键;Ctrl+F就是搜索快捷键;工具:工具里面常用的有,编译、刷新、预览、上传、项目详情、代码仓库等。编程几乎不用,因为在工具栏中,有相应的按键,如图2-1至2-3所示:

工具栏从左至右,分三个模块,模块1是切换工作界面,一会再介绍;模块2包含小程序的编译、预览、真机调试等功能,预览和真机调试,是用手机刷二维码进入小程序开发版;模块3是小程序版本(需要绑定git仓库),详情等情况,其中,在详情页中,可以查看到小程序的AppID号,便于复制粘贴;

界面:设置哪些界面可见。一般也用不着。因为在工具栏模块1(图2-1)中,已经有相应的快捷按钮;设置:开发者工具的设置,包含外观、语言、代理、快捷键等设置;微信开发者工具:切换账号,检查更新等。菜单栏下面是工具栏,如图2-1至2-3所示。工具栏下面是工作界面,默认情况下分四块,如图3所示:

包含四部分,模拟器、目录树、编辑器、调试器。为了方便编程开发,我们可以通过图2-1中工具栏的按键,快捷的控制小窗口的显现。

可以看出,小程序根目录下,有三个app开头的文件(app.js/app.json/app.wxss)、project.config.json文件,和两个文件目录pages、utils.

其中,utils文件下存放工具类文件,后续用到了,我们再做进一步的介绍。下面我们对其他文件的作用进行介绍。

根目录下的四个文件app.js/app.json/app.wxss/project.config.json是对小程序全局的设置。

app.js文件,用来定义小程序的全局数据和函数,控制、监听小程序的全生命周期。在这里可以见到的全局函数有onlaunch(监听小程序初始化),onshow(监听小程序显示),onhide(监听小程序隐藏)等。app.js中还可以定义一些全局变量,其他页面引用app.js文件后就可以直接使用这个文件中的函数和变量。

配置页面路径pages文件夹下的每一个子文件夹对应一个页面,这些页面需要在app.json中配置好路径,如图7所示:

所有新建的页面都需要在这配置好。(类似android APP开发中,每一个activity都需要在配置文件中声明一样)

本文对开发者工具和微信小程序的目录树进行了介绍,讲解了app.js和app.json文件,下一章我们将介绍其他的目录文件。