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 他将会把当前库的版本更新到当前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 官方提供的工具出现这样的问题也是真的很无语了
- weex init 项目宽度高度native和html不适配问题
- react-native之高度和宽度问题
- 解决ScrollView嵌套RecycleView高度不适配问题
- Weex入门教程之4,获取当前全局环境变量和配置信息(屏幕高度、宽度等)
- HTML中,关于元素的高度与宽度的问题
- recyclerview 只显示一行 宽度不适配
- html之给文本框设置宽度和高度...
- HTML <textarea> cols, rows属性和宽度高度关系研究
- 在html中,屏幕、浏览器、body的高度和宽度
- html 表格单元格的宽度和高度的设置
- Weex初识和问题
- Html中的各种高度宽度
- html中各种高度宽度
- html的各种宽度 高度
- html获取窗口高度宽度
- 各种高度和宽度
- 24高度和宽度
- Weex 和 React Native的比较
- UVA 10878
- 设计模式之——享元设计模式
- 【推荐】LiveVideoStackCon 2017 音视频技术大会
- Spring的IOC和DI深入解读
- UVA 10815
- weex init 项目宽度高度native和html不适配问题
- 简历驱动开发(Resume Driven Development)
- SSM报错(二)Mybatis+c3p0+mysql报错mysql-connector-java 6.0.0
- Linux学习---7
- activiti学习--06流程变量:流程变量+变量的类型+流程变量api+设置流程变量1或2+查询流程变量的历史表
- 什么是hard negative mining
- maven java项目打包发布插件 maven-assembly-plugin
- vue饿了么学习-第七篇(组件拆分)
- java poi 生成excel模板