上回我们分分钟创建了一个小程序,有没有拿给心爱的女神秀一下呢?
扫这里的二维码就可以了,手机上就能看了,还等什么!
就是下面这个性感的界面,看到我骚气的微信头像了。
小程序有哪些目录?
这一会我们来了解下小程序的项目结构。
小程序目录结构非常的纯粹,根目录下就两个目录:
-
pages
存放所有的页面 -
utils
存放工具函数,也就是公共函数,比如运算函数、获取时间等工具。下面就一个utils文件,我就不做介绍了
pages 是放页面的目录
pages
下每个目录就是一个页面,比如上图中就有两个页面,别看有个页面叫logs
,他就是披着羊皮的狼就是来误导人的,他就是个页面。
每个页面一定有四个文件,他是约定好的,每个文件都有作用,创建页面的时候自动生成四个文件,他们必须具有相同的路径与文件名。
学过前端的都知道,js
是写动态效果的,css
写样式的,html
是页面。这里也不例外,只是改了个名字。
js 是这个页面的后端
js
里,onLoad
是页面加载的时候会调用的函数,data
存放页面用到的数据,还有些自定义函数这个我们后面再说。
json 是微信提供的页面配置
json
是页面配置,我搞一个丰富点的例子。
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
比如上面这个index.json
文件,记录了导航栏背景颜色、导航栏标题颜色、导航栏标题文字内容、窗口的背景色、下拉 loading 的样式。详细配置在这里有记录,我们只要知道这个文件是干嘛的就可以了。
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
wxml 和 html 的功能相同
wxml 就是写标签专用的,页面展示的各种元素就在里面了。
比如上面这张图就是刚刚的页面,唯一和 html
不同的是,这里多了些微信官方提供的标签。
wxss 是写样式的
没错这就是和css一样的语法
utils 目录就是专门放公共函数的
根目录下的几个系统文件
我们刚刚了解了 pages
下每个页面的四个文件,utils
目录的作用,会发现有几个文件不在目录里。
app.js
同页面中的 js
,一个作用是配置小程序进来做哪些操作,比如获取用户登陆状态。另一个作用是保存全局变量
app.json
一样是整个小程序的配置,页面配置可以覆盖总配置,唯一不同的是要在这注册各个页面。
app.wxss
全局样式,可能被页面样式覆盖。
project.config.json
这是一个项目配置文件,比如项目的名字,appid等等,别管他具体配置了啥,全是自动的。只要这个文件在,你所有的个性化配置都会在。
sitemap.json
小程序内搜索用的,配置哪些页面允许微信的爬虫搜索。啥意思,就是在搜一搜里面搜索的时候能发现你这个页面。
以上。
实践出真知!今天的任务是,打开自己的微信开发者工具,一个一个的点开示例文件,看看里面的内容,相信你肯定能很快理解整个项目的运行流程了!