1.对于下划线,背景色,普通颜色字体的处理方式如下:
①如果后端返回的是#******的方式,通过下面的方法转换为rgb。
hexToRgb: function(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
},
然后将颜色写进全局的js变量中,如下:
app.globalData.glBackground = "linear-gradient(to right, rgba(" + r + "," + g + "," + b + ",0.6), rgba(" + r +
"," + g + "," + b + ",1))";
app.globalData.glBottom = "6rpx solid rgba(" + r + "," + g + "," + b + ",1)";
that.glColor = app.globalData.glColor;
②在页面上进行颜色拿取
:style="'background-image:'+glBackground",通过大致的这样的拼接进行颜色获取。
2.对于图片的处理稍微麻烦一些,首先需要拿到所有的svg图,下面我写好了一个组件,可以直接调用,原理是用一个view去包裹图片,然后在svg图的下面绘制了一个等大的图片,将该图片上移,把原图片顶出去,然后将容器设置为overflow-hidden即可。
组件输入:width:图片宽度。 height:图片宽度。 imgSrc:图片路径
组件代码见个人博客 组件库--svg封装 中
总结:主题色最好在进行网页绘制阶段就进行调整,否则后期会花费更多时间和精力去处理。