小程序目录结构

        第一篇微信小程序的博文,不知从何开始说;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"
}
}

        目录结构大概简单介绍到这里,如果有问题欢迎文章底部留言!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券