微信小程序 app.json 里 “style“: “v2“ 的作用

最新推荐文章于 2024-04-27 15:33:37 发布

原创最新推荐文章于 2024-04-27 15:33:37 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #json #小程序 #app.json

微信/小程序专栏收录该内容

15 篇文章

订阅专栏

新版微信小程序的app.json引入了style:v2，这代表基础组件样式的升级，如button的效果有所改变。当删除style:v2，可能导致使用vant组件库的页面样式失效。解决方案是在特定页面的.json配置中添加style:v2来保持样式一致。

新版微信小程序的 app.json 文件中多了一个：style": "v2"

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

在这里插入图片描述

可以看做是微信小程序基础组件样式升级，使用v2版本的组件样式默认情况和v1不同，涉及的组件有6个。

例如 button：

<button type="primary">提交</button>
<button type="primary" loading="true">Loading</button>
<button type="primary" disabled="true">Disabled</button>

V2版效果如图：

在这里插入图片描述

如果把 “style”: “v2”, 删除，

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "sitemapLocation": "sitemap.json"
}

效果如图：
在这里插入图片描述

还有其他组件的区别，就不一一列举了。

注意：

当使用微信小程序进行开发时，如果使用vant组件库或其他组件，删除 app.json 里面的 “style”: “v2” 时，会导致有的页面部分样式失效。这时候可以把有问题的 .json 后缀的文件里添加上"style": v2就可以了。比如你需要在 user 页面里使用微信提供的默认样式，就在 user.json 里面写上 “style”: “v2”就可以了。