专栏首页每日一篇技术文章带你入坑01-weex-搭建环境

带你入坑01-weex-搭建环境

本节任务

  • 搭建环境(mac) 开发流程讲解

准备工作打开命令行输入下面几条命令

1.安装node.js

brew install node

安装 Node.js 环境成功后,npm 包管理工具也会自动安装成功 输入下面命令检查一下

$ node -v v7.4.0 $ npm -v 4.0.5

2.安装weex-toolkit

sudo cnpm install -g weex-toolkit

检查安装是否成功

weex -v v1.0.4 -weex-builder : v0.2.6 -weex-devtool : v0.2.79 -weex-previewer : v1.3.6


  • 第一步 创建一个文件目录,这个目录主要放我们的练习demo
  • 第二步 代开命令行 'CD 路径' 进入这个目录中 cd /Users/xujie/Documents/weex

截图

第三步使用 命令 初始化工程

weex init FirstProject 接下来在命令行窗口会出现一句话 prompt: Init your Project: (FirstProject)

输入一个名字-这个名字就是整个项目的名称

这个是初始化完成后项目中自动生成的文件和目录

第四步 右击->选择浏览器打开index.html和weex.html文件

使用浏览器打开看一眼

index.html在浏览器中的截图

weex.html在浏览器中的截图

我把weex.html 里面的body 部分代码截图给大家看一下

6AA448E2-7A1D-47CE-B8BD-97BA24B1FE91.png

很显然里面有句代码没有解析出来,为什么呢? 没有安装相关依赖文件

  • 第六步 安装package.json 文件需要的插件和类库 { "name": "firstProject", "description": "firstProject", "version": "0.1.0", "private": true, "main": "index.js", "keywords": [ "weex", "vue" ], "scripts": { "build": "webpack", "dev": "webpack --watch", "serve": "node build/init.js && serve -p 8080", "debug": "weex-devtool" }, "dependencies": { "vue": "^2.1.8", "vue-router": "^2.1.1", "vuex": "^2.1.1", "vuex-router-sync": "^4.0.1", "weex-vue-render": "^0.1.4" }, "devDependencies": { "babel-core": "^6.20.0", "babel-loader": "^6.2.9", "babel-preset-es2015": "^6.18.0", "css-loader": "^0.26.1", "ip": "^1.1.4", "serve": "^1.4.0", "vue-loader": "^10.0.2", "vue-template-compiler": "^2.1.8", "webpack": "^1.14.0", "weex-devtool": "^0.2.64", "weex-loader": "^0.4.1", "weex-vue-loader": "^0.2.5" } }

使用下面命令安装依赖

npm install

安装完成后的截图

工程中增加了一个文件夹 如下

node_modules

此时你再使用浏览器打开index.html 文件

index.html文件的切图

我们发现手机视图中没有内容,这不太对劲,按理来说应该有点内容才对

再来看一眼weex.html中的代码

6AA448E2-7A1D-47CE-B8BD-97BA24B1FE91.png

大家注意到了没有 在生成的文件夹中没有dist这个目录 以及app.web.js 文件

  • 第七步 根据webpack.config.js文件中内容进行打包处理
var path = require('path')
var webpack = require('webpack')
var bannerPlugin = new webpack.BannerPlugin(
  '// { "framework": "Vue" }\n',
  { raw: true }
)
function getBaseConfig () {
  return {
    entry: { //  打包文件的入口
      app: path.resolve('./app.js')
    },
  output: {
    path: 'dist', // 打包完成后的文件存放的目录
  },
  module: {
      loaders: [
      {
          test: /\.js$/,
          loader: 'babel',
          exclude: /node_modules/
        }, {
          test: /\.vue(\?[^?]+)?$/,
          loaders: []
        }
      ]
    },
    vue: {
    },
    plugins: [bannerPlugin]
  }
}
// web使用的打包文件
var webConfig = getBaseConfig()
webConfig.output.filename = '[name].web.js'
webConfig.module.loaders[1].loaders.push('vue')
// 移动端 使用的打包文件
var weexConfig = getBaseConfig()
weexConfig.output.filename = '[name].weex.js'
weexConfig.module.loaders[1].loaders.push('weex')
module.exports = [webConfig, weexConfig]

我们可以看出一下信息

1.需要打包文件app.js 2.打包生成的文件app.web.js和 app.weex.js 3.生成文件存放的目录 dist

接下来我们运行打包命令

npm run dev

打包完成后,命令行窗口的截图

工程中新增的文件截图

此时我们再次使用浏览器打开index.html文件

F7F5C07A-87B9-42C8-93BD-3DEC7C3CACD0.png

看见旁边还有一个二维码,使用阿里提供的给我们的工具weex Playground 工具可以在手机上预览效果

应用商店都可以下载这个软件

IMG_2188.PNG


*第八步 我们看一下 app.js 文件的内容

import foo from './src/foo.vue' // 导入组件
foo.el = '#root' // 设置组件id
export default new Vue(foo); // 输出一个vue对象
  • 第九步 foo.vue 就是我们的重点内容了,我们主要要学会编写里面的内容
 <template>
    <div class="wrapper" @click="update">
    <image :src="logoUrl" class="logo"></image>
    <text class="title">Hello {{target}}</text>
  </div>
</template>

<style>
  .wrapper { align-items: center; margin-top: 120px; }
  .title { font-size: 48px; }
  .logo { width: 360px; height: 82px; }
</style>

<script>
  export default {
   data: {
      logoUrl:     'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
      target: 'World'
    },
    methods: {
      update: function (e) {
        this.target = 'Weex'
        console.log('target:', this.target)
      }
    }
  }
</script>

整个开发流程大体过了一遍,接下来就是掌握开发必须的知识点了

C3D65E75-16B0-4E5B-BF87-40AEAD2B38E5.png

提示

[iOS 工程师]和[android工程师们] 快来入坑吧,现在是跨平台的时代,在同一时期,阿里推出weex,腾讯推出微信小程序,都在解决一个问题,降低开发成本,提供生产效率!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • weex-04-工程文件介绍

    这个文件夹就是存放 我们下来的依赖包的,如果你运行了命令没有发现这个文件,请关闭HBuilder 工具后重新打开

    酷走天涯
  • SceneKit - 提供两种最常用的将序列帧动画渲染到模型上的方式

    这个时候,你运行程序是没有动画效果的,因为模型是静止的,scenekit 不会对静止的模型实时渲染,这个时候要让模型渲染imageview 有两种办法,第一种就...

    酷走天涯
  • weex-01-环境搭建

    关于为什么学习weex,这里不做解释,相信你下载了app目的就是要学会这个跨平台框架,本系列教程着重讲解使用weex开发如何开发项目,关于底层的原理,会在教程最...

    酷走天涯
  • weex 踩坑笔记 【原创】

    weex 踩坑笔记 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/cs...

    CS逍遥剑仙
  • 零基础学习weex(二)Vue2.0

    首先,先解决上一章出现的坑。官网是提供解决方案的有效途径,既然不能用前端的开发模式在sublime编辑,那就选择回归weex官方教程的怀抱吧。在上一章已经搭建了...

    sweet说好的幸福
  • 关于Spark Streaming感知kafka动态分区的问题

    本文主要是讲解Spark Streaming与kafka结合的新增分区检测的问题。读本文前关于kafka与Spark Streaming结合问题请参考下面两篇文...

    Spark学习技巧
  • Node.js + Socket.io 实现一对一即时聊天

    实现一对一即时聊天应用,重要的一点就是消息能够实时的传递,一种方案就是熟知的使用 Websocket 协议,本文中我们使用 Node.js 中的一个框架 Soc...

    五月君
  • 文本分类实战(八)—— Transformer模型

      文本分类这个系列将会有十篇左右,包括基于word2vec预训练的文本分类,与及基于最新的预训练模型(ELMo,BERT等)的文本分类。

    绝命生
  • 跨越适配&amp;性能那道坎,企鹅电竞Android weex优化

    企鹅电竞从17年6月接入weex,到现在已经有一年半的时间,这段时间里面,针对遇到的问题,企鹅电竞终端主要做了下面的优化:

    WeTest质量开放平台团队
  • 跨越适配&性能那道坎,企鹅电竞Android weex优化

    原文链接:https://wetest.qq.com/lab/view/441.html

    WeTest质量开放平台团队

扫码关注云+社区

领取腾讯云代金券