weex 本来旨在一个项目跑三端,可是weex的工具最近更新最新版本后,创建了一个项目,我就蒙圈了
首先
weex init screentestproject
项目创建完成
我们顺序执行 cnpm install, npm run dev, npm run serve
然后打开网页分别预览一下native 和网页效果
可以看到在h5 页面上 weex 这个图标 和hello World 的大小明显是比 native 的预览的大
仔细看代码,这个是大了一倍多,这个情况下,html5 页面的宽度 360px 为全屏了,而native 的页面是 750px为全屏,具体可以看一下vue代码
<template>
<div class="wrapper" @click="update">
<image :src="logoUrl" class="logo"></image>
<text class="title">Hello {{target}}</text>
</div>
</template>
<style>
.wrapper { align-items: center; margin-top: 120px; }
.title { font-size: 48px; }
.logo { width: 360px; height: 82px; }
</style>
<script>
export default {
data: {
logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
target: 'World'
},
methods: {
update: function (e) {
this.target = 'Weex'
console.log('target:', this.target)
}
}
}
</script>
可以看到图片360px 已经在网页浏览全屏了
怎么去修复这个问题
查了一下,可能出现问题的就是那个
^的意思是将 weex-vue-render 他将会把当前库的版本更新到当前major version(也就是第一位数字)中最新的版本,也就是说,它不可能更新到0.2.0以上的版本
所以我们修改成以下
然后我们再执行 cnpm install , npm run dev,npm run serve
刷新刚才的两个页面
刷新后我们会发现报错
weex.html:15 GET http://localhost:8080/node_modules/weex-vue-render/dist/index.js 404 (Not Found)
这个是因为 安装了0.2.0以上的 weex-vue-render 的时候module 中目录结构发生了变化
打开 weex.html 文件
修改
再次刷新页面我们可以看到两个页面
这时候大小已经完全一致了
这里说一句,weex 官方提供的工具出现这样的问题也是真的很无语了