微信小程序全过程（一）

为更简单编写wxss样式，首先使用scss编译wxss文件。

具体操作：(43条消息) 微信小程序如何使用scss编译wxss文件_微信开发者工具使用sass_咸虾米_的博客-CSDN博客1​​​​​​

1、清除不需要的文件，首先将index中的wxss、wxml、js清空，将logs文件删除。

2、设置全局样式：

app.wxss

 当需要使用page中的颜色时可以直接复制：

使用方式：例：color：var(--themeColor); 名字可以自己命名。

app.json:

直接在pages中添加想要的页面

例：

 "pages":[

    "pages/index/index",

    "pages/classify/classify",

    "pages/news/news"

"window":{

    "navigationBarBackgroundColor": "#000",（头部背景颜色）

    "navigationBarTitleText": "巷子深茶美文化馆",（页面命名）

    "navigationBarTextStyle":"white"（字体颜色）

 

 "tabBar": {

    "color": "#4c4d4e", （字体颜色）

    "selectedColor": "#BDA066",（点击时的字体颜色）

    "list": [

      {

        "text":"首页",（名称）

        "pagePath": "pages/index/index",（页面路径）

        "iconPath":"images/shouye.png",（页面图标）

        "selectedIconPath":"images/shouye1.png"（点击时的页面图标）

      },{

        "text":"分类",

        "pagePath": "pages/classify/classify",

        "iconPath":"images/fenlei.png",

        "selectedIconPath":"images/fenlei1.png"

      },{

        "text":"资讯",

        "pagePath": "pages/news/news",

        "iconPath":"images/zixun.png",

        "selectedIconPath":"images/zixun1.png"

      }

    ]

  }