Vue app开发踩过的那些坑(二)
最近接了一个活儿，甲方要求用Vue来进行开发，于是乎，从头开始读了一遍官方文档，便开始写代码了。之前接触过Angular js，不过理解不深，但是对上手Vue来说，还是有帮助的。对于CSS，也老是记不住一些属性，在开发过程中，也算进行了复习。这篇文章主要纪录了在开发过程中遇到的坑以及对应的我的解决方案，参照网上的解决方案的大部分都贴了原文地址，如有问题，欢迎指正。
-----------------------------------------------------------------我是分割线--------------------------------------------------------------------------
1、使用移动组件库mint-ui
之后需要先引入组件，在main.js中
import MintUI from 'mint-ui';import 'mint-ui/lib/style.css';
Vue.use(MintUI);
使用了date time picker，用来选择日期，Indicator用来显示正在加载，Toast用来弹出提示信息，loadmore的pull-down实现上拉加载更多。
具体使用方法参见文档
注意：pull-down使用时，在进入界面时直接触发继续加载的事件，在滚动的外面需要加一个div并指定其高度，里面的内容超过这个高度才会滚动。
在script里需要引入这个组件，而且需要在mounted钩子里加入
this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top
},
对应的继续加载的函数如下
loadBottom: function () {this.currPage ++
HTTP.get('你的url' + '?page=' + this.currPage + '&size=' + this.pageSize)
.then(function (response) {
if (response.data.results.length === 0) {
this.allLoaded = true // 当所有数据 全部读取完成的时候 停止下拉读取数据
}
this.items = this.items.concat(response.data.results)
}.bind(this))
.catch(function (error) {
console.log(error)
})
this.$refs.loadmore.onBottomLoaded()
}
在下拉到一定位置之后进入到下级页面，需要纪录用户的位置，在router的定义的文件里，加入
mode: 'history',
scrollBehavior (to, from, savedPosition) {if(savedPosition) {
setTimeout(() => {
window.scrollTo(savedPosition.x, savedPosition.y)
}, 200)
}
}
同时，需要纪录用户当前加载到那个页面，目前的解决方案是在beforeRouterLeave中存储当前页数，在返回到这个页面的时候，从localStorage中读取一下页数，加载出来
beforeRouteLeave (to, from, next) {this.$localStorage.set('backlogPage', this.currPage)
next()
}, HTTP.get('你的URL?page=1&size=' + size)
2、一些细枝末节
1) js的数组遍历
Arr.forEach(function(obj){console.log(obj)
}) 2) JavaScript中有 6 个值为“假”: false, null, undefined, 0, ''(空字符串), NaN. 其中 NaN 是 JavaScript 中唯一不等于自身的值, 即 NaN == NaN 为 false. 3) JavaScript splice() 方法，删除数组的特定元素
4) ===是精确等于，==是各种类型的都可以判断等于
严格”的”===”，它在求值时不会这么宽容，不会进行类型转换。所以表达式strA === strB的值为false，虽然两个变量持有的值相同。使用”==”操作符时，JavaScript会尝试各种求值，以检测两者是否会在某种情况下相等。所以下面的表达式结果为true： strA == strB。
5) js弹出选择框、提示框等
//弹出一个询问框，有确定和取消按钮function firm() {
//利用对话框返回的值 （true 或者 false）
if (confirm("你确定提交吗？")) {
alert("点击了确定");
}
else {
alert("点击了取消");
}
}
6) date格式的设置
采用JS的date对象的方法date.toLocaleDateString()可以将date对象转换成字符串的形式
7) 页面刷新
window.location.reload()
8) 输入框的禁用
disabled属性，true时不能写
9) 文本溢出的处理
一行字数太多，不能完全显示的，可以采用溢出的部分用...表示的方式
overflow : hidden;text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
10) 导航栏（抽屉），右滑弹出，左滑消失，滚动禁用(就是导航栏未出现时页面可以滚动，导航栏出现后导航栏这一层的下面就不能滚动（但导航栏里的内容能滚动）
使用vue-directive-touch插件，首先install,在main.js中引入并use
import touch from 'vue-directive-touch'
Vue.use(touch)
之后使用的时候,如下实现左滑右滑的事件控制，
web端禁止鼠标滚轮，可以采用
onmousewheel="return false;"
移动端，禁止用户滑动屏幕，touch事件，touchstar,touchmove,touchend
ontouchmove="return false;"
同时，可以采用移动端的fixed布局，实现固定的标签等布局
之后，在移动端出现，首页滑动到底部时，抽屉自动弹出，以及移动端滚动穿透问题
解决方案，首先在css里添加
position: fixed;
width: 100%;
}
之后，添加方法
this.scrollTop = document.getElementById('yourId').scrollTop
document.getElementById('yourId').classList.add('modal-show')
document.getElementById('yourId').style.top = -this.scrollTop + 'px'
},
enable_scroll: function () {
document.getElementById('yourId').classList.remove('modal-show')
document.getElementById('yourId').scrollTop = this.scrollTop
}
最后，在watch里添加监听
isShow: function () {
if (this.isShow) {
this.disable_scroll()
} else {
this.enable_scroll()
}
}
}
问题得以解决
3、使用webview将vue开发的app安装到手机
1) IOS的UIWebView使用方法
使用示例：在Xcode中新建Single View Application，在ViewController.m中的viewDidLoad中加入
UIWebView * view = [[UIWebView alloc]initWithFrame:self.view.frame];
[view loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
[self.view addSubview:view];之后新建项目，报错，
App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.
解决方案是：
在info.plist 中输入App Transport Security Settings ====>Allow Arbitrary Loads
2) Android的WebView
首先，下载android studio,新建一个空的project,配置环境变量
open .bash_profileexport ANDROID_HOME=SDK地址
export PATH=$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools:$PATH报错，null
java.lang.NullPointerException at com.jetbrains.cidr.lang.workspace.OCWorkspaceManager.getWorkspace(OCWorkspaceManager.java:12) at解决方案：禁用插件NDK 即可
使用webview的方法
在manifest.xml中与application同级加上
在layout的activity_main文件里加上
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
在项目的main activity里加上
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
private WebView webview;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webview = (WebView) findViewById(R.id.webView1);
WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setSupportZoom(true);
webSettings.setLoadsImagesAutomatically(true);
webSettings.setDomStorageEnabled(true); //不设置的话不能load页面
webview.loadUrl("http://www.baidu.com/");
webview.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
} }
参考文献
[1] https://zhuanlan.zhihu.com/p/21802181
[2] http://mint-ui.github.io/docs/#/en2/
[3] http://www.jeffjade.com/2015/08/28/2015-09-02-js-string-compare/
[4] http://jerry12356.blog.51cto.com/4308715/1606740
[5] http://lomu.me/post/css-multiline-text-overflow
[6] https://my.oschina.net/u/2340880/blog/469916
[7] http://www.jianshu.com/p/29257388b8cb
[8] http://www.cnblogs.com/pilang/archive/2011/04/20/2022932.html
[9] http://blog.csdn.net/jueblog/article/details/12985045
[10] https://github.com/BensonDu/vue-directive-touch
[11] https://leohxj.gitbooks.io/front-end-database/problems-in-develop-webapp/web-position-fixed.html
[12] https://segmentfault.com/a/1190000005617307
[13] https://iiong.com/fuck-the-scroll-bar-problem.html
[14] https://github.com/pod4g/tool/wiki/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%BB%9A%E5%8A%A8%E7%A9%BF%E9%80%8F%E9%97%AE%E9%A2%98
[15] https://div.io/topic/398