weex init 项目宽度高度native和html不适配问题

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": "^0.11.2"


现在weex-vue-render 已经都是2.0 以上的版本了

^的意思是将 weex-vue-render 他将会把当前库的版本更新到当前major version(也就是第一位数字)中最新的版本,也就是说,它不可能更新到0.2.0以上的版本


所以我们修改成以下

"weex-vue-render": "^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 文件

修改 

< script src= "./node_modules/weex-vue-render/dist/index.js" > < / script >

< script src= "./node_modules/weex-vue-render/index.js" > < / script >

再次刷新页面我们可以看到两个页面

这时候大小已经完全一致了


这里说一句,weex 官方提供的工具出现这样的问题也是真的很无语了





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值