weex框架入门
前端开发一起交流QQ群：740034288。
互联网创业团队兴趣QQ群：792710437。
新建《团队合伙人》贴吧：。
参考：。。
1.特点：跨平台的移动开发工具，支持es6，性能优异。
2. weex Playground：是weex的调试工具。
3. 搭建weex的环境：
3.1 安装node：程序cmd->node-v查看node版本（npm -v查看npm版本）。
3.2 安装全局weex：npm install weex-toolkit -g ，按照成功后输入 weex 可以查看指令，weex -v查看weex版本号。
3.3 找到要新建的weex项目的地方创建一个weex项目：weex create item（项目文件名）。
3.4 安装依赖npm install：进入cd item项目命令行，执行npm install。
3.5 npm run serve & npm run dev：运行项目，npm run serve=npm start，npm run dev表示实现同步视图更新数据。
#可以在package.json中配置 npm run devp ，即允许npm run devp相当于同时运行npm run dev 和 npm run serve
"scripts":{
"devp":"npm run dev & npm run serve"
}3.6 playground扫码查看vue项目， 一定要让手机和电脑连接同一网络（或者360无线wife手机连接）。
3.7 weex debug：调试模式。
注意：，是需要给npm降级或者升级
降级 ： npm install -g [email protected]
升级 ： npm install -g npm 升级到最新版
报错Unexpected end of JSON input while parsing near，npm cache clean --force
提示this command need to install weexpack， npm install -g weexpack
报错：，参考：。注意：手机playground扫码查看vue项目， 一定要让手机和电脑连接同一网络（或者360无线wife手机连接）。
编译和运行
默认情况下 weex create 命令并不初始化 iOS 和 Android 项目，你可以通过执行 weex platform add 来添加特定平台的项目。
weex platform add ios
weex platform add android
由于网络环境的不同，安装过程可能需要一些时间，请耐心等待。如果安装失败，请确保自己的网络环境畅通。
为了能在本地机器上打开 Android 和 iOS 项目，你应该配置好客户端的开发环境。对于 iOS，你应该安装
并且配置好 Xcode。对于 Android，你应该安装并且配置好 Android Studio。当开发环境准备就绪后，
运行下面的命令，可以在模拟器或真实设备上启动应用：
weex run ios
weex run android
weex run web4. weex通用样式：
4.1 适配和缩略：
4.1.1 weex目前只支持像素值px：不支持相对单位(em，rem)，适配以750px为标准。
4.1.2 设定边框：weex的border不支持border:1px solid red这样的组合写法。
4.1.3 设定背景色：weex不支持background:red，只能background-color:red。
4.2 定位：
4.2.1 weex支持position定位：默认值是relative。
4.2.2 weex目前不支持z-index：但越靠后的元素，层级越高，所有对需要层级高的元素可排列在后面。
4.2.3 定位元素超出容器边界：android下超出部分因此，因为android端元素overflow默认超出hidden。
4.3 其他：
4.3.1 weex支持线型渐变background-image:linner-gradient，不支持劲向渐变background-image:radial-gradient。
4.3.2 weex中box-shadow仅仅支持ios系统。
4.3.3 weex的<image/>组件无法定义一个或几个角border-radius，只对ios有效，对android无效。
4.3.4 weex中，flexbox是默认且唯一的布局，每个元素都默认有display:flex属性。
5. weex内建组件：
5.1 <a>组件：
5.1.1 weex的a组件定义了weex页面打包后的一个js地址。如<a herf="../dist/weex.app.js"></a>,但是不能链接网页如<a href="www.baidu.com"></a>。
5.1.2 组件中无法直接添加文本 ，需要<text>在这里添加文本</text>。
5.1.3 支持除了自己以外的所有weex组件作为子组件。
5.1.4 支持所有通用样式。
5.1.5 不要为<a>组件添加click事件。
5.2 <web>组件：
5.2.1 用于嵌入一张网页，src为网页资源路径，如<web src="www.baidu.com" ref="myweb"></web>。
5.2.2 不支持任何子组件。
5.2.3 pagestart，<web @pagestart="">组件开始加载时执行。
5.2.4 pagefinsh，<web @pagefinsh="">组件完成加载时执行。
5.2.5 error，<web @error="">组件加载错误时执行。
6. weex内建模块：
6.1 <webview>模块：
6.1.1 定义：一系列的<web>组件的操作接口，可以通过this.$refs.el来获取元素的应用。
在script中引入webview模块：const webview=weex.requireModule("webview")；webview.goBack(this.$refs.myweb);
6.1.2 API:
a.goBack(webElement)，加载历史记录的前一个资源地址。
b.goForward(webElement)，加载历史记录的下一个资源地址。
c.reload(webElement)，刷新当前页面。
#在.vue文件中,web嵌入其他页面
<template>
<web :src="src" ref="myweb" @pagestart="start" @pagefinish="finish" @error="error"></web>
</template>
<script>
const webview=weex.requireModule("webview")；webview.goBack(this.$refs.myweb);
export default{
data(){
return {
src:"www.baidu.com"
}
},
methods:{
start(){}, //开始加载
finish(){}, //加载结束
error(){}, //加载错误
}
}
</script>
