weex环境搭建,入门与基础知识(一)

weex入门

写在前面:首先说明我不是大神,我也是菜鸟,也是刚入门不久,在公司大牛的身后敲敲打打,终于算是入门了,所以如果本篇文章有什么错误还请大家指出来,共同学习!为什么想写这个呢,一是,想记录一下自己的成长过程,二是,看到社区人这么少,又有很多小伙伴问一些基础的问题,所以我也想为社区尽一份自己的力,我非常喜欢weex,所以很希望看到这个社区慢慢壮大起来。最后公司的weex项目是单页面(直接拉的项目,直接写的配置文件),不是通过weex create 创建的项目,因为公司本来就有原生app,不需要再用weex创建一个app,所以更多的只是用weex单页面来替代快速迭代。我看到大家更多的是weex create了一个大项目,包括ios android平台的,这个我也是初次来探索,所以有些问题我也无法解决,还请大家见谅,但是如果小伙伴们有问题问我,那我肯定帮忙分析解决的~。


我用的是mac 系统版本10.12.

首先,有的小伙伴只是看到weex牛逼啊,怎么的,然后直接去百度搜索weex环境搭建,结果各种忙版本层出不穷,各种错误,我想说的是其实官网已经明确的给出了怎么搭建环境,所以小伙伴们如果没什么开发经验的还是按照官网的指示步步为营较好,这里给出链接:http://weex.apache.org/cn/guide/set-up-env.html

那我们按照官网一步步来,

安装node 和 npm,(我之前已经安装过了, 所以就不演示安装过程了,这对于你们来说应该是小case啦)。

attachments-2018-03-KMyambOg5aa1f9a2cef8d.png安装好,验证一下,我建议从来没有安装过的请直接安装最新版本,安装过的请升级到最新版本,因为我曾经遇到过一些问题,结果更新node npm 版本后就莫名其妙的消失了, 所以我建议大家直接安装最新的,免的出现一些莫名其妙的问题。

接下来按照官网的步骤,安装weex-toolkit

attachments-2018-03-tzWrc6Uc5aa1fa417d267.png安装之后验证下:

attachments-2018-03-25gN8bKD5aa1fa5d1f3b7.png这里如果有的小伙伴安装不成功,请严格按照官网的步骤一步一步来,然后出了问题,可以上网查查。

接下初始化项目:

attachments-2018-03-vC1enGkc5aa1faf13c5e5.png

看到这个页面,很显然问你项目的名字,接下来也有很多基础配置的东西,反正一眼就能看懂,如果小伙伴们不关心这些细节的话,直接回车到底就行。

attachments-2018-03-sdX8MCi35aa1fb426205a.png中间一些问你需不需要eslint啊,需不需要测试模块啊~,然后我们看最后有一个'Should we run 'npm install' for you after the project has been created?' ,很显然问你需不需要在项目创建完成后直接安装依赖。

我记得我以前也鼓捣过这个初始化工作(最终结果鼓捣失败,还是靠大牛把环境架构起来的~),那时候没有这么多配置选项。只有起初的目录结构,需要手动npm install。现在都这么人性化了,不错,我就喜欢这样的一条龙服务。然后稍等一会项目就初始化好。

attachments-2018-03-UR4aqail5aa1fc67986ac.pngattachments-2018-03-boisGMZK5aa1fc708104e.png其实这些初始化工作还是可以解读的, 我建议小伙伴,们还是稍微看一下,虽然有很多东西,或者有些看不懂,但是从一些关键字来摸索还是基本没问题的。好,创建完成,人家也提示你进入项目目录,运行npm star 走向人生颠峰。

接下来我们看看项目结构,

终端输入open weex_project

attachments-2018-03-ffDjSX045aa1fd0fb2e0e.png项目目录还是很清晰的,我简单分析下(可能有错误)

1、android.config.json和ios.config.json我猜测应该是native端app初始化的配置文件,(我还没到那一步,一是因为公司是有原生app的,所以只需要打包好的js文件,不需要app,所以我暂时还没去学习这一块,二是对于ios和andriod知识还是很欠缺的,有时候也无能为力。)

2、configs:一些公共文件和打包文件(这里webpack的打包文件分成了开发和生产两套)

3、node_modules、package-lock.json、package.json不用解释了吧


attachments-2018-03-dqoDejMQ5aa1ffe941ab9.png

4、plateforms,应该是ios和android的运行平台在这个文件里,暂时没用过。

5、plugins,插件,需要了解的可以去weex的插件市场看看,这个的插件我也没用过,因为公司的项目是单页面的,然后又是用npm管理的,所以我们的weex页面都插不进去weex插件的,等于说想用weex插件(俗称轮子~)必须和platform一起用,好像还挺麻烦的,好像在ios,android还要管理这些依赖插件。(以后探索后再来补充吧)

6、src,weex 资源文件~

7、test,(没用过,跟测试有关的吧,以我目前的能力这块用不上)

8、web,这个文件夹显然是web端的,三端三端嘛ios和android前面说过了,其中在assets中有个qrcode.js,这个我用过,是生成二维码用的,后面项目运行之后会打开一个网页,里面生成了一个二维码就是这个搞定的。

9、webpack.congig.js 这个是webpack的默认配置文件,打开可以看见,这里面只做了base处理,其它处理都转到configs下的配置文件里面去了。

项目创建完成之后终端输入cd weex_project,进入项目目录,之前不是还提示我们npm start 吗,然后我们看看官网怎么说的,attachments-2018-03-jxnyqnHy5aa205605b6ce.png

官网简单的介绍了pachage.json然后让我们npm run dev & npm run serve ,馁,怎么跟npm start不一样,

我们看看package.json:attachments-2018-03-gtuN0rZ25aa205b8181a3.png

可以看到scripts中start 其实就是运行 npm run serve 

简单介绍下npm脚本,其原理是每当执行npm run,就会自动新建一个Shell,在这个Shell里面执行指定的脚本命令,

所以scripts里面每一个属性都对应一段脚本,比如说一个scripts :{"build": "node build.js"}执行npm run build 等同于执行 node build.js。然后像上面的有些是执行了多个任务,这里如果是并行执行使用'&',若果是继发执行(即前一个任务成功才能执行下一个任务),使用'&&'。需要深入的小伙伴链接如下:http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

官网的是npm run dev & npm run serve ,其实就是执行npm run dev 的同时执行npm run serve ,如果你嫌麻烦可以这样做:attachments-2018-03-nezoOYHR5aa21fe587563.png

可以在scripts中再加入一个值 此时npm run devp 等同于npm run dev & npm run serve (devp的值也可以为npm run de & npm run start)。

简单的看下,终端输入npm run devp

attachments-2018-03-YFCPauIC5aa2207dc4a77.png

attachments-2018-03-ID8iy7Zi5aa220aee4fe4.png在本地开启了一个服务,端口为8081,并在浏览器中打开了一个网页,地址为:http://localhost:8081/web/preview.html?page=index.js&entrys=components/HelloWorld%7Cindex

(源码可以去web下面的preview.html查看)

可以看到页面提示你用Weex playground app 去扫码。我没有这个app,如果有的小伙伴也没有安装这个app的话,可以打开手机淘宝,直接扫码。扫码结果如下:

attachments-2018-03-jhi60scK5aa2219209ed5.png

有人会问为什么淘宝能打开这个页面呢?其实淘宝跟我公司一样也是只用了单页面,淘宝也内置了weex sdk,打包好的js文件直接部署到服务器,当遇到一个url的时候就去检查他是不是weex打包的js文件,是的话就去服务端下载,下载完成之后再用weex sdk渲染成native的视图即可。

好,到这里整个环境搭建就算完成了。

接下来,我尽自己最大的努力再讲解一些我知道的知识,方便刚入门的小伙伴熟悉weex,所以可能有些错误,如果有还请大家指出来。

package.json scrpits 中npm run serve简单介绍

attachments-2018-03-gpw3Yp8H5aa224da471d5.png

webpack-dev-server是一个小型的Node.js Express服务器,默认端口号是8080,上述功能可以描述为:使用webpack-dev-serve在本地开启一个node服务,端口为8080, 传入的参数为env.NODE_ENV变量的值为development。--progress是个配置选项卡,作用是显示打包的进度。

有的小伙伴们可能注意到为什么我的端口是8081,那是因为8080被占用了,既然这样,启动端口号是可以配置的,

如 --port 7080 。还有很多配置可以设置的,具体的就自己去查阅资料了,毕竟我只是指个路而已,不然写下去又是一大篇幅。这里提醒大家百度固然快,但是还是希望大家去npm 官网或者gihbub上找官方文档,养成好习惯,不要伸手就拿,毕竟百度出来的都是勺子伸到你嘴边的东西,有时候还会有错误。

package.json scrpits 中npm run dev简单介绍

很简单,调用webpack去打包文件,传入参数env.NODE_ENV变量的值为common  --watch代表监听文件改动并重新编译。这里选项--config没有设置,那么默认打包配置文件是项目目录下的webpack.config.js。如果有的项目有多个入口,则可以自己配置。

在这里提醒小伙伴们,想要深入了解打包过程的,请熟读webpack官方文档,链接:http://www.css88.com/doc/webpack/

这里给的是v3.5.5的文档,好像4.0的已经出来,大家尽量不要再去读什么v2.0的文档,因为我之前用的2.0的文档结果闹了好大个笑话。

webpack基础:

1、入口起点 entry points

2 、输出 output

3、加载器 loaders

4、插件 plugins

5、配置 configuration

6、模块 modules

以上是我认为重中之重的几点,搞明白这6点才能正确解读weex打包过程。

attachments-2018-03-FnkbLiFy5aa22d6be2454.png就拿config目录下的webpack.common.conf.js来看,他是一个common配置,好比一个基类,之前运行的是devlopment环境,对应的它下面还有一个webpack.dev.conf.js ,他会合并这个基类,

attachments-2018-03-MzJ7kqvo5aa22ec4d9a51.png

可以看到webpack.dev.conf.js第2行引入了webpack-merge,人家写的很明白了,合并webpack配置。


可以看到上面的6点都有提现的,如:

entry:入口,(可以是单入口也可以是多入口),传入一个object是多入口,只不过只打包一个index.js文件。

output:输出,打包好后可以去目录下面看到一个dist文件夹

attachments-2018-03-trImZ1CR5aa22fe7a3046.png这些就是webpack打包好的js文件。

module:模块

rules:加载器 (注意我以前在网上找了个配置文件没有rules,只有一个叫loaders,弄了半天才明白版本的问题,话说        loaders不就是加载器的意思吗,干嘛改名字~)

plugins:插件,注意webpack.dev.conf.js中第48行开始到63行

attachments-2018-03-qDOiK4Br5aa230ca86e71.png

为什么我们npm run devp之后会打开一个网页呢?因为就在这里,webpack调用了一个插件去打开了项目目录web下面的某个网页。

公司用的是自己系的配置文件,跟这个项目的配置文件出入还是蛮大的,可以看出来这几个webpack配置文件也是蛮复杂的,毕竟中间还夹杂了ios、android的启动文件。我也是写的时候刚拿到去解读,有些东西我也要研究很久,这里就不再细讲了,其实大家把webpack文档熟读之后大概就能看到这几个配置文件。

我们再看看web目录下preview.html的代码构成。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Weex Preview</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="format-detection" content="telephone=no, email=no">
<link rel="stylesheet" href="./assets/preview.css">
<script src="./assets/qrcode.js"></script>
</head>
<body>
<!-- <header class="header center">
<h1 class="page-title">Weex Preview</h1>
</header> -->
<div class="content center">
<main class="main">
<div class="mock-phone">
<div class="camera"></div>
<div class="earpiece"></div>
<div class="inner">
<iframe id="preview" src="/" frameborder="0"></iframe>
</div>
<div class="home-btn"></div>
</div>
<div class="qrcode-box">
<a class="qrcode" id="qrcode" target="_blank"></a>
<p class="qrcode-tips">Use <a target="_blank" href="https://weex-project.io/playground.html">我改了这个名字</a> to scan it.</p>
<div class="pages-box">

</div>
</div>
</main>
</div>
<script>
(function(){
const page = getUrlParam('page');
const entrys = getUrlParam('entrys');
function getUrlParam (key) {
var reg = new RegExp('[?|&]' + key + '=([^&]+)')
var match = location.search.match(reg)
return match && match[1]
}
function createQRCode (url) {
var $QR = document.querySelector('#qrcode')
var QR = qrcode(0, 'L')
url += '?_wx_tpl=' + url
$QR.setAttribute('href', url)
QR.addData(url)
QR.make()
$QR.innerHTML = QR.createImgTag(6, 12)
}
if (page) {
var $preview = document.querySelector('#preview')
$preview.src = `http://www.baidu.com`;
}
if (entrys) {
var pageEntrys = decodeURI(entrys).replace('\\', '/').split('|');
var $pages = document.querySelector('.pages-box');
var contents = '';
pageEntrys.forEach(function(entry){
if (entry === getUrlParam('page').replace('.js', '')) {
contents += `<a href="?page=${entry}.js&entrys=${entrys}" class="page-item active">${entry}</a>`
}
else {
contents += `<a href="?page=${entry}.js&entrys=${entrys}" class="page-item">${entry}</a>`
}
})
$pages.innerHTML = contents;
}
var host = window.location.host;
createQRCode(`http://${host}/dist/${page || 'index.js'}`)
})();
</script>
</body>
<!-- Webpack Dev Server reload -->
<script src="/webpack-dev-server.js"></script>
</html>

页面中那个蓝色手机(貌似还是iphone哦~)框就是下面这部分代码搞定的:

attachments-2018-03-Zvnpu4uK5aa238e0982b3.png


attachments-2018-03-fLDDXiXT5aa23968a05f1.png

生成的二维码则是这段代码搞定的:

attachments-2018-03-Nuk3M19F5aa23a11e6d4f.png

http://localhost:8081/web/preview.html?page=index.js&entrys=components/HelloWorld%7Cindex

可以看出这个手机框里面的页面和二维码的url可以通过url的page参数来控制,我们验证一下:

35行加入新代码:

attachments-2018-03-jMziSsaH5aa23b551dd78.png

弄个百度二维码出来:

attachments-2018-03-EiloPDwl5aa23b9bab755.png

attachments-2018-03-wkqUPvbf5aa23ba2614c4.png

同时把手机框类的src替换成百度的,重启一下(好像不用重启,试试看)

attachments-2018-03-0F8fsamb5aa23bfd98d15.png


=========================分割线==============================

其实写到这里就算是入门了,至于其它的怎么真正的运用到业务上,还有很长一段路要走,还有很多的配置需要做,毕竟三端统一不是一件容易的事。

继续继续,(我发现看我的老大写的weex架构简直就是欣赏一件艺术品- - ,那些不懂的地方只感觉好牛逼~

慢慢来,我尽量写下去,写一写我看懂的地方,给大家参考参考。


首先,我也是在边学习边分享,所以不可能什么都知道,什么问题都能解决,更多的还是模仿为主,所以我不可能一上开就重新搞个项目,然后面面俱到的讲,所以我只能按照我自己了解的方式来分享。

《《《《《《《《《《《《《》》》》》》》》》》》》》

从新写配置文件,因为就weex init的这个项目webpack打包的时候用的是webpack.config.js默认配置,根据环境又在configs文件下写了很多配置文件,说实话这些东西没有好的基础支撑很难看懂,不排除有些天才,但是还是要花很多时间去弄明白,包括我,如果不一点一点问大佬,(大佬有什么都不知道,,,),我也是看着头皮发麻,所以只能按照官方文档(其实是大佬写的- -),搭建简单的配置环境,以后有时间了再去慢慢优化。

首先base文件,不管是开发还是生成环境都要用的公共配置项,这年头谁还没有个父类啊,

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const bannerPlugin = new webpack.BannerPlugin(
{
banner: '// { "framework": "Vue" }\n/* eslint-disable */\n',
raw: true
}
);
var config = {
entry: {'demo/pageOne': '/Users/我的项目/weex_native_test002/src/views/demo/pageOne/pageOne.js',
'demo/demoTwo': '/Users/我的项目//weex_native_test002/src/views/demo/pageTwo/pageTwo.js',
'home/index': '/Users/我的项目//weex_native_test002/src/views/home/index/index.js'},
output: {
// filename: '[name].weex.js',
path: outputPath
},
resolve: {
alias: {
'src': path.join(__dirname, '..', 'src'),
'common': path.join(__dirname, '..', 'src/common')
}
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules(?!\/.*(weex).*)/,
options: {
plugins: ['lodash']
}
},
{
test: /\.css$/,
use: [{
loader: 'style-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader' // translates CSS into CommonJS
}]
},
{
test: /\.less$/,
use: [{
loader: 'style-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader' // translates CSS into CommonJS
}, {
loader: 'less-loader' // compiles Less to CSS
}]},
{
test: /\.(scss|sass)$/, loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.(handlebars|hbs)$/,
loader: 'handlebars-loader',

}
]
},
plugins: [
bannerPlugin,
new LodashModuleReplacementPlugin(),
new CleanWebpackPlugin(['dist'], {
root: path.resolve('.'),
verbose: true,
dry: false,
}),

]
};

module.exports = config;


都是常用的加载器和插件,没什么好讲的,百度一收一大把的东西,

注意一点就是bannerPlugin指明Vue,我之前找这个错误找了好久,一直提示我Vue undefined,然后我去js中直接加入Vue(甚至导致我打包后的文件体积非常大),还是各种问题...

最需要注意的是:注意在package.json中引入这些依赖。

可能有的还需要不同的环境:在plugins中加入设置即可

plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
})
]

如果不想用代码去控制的话,可以再定义一个js,单独设置环境,然后有webpackMerge去合并base.js这个父类,


var config = webpackMerge(baseJS, {
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
})
]
});

这样就在开发环境下生成了一个父类配置文件。

接下来有不一样的东西了,

native端和web端是不一样的,打包用的加载器是不一样的,可以看到根目录下的configs中的webpack.common.conf.js中导出了两个配置项:


module.exports = [webConfig, weexConfig];

web端在webpack打包的时候使用的是vue-laoder,而native端则用的是weex-loader,至于为什么,我认为是web端和native端本身差异就很大,没必要和在一起,比如精确的计算750px作为屏幕100%,web端和native端差异可不是一点点。。。

const weexConfig = {
entry: weexEntry,
output: {
path: path.join(__dirname, '../dist'),
filename: '[name].js'
},
/**
* Options affecting the resolving of modules.
* See http://webpack.github.io/docs/configuration.html#resolve
*/
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': helper.resolve('src')
}
},
/*
* Options affecting the resolving of modules.
*
* See: http://webpack.github.io/docs/configuration.html#module
*/
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: 'babel-loader'
}]
},
{
test: /\.vue(\?[^?]+)?$/,
use: [{
loader: 'weex-loader',
options: vueLoaderConfig({useVue: false})
}]
}
]
},
/*
* Add additional plugins to the compiler.
*
* See: http://webpack.github.io/docs/configuration.html#plugins
*/
plugins: plugins,
/*
* Include polyfills or mocks for various node stuff
* Description: Node configuration
*
* See: https://webpack.github.io/docs/configuration.html#node
*/
node: config.nodeConfiguration
};


查看npm官网 ---weex-loader:

attachments-2018-04-tvciwXca5acc71dd798c1.pngattachments-2018-04-mvUqvfG65acc71e628608.png

如果有的同学用的.we文件,也是可以转化滴,详细请自己参考npm官网。

(马德,还有字数限制的哦~,白写了好多好多,直接给吃掉了,白忙活了半天,接下一篇,看官们转移阵地。。。)

  • 发表于 2018-03-09 10:59
  • 阅读 ( 3592 )
  • 分类:经验分享

你可能感兴趣的文章

相关问题

3 条评论

请先 登录 后评论
不写代码的码农
copywithzone

职员

3 篇文章

作家榜 »

  1. admin 7 文章
  2. 学习委员 6 文章
  3. copywithzone 3 文章
  4. ibobo99 2 文章
  5. guyangdaxia 2 文章
  6. Zero 1 文章
  7. we 1 文章
  8. 还是怕麻烦 1 文章
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

weex大学,分享从这里开始,精彩与您同在