一、说明

网上很多入坑 weex 的文章,我没有重复一些已经有的教程或者文章,记录一下自己上手 weex 的过程和感受。

因为使用的是 vue 框架上手,所以还是使用了 weex-tookit

看的文档只有 weex 官网

二、起步

1、weex-toolkit

如果使用 vue 作为前端框架,那么很友好,直接使用 weex-toolkit 即可,全局安装可能比较慢,建议切换到淘宝的镜像源。

如果使用 cnpm(我一般不使用 cnpm,只是修改镜像源):

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

关于如何搭建开发环境,官方文档地址:

npm全局安装:

npm install -g weex-toolkit

安装结束后,会有全局命令 weex,查看版本号:

weex -v

注意: 在 weex-toolkit1.0.8 版本后添加了 npm5 规范的 npm-shrinkwrap.json 用于锁定包依赖,故 npm 版本<5的用户需要通过 npm i npm@latest -g 更新一下 npm 的版本,使用前请确认版本是否正确。

2、构建项目

weex create-project demo-1-1

weex-tookit 使用起来有点儿像 vue-cli,反正傻瓜式创建。不过 weex-toolkit 创建完之后会提示你时候使用 cnpm or yarn or npm 安装依赖,可以根据自己选择去安装,不需要自己敲命令。(太久没使用 vue 了,忘记 vue-cli 有没有这个提示,好像也有)。

项目构建结束后,生成的目录结构如下(还是很眼熟):

1.jpg

值得一提的是,web 文件夹中的 index.html 是 dev 的模板文件,而 preview.html 是预览的窗口的文件,在 preview.html 中使用 iframe 加载了 index.html

而一些使用的脚本命令:(除了 vue-cli 中看着眼熟的,还有就是一些打包的脚本)

"scripts": {
    "start": "npm run serve",
    "build": "webpack --env.NODE_ENV=common",
    "build:prod": "webpack --env.NODE_ENV=production",
    "build:prod:web": "webpack --env.NODE_ENV=release",
    "build:plugin": "webpack --env.NODE_ENV=plugin",
    "clean:web": "rimraf ./release/web",
    "clean:ios": "rimraf ./release/ios",
    "clean:android": "rimraf ./release/android",
    "dev": "webpack --env.NODE_ENV=common --progress --watch",
    "serve": "webpack-dev-server --env.NODE_ENV=development --progress",
    "ios": "weex run ios",
    "web": "npm run serve",
    "android": "weex run android",
    "pack:ios": "npm run clean:ios && weex build ios",
    "pack:android": "npm run clean:android && weex build android",
    "pack:web": "npm run clean:web && npm run build:prod:web"
  },

3、项目开发

开发命令:

yarn dev 
# npm run dev

会自动打开网页,并且预览,如果想查看在完整的 web 整浏览器窗口的样式,可以点击预览窗口右上角的搜索按钮。

预览效果:

2.jpg


如果你是使用 vue 作为 weex 的 DSL,那么开发起来很友好,而且 weex 推荐使用 单文件组件 进行项目开发。

默认的,weex 中使用的是 vue-cli 的模板(至少看起来是),路由使用了 vue-router,但实际上如果你想在 native 环境上,实际上 你不能使用 router-link,因为这是不起作用的,你必须使用 编程式导航

weex 有自己的内置一些组件,这意味着 native 环境下,并不是所有的 html 标签是被支持的,相反,只有很小一部分是支持的。很多样式也是如此。因为在 native 环境上,要渲染成原生的组件,而不是 html DOM,技术上会有所限制。

4、尝试自己写个组件

写一个 copyright 的组件,加载到 router-view 下面:

(效果在上面截图已经显示出来了,但是有精彩的地方,注意看下面的截图

组件的加载和使用不再重复,如果这个都不知道,建议先把 vue 搞的顺一点

至于为什么 a 标签必须使用 text 组件包含文字,而 text组件并不能直接包含其他组件,这是 weex 本身的限制或者说要求,这对于 native 环境的渲染是很友好的。

<template>
  <div>
    <div class="line"></div>
    <div>
     <text> Copyright &copy;{{year}} By</text>
      <a :href="link"> 
        <text>{{author}} </text>
      </a>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      year:new Date().getFullYear(),
      author:'Postbird',
      link:'http://www.ptbird.cn'
    }
  }
}
</script>

<style scoped>
  .line{
    height:2px;
    background-color: #eeeeee;
    margin:30px 0;
  }
</style>

3.jpg

有一个很明显的问题,其中链接部分直接单独渲染出来一行。

因为 text 组件是 web 中是渲染出 p 标签,而 a 组件渲染出来的 a 标签(两者并不是一个概念),会自带 weex-ct weex-a 这个两个 class,而 weex-ctdisplay:flex 的效果。(这不是这篇文章讨论的重点,我会将之后的组件的部分内容,单独拿出来研究研究)

5、使用 vue-router 管理页面

关于使用 vue-router 管理页面或者使用 vuex 管理状态的说明,在官方文档有单独的介绍:

如果要使用 vue-router,是不能写 <router-link/> 的,这在 native 环境是不起作用的,一定要用编程式导航,更具体的来说就是使用 this.$router.push(url)

举个例子,要跳转到 /about 页面,(vue 部分直接跳过,不拿出来讲),

/aboutrouter.js 中的基本信息是(import About from '@/components/About'):

  • url: /about
  • name: About
  • component: About

index.vue 中增加该导航:

<template>
<div>
<!-- 其他的逻辑 -->

<text @click="jump('/about')">About</text>

</div>
</template> 
<script>
// 省略基本的结构,直接写 methods
methods:{
    jump(url){
        this.$router.push(url);
    }
}
</script>

关于这些内容,之后也会单独去研究一下,不是这篇文章的重点。

三、感受

如果你是 vue 的开发者,那接触 weex 开发的时候,还是很顺手的。

很多人觉得 weex 全是坑,的确,坑是不少的,而且文档我觉得也不是特别友好,但是 weex 的实用价值是很明确的。

很多人认为 weex 难用或者难学,是以 web 前端开发的身份去认识 weex,甚至是写 weex 的代码,尤其是一些看了点儿 vue 教程,会用 vue 写个应用的人,然后对于前端的基本功不扎实,这种认识跟不上,导致会吃力。

weex 和 rn 的很大的相同点在于,他们是渲染出原生组件的,而不是像一些跑在 webview 上的框架一样,看着很友好,我接触过几个这种类型的框架或者是解决方案,但实际上后期实用价值并不是很大。

另外,weex 的目的在于解决原生APP开发中的一些问题,不是万能的,就像 RN 一样,如果写过 RN 在来接触 weex,会觉得没啥,都一样的玩意儿而已。

最好能够了解一些 native 方面的知识,对于深入 weex 或者是 RN 都有好处。

这篇文章虽然是通过 vue 上手的 weex,但实际上我可能因为一些原因使用 Rax,虽然这也是个坑。