weex框架入门

前端开发一起交流QQ群：740034288。

互联网创业团队兴趣QQ群：792710437。

新建《团队合伙人》贴吧：https://tieba.baidu.com/f?kw=%E5%9B%A2%E9%98%9F%E5%90%88%E4%BC%99%E4%BA%BA&fr=index。

参考：https://www.bilibili.com/video/av14478917/。http://www.weexdaxue.com。

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：调试模式。

注意：报错Maximum call stack size exceeded，是需要给npm降级或者升级

                    降级 ： npm install -g npm@5.4.0

                    升级 ： 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

          报错：Cannot assign to read only property'exports'，参考：https://mp.csdn.net/postedit/85645330。注意：手机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 web

4. 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>