2.配置微信小程序

偏执的太偏执、 2023-02-17 11:07 35阅读 0赞

#### 小程序配置 ####

1.app.js
    是项目的入口js 模块
    
    2.app.js中，App()是注册小程序并进行项目初始化，()里写小程序需要初始化的内容。
    (1)onlaunch(){ } 是小程序的生命周期之一，做初始化操作
    下面这段代码必须加
    App({ 
      onLaunch () { 
      }
    })
    
    3.app.wxss
    里面写的是全局的样式，等价于微信css文件(80%与css一样)
    
    4.app.json(重点) -- 项目配置文件，至关重要
    
    5.sitemap.json
    小程序支不支持被索引，搜关键字搜出小程序
    { 
      "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
      "rules": [
          { 
              // dallow 允许被索引
              "action": "allow", 
              // demo页面允许被索引
              "page": "pages/demo/demo"
          },
          { 
              // disallow 不允许被索引
              "action": "disallow", 
              // 其他所有页面都不允许被索引
              "page": "*"
          }
      ]
    }
    
    6.demo.wxml -- html页面
    
    7.demo.wxss -- demo的样式
    
    8.demo.js -- demo的js逻辑
    
    9.快速创建demo.wxml、demo.wxss、demo.js、demo.json的方法：
    在demo文件夹下新建page文件 --> 取名demo --> 一次性生成以上四个文件

app.json

1.page字段
    (1)在page文件夹下新建页面(demo等)，在page字段会自动追加路径
    (2)哪个路径在第一个，哪个路径就是小程序的首页
    2.底部选项卡
    输入tabbar回车就可以直接生成代码
    让UI准备好两套图标(一套高亮、一套非高亮)
    (1)navigationBarBackgroundColor 顶部背景色
    (2)navigationBarTitleText 顶部标题
    (3)selectedColor 底部选项卡选中时文字颜色
    (4)backgroundColor 背景色
    (5)iconPath 不选中时非高亮图标的路径
    (6)selectedIconPath 选中时高亮图标的路径
    (7)navigationBarTextStyle navbar导航栏字体颜色(只支持两种颜色：black white)
    (8)下拉loading样式
    "enablePullDownRefresh": true,
    "backgroundTextStyle": "dark"
    
    app.json
    { 
      "pages": [
        "pages/home/home",
        "pages/demo/demo",
        "pages/center/center",
        "pages/shopCar/shopCar"
      ],
      "window": { 
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json",
      "tabBar": { 
        // 选中字体颜色
        "selectedColor": "#f60",
        // 背景颜色
        "backgroundColor": "#f54",
        "list": [
          { 
            "pagePath": "pages/home/home",
            "text": "首页",
            // iconPath 不选中时非高亮图标的路径
            "iconPath": "images/home.png",
            // selectedIconPath 选中时高亮图标的路径
            "selectedIconPath": "images/home_light.png"
          },
          { 
            "pagePath": "pages/demo/demo",
            "text": "测试",
            "iconPath": "images/camera.png",
            "selectedIconPath": "images/camera_light.png"
          },
          { 
            "pagePath": "pages/shopCar/shopCar",
            "text": "购物车",
            "iconPath": "images/search.png",
            "selectedIconPath": "images/search_light.png"
          },
          { 
            "pagePath": "pages/center/center",
            "text": "个人中心",
            "iconPath": "images/my.png",
            "selectedIconPath": "images/my_light.png"
          }
        ]
      }
    }