vue開發手機端一些問題（轉自網絡）

時間 2019-11-08

標籤 vue 開發手機一些問題網絡欄目系統網絡简体版

原文原文鏈接

一、使用移動組件庫mint-uicss

Mint UI 是基於Vue.js的移動組件庫，有不少可使用，參考這裏

使用時首先install，html

npm i mint-ui --savevue

以後須要先引入組件，在main.js中java

import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';android

Vue.use(MintUI);git

使用了date time picker，用來選擇日期，Indicator用來顯示正在加載，Toast用來彈出提示信息，loadmore的pull-down實現上拉加載更多。github

具體使用方法參見文檔web

注意：pull-down使用時，在進入界面時直接觸發繼續加載的事件，在滾動的外面須要加一個div並指定其高度，裏面的內容超過這個高度纔會滾動。npm

<div ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
<mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill='false'>
</mt-loadmore>
</div>segmentfault

在script裏須要引入這個組件，並且須要在mounted鉤子里加入

import { Loadmore } from 'mint-ui'

mounted: function () {
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)

二、一些細枝末節

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裏添加

.modal-show {
position: fixed;
width: 100%;
}

以後，添加方法

disable_scroll: function () {
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裏添加監聽

watch: {
isShow: function () {
if (this.isShow) {
this.disable_scroll()
} else {
this.enable_scroll()
}
}

}

問題得以解決

三、使用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_profile

export 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同級加上

<uses-permission android:name="android.permission.INTERNET"/>

在layout的activity_main文件里加上

在項目的main activity里加上

import android.webkit.WebView;
 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; 
} 
});  
} }