100-days-Coding - day10

day10-0814

bug记录仪

bug-detail 「css属性无法生效」

微信公众号开发，网页中涉及到对于一个按钮的动态背景调整。即根据传入的不同参数进行动态修改样式，

咩1.

采用方案 - 「动态修改class」

        function getInvoiceState(obj) {
            if (SERVICE_TYPE > 2) { // 未开票
                return 'btn-invoice'
            } else {
                // 开票中 根据 status 0
                var st = obj.status
                if (st === '0') {
                    return 'btn-invoicing'
                }

                return 'btn-invoiced'
            }
        }

结果: 对应的class的效果没有出现
可能原因： 由于已经使用了!important提升了权重，考虑可能是class的优先级导致框架自身的优先级更高

咩2.

动态添加style，修改background-color属性

// 代码同上，仅修改返回值
...
return "background-color: color"

结果：依旧没有生效
可能原因： f******k

css属性值修改没有生效，如此简单的bug，也没有什么其他愿意会触发，见了鬼鬼。

💇💇💇💇💇💇💇💇💇💇💇💇💇💇💇💇💇💇💇💇💇💇💇💇💇

---

咩咩咩

使用CDT检查也没有什么错误出现呀！
等等，background-color为什么会有一个叹号

! - invalid property

最终发现：

• 我的写法

background-color: rgb(123, 45, 88, .45);

• f*****k 应该是

background-color: rgba(123, 45, 88, .45);

至此，bug修复

Breakpoint

祝愿所有的bug都能够被很快的fix

---

今天碰到一个小需求：需要在移动端对pdf进行预览 「微信公众号」

可行性方案：

• A. iframe 载入src of your_pdf 「embed同这个方案」
• B. jquery.media.js 插件辅助显示
• C. pdf - png / jpg 后端辅助
• D. pdf.js - http://mozilla.github.io/pdf.js/

A. 简单的iframe应用

手机打开后会直接跳转下载，无法正常预览查看 「和pc不同，pc可预览」

B. 插件使用

$('#showpdf').media({
  width: '100%',
  height: '100%'
})

手机打开后会直接跳转下载，无法正常预览查看 「和pc不同，pc可预览」 - 同上

C. pdf - png / jpg 后端辅助

暂时未实现，大体思路是： 使用开源工具 或者 api 对要展示的pdf进行图片生成 并返回该图片

D. pdf.js

暂时未实现，preference - blog
不足: 需要的资源太大，会造成卡顿

Note: 以上测试均在android，ios还未测试

---

END

盼： 有更好，更省力的方案实现 @ friends of JianShu