准备工作打开命令行输入下面几条命令
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
截图
第三步使用 命令 初始化工程
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
很显然里面有句代码没有解析出来,为什么呢? 没有安装相关依赖文件
使用下面命令安装依赖
npm install
安装完成后的截图
工程中增加了一个文件夹 如下
node_modules
此时你再使用浏览器打开index.html 文件
index.html文件的切图
我们发现手机视图中没有内容,这不太对劲,按理来说应该有点内容才对
再来看一眼weex.html中的代码
6AA448E2-7A1D-47CE-B8BD-97BA24B1FE91.png
大家注意到了没有 在生成的文件夹中没有dist这个目录 以及app.web.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对象
<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,腾讯推出微信小程序,都在解决一个问题,降低开发成本,提供生产效率!