小程序目录结构篇

小程序目录结构

小程序的目录结构主要分为以下四种：

1.wxml
"wxml"是小程序的页面文件，小程序的模板和页面主要标签布局写在当前文件内。

2.wxss
"wxss"是小程序的样式文件，主要是存放页面样式的文件。

3.js文件
顾名思义，这想必就不要我过多介绍了，这是小程序的脚本文件。

4.json文件
想必很多的前端开发者，忽然接触小程序，都感觉很诧异，json？可能跟我当初想的一样这是放数据的文件，那么你可能错了，这个文件是用来配置小程序页面内部的东西，每个单独的页面，都会有这个文件，基本上就是用来配置微信小程序自带的头。没错，这就是个配置文件。这里详细介绍下，他可以做哪些配置。（简单偷个图）

这里注意小程序json格式文件如果配置页面头部的话需要以下格式来进行配置。

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

如果不进行任何配置的话，也要保留最外层的花括号，不然小程序会报错

这个小程序独有的东西，一般报错很难找到哪里写错了。所以一定要注意。语法格式。

5.app.js
这个文件，是每次新建一个小程序项目，自带的一个文件，这个文件，只要进入小程序，都会先运行。说到这里就不得不说一下小程序的生命周期函数。

官方的API有很详细的介绍，这些生命周期函数，在每个页面的js文件里都有。个人方面我要补充几点。避免大家入坑。

onLaunch 生命周期函数，全局只触发一次，只有进入小程序初始化的时候触发，这个函数做一个功能点（后面的文章我会做出更新）

onshow 生命周期函数，字面意思上就是页面准备好的时候触发， 写在这个生命周期里的方法，要先了解一下，这个onshow触发的机会很多，页面切换的时候，页面重新加载的时候，还有就是，小程序底部自带的tabbar切换的时候，小程序的底部是官方提供的app.json配置（下方会讲到）是无法进行监听的。所以这个时候onshow就可以满足你下方切换的时候要做的一些操作了。

onload生命周期函数，这个在API里面我没有看到。但是页面里也会有，小程序里面的onload只有第一次进入页面的时候才会触发。下方的tabbar菜单切换的时候，这个生命周期函数是不会触发的。如果需要进入页面就触发的事件，建议写在onshow里面。

这三点用的比较多，提醒大家谨慎使用。

在这我要提及一点小技巧。小程序的登录一般都会写在app.js里面。包括小程序每次进去，有些数据可能会获取一次，就不会获取了，所以涉及到很多东西，可能要存到缓存里面，但是如果什么数据都存到缓存里面，有时候难免会出错。在此，我介绍一种简单实用的数据传输功能，也比较实用。
在app.js里面有这样一个配置参数

//首先在这里面创建一个你需要的数据
  globalData: {
    loginInfo:'',
  }
 //然后把你想用作公用的数据存进去
  this.globalData.loginInfo="1111111";
  //这个时候loginInfo这个参数的值就是你塞得了，但是这个时候小程序里面其他的目录文件并不能获取这个公用的数据。还需要进行引用，具体方法如下。

//在你需要用到地方的js脚本文件目录的头部引入
const app = getApp() //可以认为这是获取app.js里面的方法和数据的一个渠道
//这个时候直接调用
app.globalData.loginInfo  就可以拿到app.js里面的数据了。

当然，globalData这种方法更实用于接口地址的配置哦，因为小程序开发过程中，接口地址的端口和IP可能经常修改，
所以只要在这里面进行了定义。接口更改的时候我们只需要改一下的他的IP或者端口，就不用一个个去更改小程序里面所有接口访问地址了呢，怎么样这种方法是不是很实用呢。
app.js配置如下：

需要引入页面的配置如下：
记住一定要先引用才可以调用哦！！！

const app = getApp()

5.app.json
小程序app.json文件,还是以我用到的来做介绍。

{
//pages字段，这个数组里面，配置的是小程序的里面所有的页面目录。
//如果想把当前页面作为第一个展示页面，可以帮当前文件的目录，放在第一位，就可以。
//调整页面目录顺序在调试的时候用到的比较多，可以先走一次流程，然后把要调试的文件目录，放在第一位，进行编译（ctrl+s）就可以免除每次调试完，都需要重新跑一次流程的时间（当然编译的时候不要清楚缓存哦！不然就得重新走流程了）
   "pages": [
      "pages/index/index",
      "pages/about/index",
   ],

//window 这里面配置的是小程序所有目录的配置哦，具体配置参数可以参照页面目录配置。如果页面的json文件进行了单独配置，最好不要在这里配置了，避免配置的冲突。
   "window": {
      "backgroundTextStyle": "light",
      "navigationBarBackgroundColor": "#fff",
      "navigationBarTextStyle": "white"
   },
   //tabBar这个就是配置小程序的菜单切换的。一般用作底部菜单比较多。
   
   "tabBar": {
      "borderStyle": "black",  //设置底部边框颜色
      "position": "bottom",//设置tabbar菜单的位置，可以设置top 、bottom效果大家可以自己做尝试，效果是不同的。
      "backgroundColor": "#fff", //设置tabbar背景颜色
      "color": "#69504A",		 //设置tabbar字体颜色
      "selectedColor": "#3F3E3C",  	 //设置tabbar字体选中时颜色
      "list": [
      //list 里面配置几个对象就代表有几个目录
		pagePath：代表点击当前目录跳转的页面
		text：代表当前目录名称
		iconPath：代表当前目录的logo标
		selectedIconPath:代表当前目录logo标的选中状态
	
         {
            "pagePath": "pages/index/index",
            "text": "主页",
            "iconPath": "/img/indexicon.png",
            "selectedIconPath": "/img/indexselect.png"
         },
         {
            "pagePath": "pages/menu/index",
            "text": "菜单",
            "iconPath": "/img/caiselect.png",
            "selectedIconPath": "/img/sleccai.png"
         },
         {
            "pagePath": "pages/cart/index",
            "text": "购物车",
            "iconPath": "/img/gwoc.png",
            "selectedIconPath": "/img/gwot.png"
         },
         {
            "pagePath": "pages/mine/index",
            "text": "我的",
            "iconPath": "/img/mes.png",
            "selectedIconPath": "/img/me.png"
         }
      ]
   }
}

小结：
这里需要大家注意的是：因为底部是微信官方提供的配置，所以我们上传的logo标，传上去难免会很大或者很丑，但是官方也并没有提供配置logo标大小的字段方法。这个时候我们可以用以下方式解决。
我们可以把logo标放到Photoshop里面，改成png格式，然后将标等比例缩小，并且在边缘处留出白边，画布不要随着变小，把每个标都等比例缩小一样的大小，重新保存上传。如下：就可以完美的解决这个问题，如果有好的方法欢迎提出互相学习。

https://img-blog.csdnimg.cn/20190217142757258.png