新建微信小程序项目后默认样式设置宽高无效

微信小程序

字数统计: 282阅读时长: 1 min

 2020/01/09   Share

问题描述：

最近新建的小程序项目

很多提供的表单组件

例如：button、input 等无法定义样式

此次项目中遇到的问题是

button标签无法自定义宽度只有默认的宽度

修改了自带的属性后

更改了很多次样式后

依旧无法生效

后面找了一大圈才发现是这个原因

真的是找的吐血… [○･｀Д´･ ○]


/* 小程序新版本样式 */
button: not([size='mini']) {
    user agent stylesheetmin-height: 40px;
    width: 184px;
    margin-left: auto;
    margin-right: auto;
}
button {
    user agent stylesheetpadding: 8px 24px;
    line-height: 1.41176471;
    border-radius: 4px;
    font-weight: 700;
    font-size: 17px;
}

/* 小程序老版本样式 */
button {
    user agent stylesheetposition: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    line-height: 2.55555556;
    border-radius: 5px;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    color: #000;
    background-color: #f8f8f8;
}

解决方法：

找到小程序的 app.json 文件

找到如下字段将其删除即可~

查找了一些资料发现

小程序最近更新了自带的所有样式

才导致这个问题的出现

1	"style":"v2"

Next Post

复盘技能之 JavaScript
Previous Post

Chrome DevTools 调试技巧

CATALOG

1. 问题描述：
2. 解决方法：



缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是archer根目录）执行以下命令：
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true

新建微信小程序项目后 默认样式设置宽高无效

问题描述：

解决方法：

新建微信小程序项目后默认样式设置宽高无效