日常bug总汇

日常bug总汇

图片与图片之间有缝隙

• 该图片为块级元素
• 设置body的line-height:0;

art-template模板遍历对象

html部分:

<!-- 渲染模板显示的位置 -->
<div id="content"></div>

模板js部分

<!-- 引入对应的模板 -->
<script src="https://www.dfs168.com/output/js/template.js"></script>
<!-- 模板使用放在script中,给script标注id -->
<script type="text/html" id="contenttpl"> 
    <ul>
        {{each list as value i}} //遍历的元素可以是数组也可以是对象
        <li>
            <div class="left">
                <img src="{{value.goods_image}}"
                    alt="">
            </div>
            <div class="right">
                <div class="tit">
                    {{value.goods_name}}
                </div>
                <div class="trait">{{value.tag}}</div>
                <div class="price">
                    <div class="now">活动价 <i> ¥ </i><span>{{value.goods_price}}</span></div>
                    <del class="old">原价<span>¥{{value.goods_marketprice}}</span></del>
                </div>
                <div class="pay"><a href="{{value.pc_url}}">立即购买 ></a></div>
            </div>
        </li>
        {{ /each }}
    </ul>
</script>

js调用

<script>
    $.ajax({
        url: "https://www.dfs168.com/wgfd/goods/jsons?id=12yuedongjimaizengzhuanchang",
        type: 'GET',
        data: {},
        dataType: 'jsonp',
        jsonp: 'callback',
        contentType: "application/javascript;utf-8",
        jsonpCallback: 'flightHandler',
        success: function (data) {
            //console.log(data)
            var html = template('contenttpl', {list:data}); //生成对于html.template(参数1,参数2) 参数1为模板所在位置的id,参数2为渲染参数,一定是一个对象
            //console.log(html)
            document.getElementById('content').innerHTML = html;//添加到指定位置
        }
    });
</script>

注:使用模板可以遍历数组也可以遍历对象,遍历对象的话,低版本需要包裹.

vue中使用lsee

• npm安装less

npm install less less-loader --save

• 配置对应的loader
  myObject>build>webpack.base.conf.js中配置

{
  test: /\.less$/,        
  loader: "style-loader!css-loader!less-loader",        
}

• 页面中使用:在组件中的style 添加lang=“less”

<!-- 在组件中的style 添加lang="less" -->
<style scoped lang="less">
.search {
display: flex;
.input {
  flex: 1;
  color: #fff;
  line-height: 30px;
  background-color: rgba(11, 59, 11, 0.6);
  display: flex;
  border-radius: 5px;
  input {
    border: none;
    display: block;
    color: #fff;
    background: none;
    height: 30px;
    font-size: 16px;
    line-height: 32px;
    flex: 1;
    outline: none;
  }
}
.icon-dianhua {
  display: block;
  width: 30px;
  height: 32px;
  line-height: 32px;
  font-size: 30px;
  text-align: center;
  margin-left: 10px;
  color: #fff;
  background-color: rgba(11, 59, 11, 0.6);
  border-radius: 5px;
}
}
</style>

微信分享问题

1.分享只能分享当前页

2.ios不会重新加载相同带参数地址,使用vue下$router.push()或者replace(),不会修改url地址,如果分享出去的地址时带参数的,需要使用强制刷新赋值

分享制作

<!--- 导入分享文件 --->
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>


function is_weixn(){
	var ua = navigator.userAgent.toLowerCase();  
	if(ua.match(/MicroMessenger/i)=="micromessenger") {  
		return true;  
	} else {  
		return false;  
	} 	
}

if (is_weixn()) {//微信中使用
	let shareUrl = window.location.href;//只能分享当前页
	var data = {'url': opt.share_url}; 
	console.log('shareUrl',shareUrl)
	Api.common.getConfig(data).then(res=>{
		var wxConfig = res;//接口返回配置证书和签名等相关配置信息
		wx.config(wxConfig);//通过config接口注入权限验证配置
		wx.ready(function () {
		let shareIndex = {
			title: '分享标题 ',
			desc: '分享描述 ',
			link: shareUrl,
			imgUrl: '分享图标'
		};
		wx.onMenuShareAppMessage(shareIndex);//分享给微信好友 wx.onMenuShareQQ/wx.onMenuShareWeibo/wx.onMenuShareQZone
		wx.onMenuShareTimeline(shareIndex);//分享到朋友圈
		
	}); 
  })
}

// 其中wxwork是企业微信关键字，2.1.0为用户安装的微信版本号。MicroMessenger是微信的关键字。

/* config具体配置
wx.config({  
  debug: false,   // 开启调试模式,调用的所有api的返回值会在客户端alert出来
  appId: '${params.appId}',  // 必填，公众号的唯一标识 
  timestamp: '${params.timestamp}',  // 必填，生成签名的时间戳
  nonceStr: '${params.noncestr}',  // 必填，生成签名的随机串 
  signature:'${params.signature}', // 必填，签名，见附录1 
  jsApiList: [  
     'onMenuShareTimeline',  
     'onMenuShareAppMessage'   
  ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 
});

  */
</script> 

php混合开发时,严格执行编译语法

混合开发出现测试环境无报错,线上出现问题,主要原因是因为线上代码强压缩后,代码中缺少闭合,部分手机(特别安卓机)会因为报错中断js执行,出现失败的情况.导入debug后,打印错误->Uncaught SyntaxError: Unexpected end of input;

vue项目打包不存掉部分样式

h3 {
    height: .72rem;
    font-size: .28rem;
    line-height: 1.29;
    color: #555;
    padding: 0 .16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;/* 打包后样式缺失 */
    margin-top: .15rem;
}

原因

-webkit-box-orient: vertical  这个属性被 optimize-css-assets-webpack-plugin插件在编译时删除掉了

解决办法

h3 {
	/* autoprefixer: off */
	-webkit-box-orient: vertical;
	/* autoprefixer: on */
}