weex 入门与基础知识(二)

weex配置项
接上一页...............
const webConfig = {
entry: Object.assign(webEntry, {
'vendor': [path.resolve('node_modules/phantom-limb/index.js')]
}),
output: {
path: helper.rootNode('./dist'),
filename: '[name].web.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: {
// webpack 2.0
rules: useEslint.concat([
{
test: /\.js$/,
use: [{
loader: 'babel-loader'
}],
exclude: /node_modules(?!(\/|\\).*(weex).*)/
},
{
test: /\.vue(\?[^?]+)?$/,
use: [{
loader: 'vue-loader',
options: Object.assign(vueLoaderConfig({useVue: true, usePostCSS: false}), {
/**
* important! should use postTransformNode to add $processStyle for
* inline style prefixing.
*/
optimizeSSR: false,
compilerModules: [{
postTransformNode: el => {
el.staticStyle = `$processStyle(${el.staticStyle})`
el.styleBinding = `$processStyle(${el.styleBinding})`
}
}]

})
}]
}
])
},
/*
* Add additional plugins to the compiler.
*
* See: http://webpack.github.io/docs/configuration.html#plugins
*/
plugins: plugins
};


webpack.common.conf.js还有其它很多的配置项,有些路由的配置我不太懂,没有深入了,各位感兴趣的自己深入。

我的简单配置:

const webpackMerge = require('webpack-merge');
const baseJS = require('./base.js');

var config = webpackMerge(baseJS, {
output: {
filename: '[name].weex.js',
},
module: {
rules: [
{
test: /\.vue(\?[^?]+)?$/,
loaders: ['weex-loader']
}
]
}
});
module.exports = config;



const webpackMerge = require('webpack-merge');
const baseJS = require('./base.js');

var webConfig = webpackMerge(baseJS, {
output: {
filename: '[name].web.js'
},
module: {
rules: [
{
test: /\.vue(\?[^?]+)?$/,
loaders: 'vue-loader',
options: {
postcss: [
require('postcss-plugin-weex')(),
require('autoprefixer')({
browsers: ['> 0.1%', 'ios >= 8', 'not ie < 12']
}),
require('postcss-plugin-px2rem')({
// base on 750px standard.
rootValue: 75,
// to leave 1px alone.
minPixelValue: 1.01
})
],
compilerModules: [
{
postTransformNode: el => {
// to convert vnode for weex components.
require('weex-vue-precompiler')()(el);
}
}
]
}
}
]
}
});

module.exports = webConfig;

我用了weex-vue-render这个依赖。

我之前有时候css在html上不生效,升级了这个依赖突然就OK了。。。

attachments-2018-04-QLzfPpty5acc7aa48d97b.png我之前的版本就是0.12.有坑来着,,,,

attachments-2018-04-WKr6opbA5acc7abb1e134.png强烈要求使用1.0之后的版本!!!!!!!

介绍也贴给你们把

attachments-2018-04-K4G9XJhB5acc7ad34944b.png


(*^__^*),直接把example的代码般过来自己用- -

attachments-2018-04-HSgwDMwY5acc7aef0b582.png

attachments-2018-04-s5baoIfa5acc7b16b8009.png注意注意哦:

页面的入口文件就得这样写:

import App from './pageOne.vue';
App.el = '#root';
var vue = new Vue(App);
export default vue;

最后写个dev.js,基本配置就算完成了:

const webpackMerge = require('webpack-merge');
const baseweexConfig = require('./weexConfig.js');
const basewebConfig = require('./webConfig.js');

var weexConfig = webpackMerge(baseweexConfig, {
});

var webConfig = webpackMerge(basewebConfig, {
});

module.exports = [webConfig, weexConfig];

看似简单,以后还得加东西的,

再次强调:注意在package.json中加入相关的依赖。

随便搞几个page来看看,attachments-2018-04-QQna9CkZ5acc7bf3953c4.png

package.json中修改scripts:

attachments-2018-04-YKbMlUci5acc7c26bd91f.png

运行npm run devp:

打包完成后:

在dist目录下生成了:attachments-2018-04-RtgOB9nu5acc7c658f85c.png

应该没什么打问题,待测试。


在dev.js中继续加入逻辑:生成对应的html

添加一个方法

var createHtml = function () {
var conf = {
title: '',
template: '',
filename: filename + '.html',
inject: 'body',
chunks: [chunk]
};
return new HtmlWebpackPlugin(conf);
};

参数自己补完,不懂这个插件的自己去npm看哦。

具体的dev.js就不贴出来了,

再用OpenBrowserPlugin 插件打开本地的preview.html

再修改下preview.html

$preview.src = `http://${host}:8081/dist/demo/pageOne.html`;
createQRCode(`http://${host}:8081/dist/demo/pageOne.weex.js`)

npm run devp:

attachments-2018-04-fOaWNmC15ace0114926f4.png

再用手淘扫一下二维码:

attachments-2018-04-MN0ZrkRp5acdfe96e817d.PNG


恩,没什么大问题,接下来的主要工作则是怎么把所有的文件弄成可配置的。

首先base.js中的入口(entry)应该是文件写入.

这个好办,写个脚本,在打包之前先弄好入口文件,比如规定每个页面单独用一个特定名字开头的文件来存放,符合这个要求的都是要打包的文件,遍历src下面所有的文件,符合要求的文件写入到一个js中(JSON、key value之类的),然后打包的时候再去读取

就行了。

然后再修改preview.html,加入一些selected选项,都是一些打包好的选项,然后再搞个刷新按钮,selected之后替换掉url和二维码的url重新渲染即可,这样就不用每次想用另一个页面都得去改代码重新打包。

搞好差不多是这个样子:

attachments-2018-04-ZpMS9H7G5acec8d486063.png

attachments-2018-04-xCAXISw55acec8dd38012.png下载一个weexPlayGround

attachments-2018-04-NWWx3RnC5acecacb1f799.PNG


attachments-2018-04-ZuJ7wpfM5acecaeb00a42.PNG

继续继续:根目录:

终端:$weex platform add ios

在platforms目录下多了:

attachments-2018-04-iswlkgIP5acef761b66e1.png

platforms.json也多了一行

{

    "ios": "4.1.6"

}

再终端输入 :weex run ios

选择一个模拟器;

attachments-2018-04-NxcoQQ1E5acef82206369.png一大片红,算了,ios功底有限,恕我直言搞不定这些,,,,,

直接打开跑跑看看;

cd platforms/

open ios

用xcode 打开WeexDemo.xcworkspace

attachments-2018-04-BB2VK0yD5acef8d8d95ff.png

啊,还是报错,看看是不是依赖的问题。
还是刚刚的终端:
cd ios
pod install
attachments-2018-04-lpsVlLyg5acefb45675b9.png
好了,xcode不报错了,在模拟器上面跑跑看,
attachments-2018-04-G8GnEuPp5acefac54b965.png
OK了,如何在真机上面跑,听说还有胚配置证书什么的,好像很麻烦,等哪天有时间再搞,
  • 发表于 2018-04-10 16:52
  • 阅读 ( 3036 )
  • 分类:经验分享

你可能感兴趣的文章

相关问题

0 条评论

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

职员

3 篇文章

作家榜 »

  1. admin 7 文章
  2. 学习委员 6 文章
  3. 小小书童 3 文章
  4. copywithzone 3 文章
  5. ibobo99 2 文章
  6. guyangdaxia 2 文章
  7. tianyu12345 1 文章
  8. xiangzhihong 1 文章
取消

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

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

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

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