小程序教学二(文件介绍)
2018-05-21 本文已影响17人
遛遛食
首先介绍一下小程序的文件结构
文件基本结构
在小程序开发中文件的后缀一般为
微信的后缀 | 对应HTML的后缀 | 一般写什么内容 |
---|---|---|
.wxml | .html | 写网页的内容 |
.wxss | .css文件 | 写网页中的样式文件 |
.js | .js文件 | 写业务逻辑代码 |
.json | .json文件 | 写配置文件,页面的样式,标题 |
在小程序开发中必须存在的根文件为
文件名 | 作用 |
---|---|
app.js | 项目的入口文件,可以监听到项目的生命周期 |
app.json | 项目的配置文件,设置项目的样式和加载的其它子文件 |
app.wxss | 存放公共的样式,就是全局的.css文件 |
project.config.json | 项目的配置信息文件 |
project.config.json
project.config.json我们可以在这个文件夹里面直接修改项目的配置信息
例如项目的appid,在project.config.json文件夹中找到appid字段,然后修改后面的值,然后重新打开即可。
再例如项目的名称,在project.config.json文件夹中找到projectname字段,然后修改后面的值,然后重新打开即可。
app.js
在app.js文件中,代码必须都写在APP({ })里面,且必须要有 APP({ })
例如有公共的函数方法,建议写在这个文件中
app.wxss
这个文件存在的就是全局的css样式,
例如定义所有的class="font15" 那么可以在这个文件夹中.font15{font-size: 15px}
app.json
这个文件存放1.小程序的样式2.所有预加载的文件
注意:因为这是个json文件,所以不能再里面添加注释
pages:存放预加载的页面路径
window:存放小程序的样式
window
此外还有的
tabBar:多个页面切换 注意:小程序系统的tabbar只能在首页设置,不能再二级页面设置
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
}
tabBar
networkTimeout:设置网络的请求超时时间
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
}
每个页面
在小程序中,最好每个页面就创建一个文件夹,每个文件夹中都有与文件夹名字一样的.js、.json、.wxml、.wxss文件
每个页面的文件结构
在每个页面的.js文件夹中,代码必须都写在Page({ })里面,且必须要有 Page({ })
持续更新中...