vue开发手机端一些问题（转自网络）

一、使用移动组件库mint-ui

Mint UI 是基于Vue.js的移动组件库，有不少可使用，参考这里

使用时首先install，

 

npm i mint-ui --save

以后须要先引入组件，在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并指定其高度，里面的内容超过这个高度才会滚动。

 

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

在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)

以后使用的时候,以下实现左滑右滑的事件控制，

<div v-touch:left="menuDisappear" v-touch:right="showMenu"></div>

 

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文件里加上

 <WebView
        android:id="@+id/webView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />

在项目的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;
           
         }
        
    });

   
 }
}

 

参考文献

[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

转自：http://www.javashuo.com/article/p-hrkdibcd-g.html