收藏
回答

如何查看小程序的真实DOM?

比如我有一个小程序的checkbox group如下:

<checkbox-group bindchange="facilitiesChange">
  <checkbox wx:for="{{facility_list}}" wx:key="*this" value="{{item}}" class="list-checkbox iconfont .icon-{{item}}">
    <text>{{facility_name[index]}}</text>
  </checkbox>
</checkbox-group>
同时我有一段对应的样式文件是:
.wx-checkbox-input {
  display: none;
}
.list-checkbox {
  width: 100rpx;
  height: 100rpx;
  font-size: 60rpx;
  line-height: 100rpx;
  color: #eee;
  text-align: center;
}
.list-checkbox text {
  font-size: 24rpx;
  font-weight: 600;
  white-space: nowrap;
}
.list-checkbox[checked] {
  color: #9e9e9e;
}

但是实际显示效果不是预想的:


可以发现这里的空白是很特别的。但是如果查看DOM结构会发现只有这两个:


这是母元素checkbox。


这是子元素text。

很明显的,这不是真实的DOM结构。在这种情况下要对元素进行样式就很困难,因为不知道真实的结构。有没有办法强行查看真实DOM结构呢?


P.S. 顺便说明一下,如果用view而不是checkoubox:


<view wx:for="{{facility_list}}" wx:key="*this" value="{{item}}" class="list-checkbox iconfont .icon-{{item}}" style="display:inline-block">
  <text>{{facility_name[index]}}</text>
</view>


这时候显示的效果应该是这样的:



最后一次编辑于  02-16  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

1 个回答

  • 吴奕群
    吴奕群
    02-17

    审查元素?

    02-17
    赞同 1
    回复 6
    • Aero
      Aero
      02-17

      审查元素只可以看到小程序自身的virtual DOM,而不是编译后的真实DOM

      02-17
      回复
    • 吴奕群
      吴奕群
      02-18回复Aero

      那是看不到了,除非你去反编译才可以,微信自己在这一层又封装了一遍

      02-18
      1
      回复
    • Aero
      Aero
      02-18回复吴奕群

      可以看到的,微信只是关闭了chromium的原生的审查元素,去掉flag并且找到开启的入口就可以了。去掉flag比较简单,开启的入口还没有找到。目前暂时先用反编译的方式解决这个问题。

      02-18
      回复
    • 彩云衣内容电商平台
      彩云衣内容电商平台
      02-18回复Aero

      请教下 如何去掉flag

      02-18
      回复
    • Aero
      Aero
      02-21回复彩云衣内容电商平台

      反编译开发者工具以后在node进程的package.json内去掉启动chromium的flag。

      02-21
      回复
    查看更多(1)