weex:构建weex项目及注意事项
安装node.js详细请看:vue学习(五)—vue-cli构建vue项目目录结构文章介绍了怎么安装node 并介绍如何使用淘宝npm镜像cnpm然后全局安装 weex-toolkit(类似vue-cli)检查weex是否安装完成安装webpack(这点和vue不同,vue不需要单独安装)创建weex项目项目构建完成构建...
·
- 安装node.js
详细请看:vue学习(五)—vue-cli构建vue项目目录结构
文章介绍了怎么安装node 并介绍如何使用淘宝npm镜像cnpm
- 然后全局安装 weex-toolkit(类似vue-cli)
如果出现错误
- 检查weex是否安装完成
- 安装webpack(这点和vue不同,vue不需要单独安装)
- 创建weex项目
- 项目构建完成
- 构建项目是会自动安装weexpack
- 添加对android和ios的支持
-会自动创建android和ios项目(类似RN)
- 文档中的坑
weex run ios
weex run android
执行上面两条命令时会出现无法找到服务器,一般在as中进行预览即可
在as中打开platforms目录下的android项目
注意as的版本,目前weex自动创建的项目对应的as是3.0以下的项目
- 运行方式一:直接使用npm run serve(注意和vue的区别:npm run dev)
- 运行方式二:如果没有npm install,先npm install(我这里安装过了),然后npm start
打包dist(npm run dev:注意这里和vue项目的区别)
第一次打包使用:npm run dev 更新打包:npm run build
如果在android中看效果,把dist中的index.js内容copy到android的assets目录下的index.js中即可
weex与vue差别
1、布局不同
float 浮动,weex不支持,推荐使用Flex,Flex移动端都支持
2、不支持百分比布局
3、不支持综合式写法(border:1px solid #ccc)
border-width: 2px;
border-style: solid;
border-color: #bbbbbb;
4、长度单位只支持px
5、weex不支持多种CSS选择器(子元素,伪元素....),只支持单独的class或者id选择器
6、weex使用文本必须使用text组件
7、weex新增文本行数的css样式 lines 如果lines:1 表示显示一行,多了显示省略号
8、weex不支持img 使用的和小程序一样image标签(且weex中image需要设置宽高,才有效果)
宽750px 相当于宽100% ; 高1350px 相当于高100%
9、weex不支持router-link,只能使用编程式导航 this.$router.push({name:'listpage'});
路由的三个模式:hash,history,abstract只有我们的abstract是可以使用的,其它使用都会出现问题。
<template>
<div>
<text @click="jump">Profile</text>
</div>
</template>
<script>
import router from './path/to/router'
export default {
methods: {
jump () {
router.push('profile')
}
}
}
</script>
10、week不建议使用vue-router,过多使用会出现性能问题
11、使用vuex注意,vue是单页应用,week是多页应用,不在同一个页面获取不到之前的vuex中的数据
12、weex默认使用的盒模型是 box-sizing: border-box; padding是不会撑开盒子的
13、weex支持定位,不支持z-index,元素层级按照先后顺序,越靠后层级越高
14、week伪类只支持active,有一个特例输入框(input , textarea)支持focus,enabled,disabled
15、浏览器项目显示:
带有二维码的页面
http://192.168.18.30:8081/web/preview.html?page=index.js
普通页面,可以使用浏览器调试
http://192.168.18.30:8081
更多推荐
已为社区贡献19条内容
所有评论(0)