weex-- 脚手架 AND native与Web 上的差异

weex 分享

搭建环境 ：

先安装node环境获取npm，不会的话，就算了（下载node,一路next，最新版的环境变量都省了，npm也会自动安装）。
然后

// 1 
npm install -g weex-toolkit
// 2
weex init awesome-project
//3
npm install
// 4 
npm run dev
// 5
npm run serve
// 6
进入 http://localhost:8080/index.html

官方地址： weex环境

Tips:

npm install 建议使用淘宝镜像（人在国内并且没有vpn会员），安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

注意环境顺序
话说我就很倒霉了，dev之后npm各种报错,应该是安装的姿势不对，解决方案是删除module,然后重新安,cnpm install

喵喵喵

1. DIV标签不能输入文字，这个比较好搞，跟小程序那傻逼一样，要自己搞一套东西。目前有这些：
   <a>
   <slider>
   <indicator>
   <switch>
   <text>
   <textarea>
   <video>
   <web>
   <div>
   <image>
   <input>
   <waterfall>
   <list>
   <cell>
   <loading>
   <refresh>
   <scroller>

2.样式只有一个长度单位 'PX' (no %, no rem, no em)

3.没有window这个东西，自然也没有Dom这个东西，但是支持一些基本的操作

3.只有px，劳资还怎么自适应，于是比例的单位就需要去计算，而没有window，不过有 weex.config

weex.config

env: Object: 环境对象。
weexVersion: string: Weex sdk 版本。
appName: string: 应用名字。
appVersion: string: 应用版本。
platform: string: 平台信息，是 ‘iOS’、’android’ 还是 ‘Web’。
osVersion: string: 系统版本。
deviceModel: string: 设备型号 (仅原生应用)。
deviceWidth: number: 设备宽度。Weex 默认以宽度为 750px 做适配渲染，要获得750px下的屏幕高度，可以通过 height = 750/deviceWidth*deviceHeight 公式获得，可以使用到 CSS 中，用来设置全屏尺寸
deviceHeight: number: 设备高度。

APP展示效果

4.没有全局alert属性 ，不过有脚手架自带 modal 模块

首先引入

let modal = weex.requireModule('modal')

然后测试下

modal.alert({
    message: weex.config
})

更多用法: WEEX内建模块

OK

接下来下一篇就是路由了

技术交流QQ群： 116093826

--END--