Vue(9)

一、使用移动端进行访问测试

1、修改访问地址：使用ip地址访问

为了方便直接在手机上测试，我们可以让电脑和手机处于同一局域网，然后就能在手机端访问电脑端开启的服务器了。当然，在手机上我们不能使用localhost来作为访问地址，而已替换为电脑的IP地址。电脑的ip地址查看方式使用cmd命令打开命令行并输入ipconfig命令便可以查看当前电脑的ip地址。

比如当前的电脑访问地址为：http://localhost:8080/#/home。在手机端我们改为：http://192.168.6.66:8080/#/home即可。

这样做有点麻烦，且当项目不在当前电脑时我们还需要重新查询ip地址，所以我们使用node提供的os模块来获取ip地址。并写在配置中，这样，我们在哪台电脑下都可以进行直接访问了。

• 获取ip地址的方法

  //使用os模块获取本机ip地址
  function getIPAdress() {
    var interfaces = os.networkInterfaces();
    for (var devName in interfaces) {
        var iface = interfaces[devName];
        for (var i = 0; i < iface.length; i++) {
            var alias = iface[i];
            if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
                return alias.address;
            }
        }
    }
    return 'localhost';
  }
  

二、图片分享界面

1、组件

我们使用MUI提供的顶部选项卡。

我们使用新的Vue文件来定义组件，比如命名为：shareimage.vue：

<template>
    <div>
        <!--顶部选项卡-->
        <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" data-scroll="1">
            <div class="mui-scroll">
                <a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
                    推荐
                </a>
                <a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
                    热点
                </a>
                <a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
                    北京
                </a>
                <a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
                    社会
                </a>
                <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
                    娱乐
                </a>
            </div>
        </div>

        <!--显示区-->
    </div>
</template>

具体参考示例文件：tab-top-webview-main.html
查看文档说明可知，区域滚动组件是js组件，所以需要对组件进行初始化。
导入mui.min.js之后报错（低版本还会报其他错误，如webpack默认启用严格模式，而该js中使用了非严格模式的代码，所以需要设置相关插件或配置禁用严格模式）。
最新版本貌似使用了严格模式的代码，但是还是有新的错误。

mui.min.js:9 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive