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

来源:互联网 发布:linux源码下载 编辑:程序博客网 时间:2024/05/23 19:41

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 官方提供的工具出现这样的问题也是真的很无语了





原创粉丝点击