当前位置:   article > 正文

微信小程序如何配置app.json,app.is,及app.wxss(超详细,适合新手)

app.wxss

一、app.json文件是对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多工具栏(tabBar)等

1、新建项目里面的app.json文件里包含了一下代码,

  1. {
  2. "pages":[
  3. "pages/index/index",
  4. "pages/logs/logs"
  5. ],
  6. "window":{
  7. "backgroundTextStyle":"light",
  8. "navigationBarBackgroundColor": "#fff",
  9. "navigationBarTitleText": "WeChat",
  10. "navigationBarTextStyle":"black"
  11. }
  12. }

文件路径问题:

pages主要存放的是文件路径,具体存放什么文件路径呢,我们点开pages,我们可以看见里面有两个文件夹,这里的文件路径就是指这里的index和logs。

 如果我们想新建一个我们需要的文件,可以右键点击pages,选择“新建 目录”,输入我们想要的名字(假设我们建了一个“test”的目录),然后就可以得到下图所示:

然后这里就多了一个test的文件,通常来说,我们新建目录后,我们需要再在“test”文件夹下建立 "test.js","test.json","test.wxml",及"test.wxss"这四个文件,但是我们也可以一步创建这四个文件,那就是在“app.json”里面的pages添加里直接添加test,具体操作如下:

  1. "pages":[
  2. "pages/index/index",
  3. "pages/logs/logs",
  4. "pages/test/test"
  5. ]

对比新建项目app.json的pages,我们发现,就多了"pages/test/test",这就可以一次创建那四个文件,可能有人会问,为什么我要把test文件下面的四个文件也命名为test.*,这是为了方便管理,且这就是微信小程序的规定。还有个小问题就是,微信小程序开发工具里没有保存这个按钮,我们就只有用快捷键“ctrl+s”进行保存,按了保存就相当于进行了编译,我们也可以直接点上方菜单栏的编译按钮进行保存及编译,完成以上的添加路径就会得到下图所示:

 值得注意的是,你在pages下面每 创建一个文件,记得将它对应的路径添加到pages里,这样微信小程序才会知道你所写的程序。

窗口显示问题:

窗口的代码如下:

  1. "window":{
  2. "backgroundTextStyle":"light",
  3. "navigationBarBackgroundColor": "#fff",
  4. "navigationBarTitleText": "WeChat",
  5. "navigationBarTextStyle":"black"
  6. }

  "backgroundTextStyle"文本背景颜色,这里的变量可以有"light"和"dark";"navigationBarBackgroundColor"为导航栏背景颜色;"navigationBarTitleText"为导航栏标题文字,"navigationBarTextStyle"为导航栏标题颜色,仅支持"black"/"white",其实最主要我们就控制这个显示的文字就好了,其他的设置,我个人觉得都是不需要改动的。

tabBar:

如果小程序需要有多个tab应用,简单来说,就是页面切换的按钮,其实就是一个类似与链接的东西,只是把这个链接图像化了,点击下面的tab图标进行页面跳转。tabBar的配置说明如下:

1、我们要把跳转的链接进行图像化,我们要做的第一步就是要得到图像,我们可以从“寻图标”(https://icon.52112.com/)这个来找点,我们心仪的图标,如以下的图标,我们需要那个飞机,如果你不想注册登录再下载,你可以直接打开qq进行截图。

假设我们截的图如下:

我们将图片分别另存为“fly.png”,“fly_on,png”,这样存的话,就能很好的区别你所存图片的作用,且将这两张图片归为一类,下面我们来说一下具体怎么使用这两张图片。

第一步:找到我们新建的项目的根目录,建立一个文件夹(与pages文件夹同级)image,然后把之前我们保存的图片复制到image文件夹下;

第二步:我们在小程序开发界面里就可以看到image文件夹了,点开它如下图所示:

第三步:就是配置tabBar,配置代码如下:

  1. "tabBar": {
  2. "color": "#000",
  3. "selectedColor": "#56abe4",
  4. "backgroundColor": "#fff",
  5. "borderStyle": "black",
  6. "list": [
  7. {
  8. "pagePath": "pages/index/index",
  9. "text": "首页",
  10. "iconPath": "image/fly.png",
  11. "selectedIconPath": "image/fly_on.png"
  12. },
  13. {
  14. "pagePath": "pages/logs/logs",
  15. "text": "日志",
  16. "iconPath": "image/fly.png",
  17. "selectedIconPath": "image/fly_on.png"
  18. },
  19. {
  20. "pagePath": "pages/test/test",
  21. "text": "我的",
  22. "iconPath": "image/fly.png",
  23. "selectedIconPath": "image/fly_on.png"
  24. }
  25. ]
  26. }

一进入“tabBar”就是对跳转栏的(“color”)文字颜色、(“selectedColor”)文字选中时的颜色、(“backgroundColor”)背景色、(“boederStyle”)tabBar上边框的颜色进行设置。然后就是重头戏“list”,这就是对tab应用的定义,“list”最少配置2个,最多配置5个。其中:“pagePath”为页面路径,这个需要现在pages里面定义,“text”就是对这个链接按钮进行命名,“iconPath”就是我们平时不点那个按钮显示的图片的路径,“selectedIconPath”就是我们选中那个跳转按钮时,所显示图片的路径。

上面的代码,我们相当于定制了3个跳转按钮,一个是跳转到“index”首页,一个是跳转到“logs”日志,另外是跳转到“test”我们新建的页面,具体实现情况如下:

注意: *.json格式文件里面是不能添加注释的,*.js,*.wxml,*.wxss这三个文件是可以添加注释的,添加注释的方法是“ctrl+?”(这里的问号就是指那个按键,并不是把问号打出来哈),且这三个文件中注释的符号是不一样的,最好使用这个快捷方式。

networkTimeout:

这个是网络请求的超时时间的配置,这个配置不是必须的,你不写也是可以的,因为它这个都是有默认的值的,你如果有特别的需要,你可以按照以下的规则进行配置。

配置的代码如下:

  1. "networkTimeout": {
  2. "request": 10000,
  3. "downloadFile": 10000
  4. }

完整的app.json配置代码如下:

  1. {
  2. "pages":[
  3. "pages/index/index",
  4. "pages/logs/logs",
  5. "pages/test/test"
  6. ],
  7. "window":{
  8. "backgroundTextStyle":"light",
  9. "navigationBarBackgroundColor": "#fff",
  10. "navigationBarTitleText": "WeChat",
  11. "navigationBarTextStyle":"black"
  12. },
  13. "tabBar": {
  14. "color": "#000",
  15. "selectedColor": "#56abe4",
  16. "backgroundColor": "#fff",
  17. "borderStyle": "black",
  18. "list": [
  19. {
  20. "pagePath": "pages/index/index",
  21. "text": "首页",
  22. "iconPath": "image/fly.png",
  23. "selectedIconPath": "image/fly_on.png"
  24. },
  25. {
  26. "pagePath": "pages/logs/logs",
  27. "text": "日志",
  28. "iconPath": "image/fly.png",
  29. "selectedIconPath": "image/fly_on.png"
  30. },
  31. {
  32. "pagePath": "pages/test/test",
  33. "text": "我的",
  34. "iconPath": "image/fly.png",
  35. "selectedIconPath": "image/fly_on.png"
  36. }
  37. ]
  38. },
  39. "networkTimeout": {
  40. "request": 10000,
  41. "downloadFile": 10000
  42. }
  43. }

需要注意的是,其中每个模块需要花括号“{}”括起来,然后每个模块以逗号结束, 如上面可以概括为四个模块:“pages”、“windows”、“tabBar”、“networkTimeout”。

总结:app.json是对全局的把控,如果你想让跳转后的页面显示不同的抬头(就是小程序最上面的文字或背景),那就需要在对应页面的json文件进行简单的配置,即将上面“windows”里面的内容拷贝到对应的json文件里,然后对里面的文件进行修改。小程序遵循的规则是:“在大环境下生活,远亲不如近邻”,就是说大的框架是小程序官方给的,是不容许修改的,而对一些配置文件的话,我们就会以最近的那个配置为准,这样就是起到一个定制页面的效果。

二、app.js

app.js就是用户刚开始进入小程序执行的内容,其中就是执行了app({}),这里面写的函数或者全局变量都会被执行。app()函数用来注册一个小程序,它必须在app.js中调用,且只能执行一次。

新建项目的app.js如下:

  1. App({
  2. onLaunch: function () {
  3. // 展示本地存储能力
  4. var logs = wx.getStorageSync('logs') || []
  5. logs.unshift(Date.now())
  6. wx.setStorageSync('logs', logs)
  7. // 登录
  8. wx.login({
  9. success: res => {
  10. // 发送 res.code 到后台换取 openId, sessionKey, unionId
  11. }
  12. })
  13. // 获取用户信息
  14. wx.getSetting({
  15. success: res => {
  16. if (res.authSetting['scope.userInfo']) {
  17. // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
  18. wx.getUserInfo({
  19. success: res => {
  20. // 可以将 res 发送给后台解码出 unionId
  21. this.globalData.userInfo = res.userInfo
  22. // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
  23. // 所以此处加入 callback 以防止这种情况
  24. if (this.userInfoReadyCallback) {
  25. this.userInfoReadyCallback(res)
  26. }
  27. }
  28. })
  29. }
  30. }
  31. })
  32. },
  33. globalData: {
  34. userInfo: null
  35. }
  36. })

进入到app()里面就会执行,onLaunch这个函数,因为这是直接触发的事件,我们最开始进来时,那个获取头像的功能就是在这里实现的。其中还有几个函数可以调用:

 可以调用其中几个来看一下,如下:

  1. App({
  2. onLaunch: function () {
  3. // 展示本地存储能力
  4. var logs = wx.getStorageSync('logs') || []
  5. logs.unshift(Date.now())
  6. wx.setStorageSync('logs', logs)
  7. // 登录
  8. wx.login({
  9. success: res => {
  10. // 发送 res.code 到后台换取 openId, sessionKey, unionId
  11. }
  12. })
  13. // 获取用户信息
  14. wx.getSetting({
  15. success: res => {
  16. if (res.authSetting['scope.userInfo']) {
  17. // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
  18. wx.getUserInfo({
  19. success: res => {
  20. // 可以将 res 发送给后台解码出 unionId
  21. this.globalData.userInfo = res.userInfo
  22. // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
  23. // 所以此处加入 callback 以防止这种情况
  24. if (this.userInfoReadyCallback) {
  25. this.userInfoReadyCallback(res)
  26. }
  27. }
  28. })
  29. }
  30. }
  31. })
  32. },
  33. onShow:function(){
  34. console.log("从后台到前台")
  35. },
  36. onHide:function(){
  37. console.log("从前台到后台")
  38. },
  39. globalData: {
  40. userInfo: null,
  41. testnum:1
  42. }
  43. })

其中调用了onShow,onHide等两个函数,函数面的console.log就是在调试器的console页面里打印上面写的那些“从前台到后台”等文字,可表示这个程序执行了,类似与C语音里面的print一个字符串什么的。

三、app.wxss的配置问题

wxss是一套样式语言,用于描述wxml的组件样式,app.wxss中的样式为全局样式,作用于每个页面。新建项目的app.wxss文件如下:

  1. /**app.wxss**/
  2. .container {
  3. height: 100%;
  4. display: flex;
  5. flex-direction: column;
  6. align-items: center;
  7. justify-content: space-between;
  8. padding: 200rpx 0;
  9. box-sizing: border-box;
  10. }

app.wxss就是对整个小程序样式的一个设置,比如一开始的那个页面,里面显示头像的位置以及用户名的文字大小及位置这些配置都是在*.wxss文件里设置,这里还是遵循“远亲不如近邻”这个规则,container正如它的名字一样,这是一个容器,可以把一些配置信息装在里面,以 (class=“container”)的形式调用。

其中,可配置的内容有:

  1. /**app.wxss**/
  2. .container {
  3. height: 100%;
  4. /* 高度自适应 */
  5. display: flex;
  6. /* 纵向排列 */
  7. flex-direction: column;
  8. /* 每项居中 */
  9. align-items: center;
  10. /* 两端居中 */
  11. justify-content: space-between;
  12. /* 两端对齐,项目之间的间隔都相等 */
  13. padding: 200rpx 0;
  14. /* padding表示内边距,就是控制上下左右的边距,
  15. padding:5px;带一个参数,表示上下左右都是5px距离
  16. padding:5px 0;带两个参数,表示上下都是5px,左右都是0px,这里容易出错,请切记
  17. padding:5px 4px 3px 2px;带4各参数,表示上5px,右4px,下3px,左2px */
  18. box-sizing: border-box;
  19. /* 自适应的边框 */
  20. }

四、总结

总的来说,就是app.js和app.json、app.wxss就是一个大框架,你要确切的问到底哪个先执行,哪个是大哥,那大概就会扯到“鸡与蛋”的世界难题上吧。其实,在我的理解上来看的话,就是这三个东西都是“你中有我,我中有你”,因为在显示页面的时候,其实那个什么获取用户头像的事已经做了,也可以说在执行获取头像这个事件之前,就已经把页面显示出来了,且有样式。所以我们可以把这三个看成一个整体来理解,这样会容易些,同理我们在后面看待pages下面相同文件名的的*.js、*.json、*.wxml、*.wxss为一个整体。还有就是pages下面的文件,到底先执行哪一个,这个就要看那个时间被触发了,就比如最上面我们写的三个跳转按钮,我们只有按了对应的按钮才会触发相应的事件。默认先执行app.*,然后是执行app.json里面pages里面的第一个路径(默认为首页),接下来就看触发事件的威力了。

以上仅是我个人的理解,有什么问题可以在下面评论交流,谢谢。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/97094
推荐阅读
相关标签
  

闽ICP备14008679号