一、vue-source【全局】配置需要注意的问题
Vue.http.options.emulateJSON = true;
Vue.http.options.emulateHTTP = true;
1. emulateHTTP
emulateHTTP（布尔值）。默认值为:false，设置值为true时，PUT, PATCH和DELETE等请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。。
2. emulateJSON
emulateJSON(布尔值)。默认值为：false,设置值为true时，数据（无论是get还是post）都会以formdata（表单提交方式）的形式发送数据。所以我们在给后台传递参数的时候需要加JSON.stringify(参数)处理一下。
如果服务器无法处理编码为application/json的请求，可以启用emulateJSON选项。启用之后，请求会以application/x-www-form-urlencoded为MIME type，就像普通的HTML表单一样。
二、正则转义
Ps:需求在使用富文本编辑器（我使用的是Ueditor）时，传到后台数据需要对“双引号”进行转义
str.replace(/\"/g,'\\"');//进行转义然后转给后台
str.replace(/\\"/g,'"');//从后台拿到的数据进行反转义
三、混合开发中的异步部请求处理
混合开发中我们会用到安卓或者ios同事提供的jsBridge，来调用原生事件。但我们在请求后台的接口中需要把“这个参数”传递过去，所以我们就需要用异步处理。
import jsBridge from 'common/js/jsbridge'; // 引入jsBridge
jsBridge.getHeader().then((data)=>{//成功处理函数},(err)=>{//失败处理函数});//注意此处的“getHeader()”函数不一定和我的一样名称。这个是别小伙伴（安卓或IOS）定的
四、vue脚手架(vue-cli)生成项目渲染注意点
在用vue生成的项目中,，针对index.html、app.vue、main.js三者之间关系
项目目录
|----src
|--App.vue
|--main.js
|----index.html
简要说明
mian.js将项目的依赖关系（包括vue,vue-router,axios,mintui等等插件）引入，其中也包括App.vue（主要展示区）文件，渲染到index.html中。这其中有几种配合方案千万不要混淆，否则效果会出不来。
第一种写法
index.html中：
<div id="app" style="width:100%;height: 100%;"></div>
main.js中：
new Vue({
template:<App/>,
components: {App}
}).$mount('#app');
第二种写法
index.html中：
<div id="app" style="width:100%;height: 100%;">
<router-view></router-view>
</div>
main.js中：
new Vue({
components: {App}
}).$mount('#app');
第三种写法
index.html中：
<div id="app" style="width:100%;height: 100%;">
<App></App>
</div>
main.js中：
new Vue({
components: {App}
}).$mount('#app');
第二种写法文件内容
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>h5</title>
</head>
<body>
<div id="app" style="width:100%;height: 100%;">
<router-view></router-view>
</div>
</body>
</html>
mian.js
import Vue from 'vue';
import App from './App';
new Vue({
components: {App}
}).$mount('#app');
App.vue
<template>
<div class="app-wrapper">
<router-view></router-view>
</div>
</template>
<script>
export default {};
</script>
<style lang='scss' rel="stylesheet/scss" type="text/css" scoped>
.app-wrapper{
width:100%;
height:100%;
}
</style>
五、H5页面使用iframe
描述：在捕捉到a标签跳转信息，将其“指引”到iframe中进行打开。
<div class="link-iframe" v-show="iframeState">
<div class="go-back" @click="goBack">关闭</div>
<iframe id="show-iframe" frameborder=0 name="showHere" scrolling=auto src=""></iframe>
</div>
//js获取到a标签
const aLink = this.$el.querySelectorAll('.detail-content a');
if(aLink.length){
for (let i=0;i<aLink.length;i++){
aLink[i].setAttribute('target','showHere');
let href = aLink[i].getAttribute('href') +'?new='+Math.random()*Math.random();
aLink[i].setAttribute('href',href);
aLink[i].addEventListener('click',function(){
_this.iframeState = true;
},false);
}
}
注意问题：
1、 在ios下，由于安全沙箱，部分网站打不开（http或者https） ；
2、 在Iso下，设置了iframe的宽和高，若外链页面大于一屏不会显示滚动条；
3、 ifram中的外链进行再次跳转的记录，会存到浏览器的历史记录中（window.history）；
七、ISO下按钮（Button）
描述：页面中使用button并且用固定定位(fixed)时，在Iso下由于“橡皮筋效果”，会出现异常。
解决：用a或其他标签模拟button。
八、
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>format-detection</title>
</head>
<body>
<div style="color:lawngreen;">13512345678</div>
</body>
</html>
微信图片_20170804180942.jpg
QQ图片20170804181155.png
网友评论