比如我有一个小程序的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> |
这时候显示的效果应该是这样的：
审查元素？
审查元素只可以看到小程序自身的virtual DOM，而不是编译后的真实DOM
那是看不到了，除非你去反编译才可以，微信自己在这一层又封装了一遍
可以看到的，微信只是关闭了chromium的原生的审查元素，去掉flag并且找到开启的入口就可以了。去掉flag比较简单，开启的入口还没有找到。目前暂时先用反编译的方式解决这个问题。
请教下 如何去掉flag
反编译开发者工具以后在node进程的package.json内去掉启动chromium的flag。