小程序目录结构
第一篇微信小程序的博文,不知从何开始说;name就从最基础的目录结构来说吧,初次接触这个东西自己也是折腾挺久的,这里系统的对比一下web开发的文件结构对比!
使用微信开发工具创建demo你会发现有个文件
app.js,app.json,app.wxml和app.wxss四个文件,js和json相对于有一定前端基础的伙伴比较熟悉,但是后两种就是感觉不认识了.
app.js说明
app.js是规定小程序全局的js脚本文件 app.json说明
app.json规定了小程序全局的配置 app.wxss
规定了小程序全局的样式,相当于web开发的css文件上述的文件名前缀都是app开头,这样的文件规定了这是设置整个小程序的必要文件
还有一个page的目录,这里存放页面的文件,在page目录下创建每个单独的页面文件夹,page目录相当于所有页面的管理目录,在这个page目录创建每个页面的目录,在page下创建index(首页),about(关于页面)等页面
在index文件夹下创建index.wxml,index.wxss,index.js,index.json
到这里或许你有疑问了,这里的json,js等文件和app的呢个js和json有什么区别呢
在page的页面目录下的js,json是当前页面的脚本和配置,当前页面没有js和json则使用app.js,app.json的全局的;
关于小程序一些常见报错
1.提示js脚本有问题的,如果当前业务没有写入js文件,就是无需使用js也要在js文件内写入
Page({
})2.json报错,在当前页面的json下配置一下操作
{
}这个时候大概没啥问题了,当然小程序的是依靠数据绑定,就是如何你的index是当前页面的文件夹,name文件夹下的文件前缀全部要用index做为前缀,这样就将改目录下的配置,脚本,样式,业务等文件绑定到了index页面
这个时候你在index.wxml写了内容你发现编译后依旧无法正常显示
这个时候需要你把page页面下的index告诉app.json文件夹我的页面包括index(简单来说index属于我的一个页面),需要在json文件夹下进行一下配置
app.json
{
"pages": [
"page/index/index"; /* 这个是你的页面路径,这样直接绑定了index目录下的索引index开头的文件*/
],
//这个window指定了小程序顶部的样式
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#b3d4db",
"navigationBarTitleText": "欢迎您",
"navigationBarTextStyle": "wgite"
}
}目录结构大概简单介绍到这里,如果有问题欢迎文章底部留言!