现在我们要在真机上进行调试,需要修改webpack.config.js文件
原代码:
修改后代码
- require('webpack')
- require('weex-loader')
- var path = require('path')
- module.exports = {
- entry: {
- main: path.join(__dirname, 'src', 'weex-bootstrap.we?entry=true')
- },
- output: {
- path: 'dist',
- filename: '[name].js'
- },
- module: {
- loaders: [
- {
- test: /\.we(\?[^?]+)?$/,
- loaders: ['weex-loader']
- }
- ]
- }
- }
- require('webpack')
- require('weex-loader')
- var path = require('path');
- var fs = require('fs');
- var entry = {};
- (function walk(dir) {
- dir = dir || '.'
- var directory = path.join(__dirname, 'src', dir);
- fs.readdirSync(directory)
- .forEach(function(file) {
- var fullpath = path.join(directory, file);
- var stat = fs.statSync(fullpath);
- var extname = path.extname(fullpath);
- if (stat.isFile() && extname === '.we') {
- var name = path.join('dist', dir, path.basename(file, extname));
- entry[name] = fullpath + '?entry=true';
- } else if (stat.isDirectory() && file !== 'dist' && file !== 'include') {
- var subdir = path.join(dir, file);
- walk(subdir);
- }
- });
- })();
- module.exports = {
- entry: entry,
- output: {
- path: '.',
- filename: '[name].js'
- },
- module: {
- loaders: [
- {
- test: /\.we(\?[^?]+)?$/,
- loader: 'weex'
- },
- {
- test: /\.js(\?[^?]+)?$/,
- loader: 'weex?type=script'
- },
- {
- test: /\.css(\?[^?]+)?$/,
- loader: 'weex?type=style'
- },
- {
- test: /\.html(\?[^?]+)?$/,
- loader: 'weex?type=tpl'
- }
- ]
- }
- }
- //获取当前ip地址
- function getIPAddress(){
- var os = require('os');
- var ips = os.networkInterfaces();
- var address ;
- for(var item in ips){
- for(var data in ips[item]){
- var ip = ips[item][data];
- if(ip.address.indexOf('192')==0){
- address = ip.address;
- return address;
- }
- }
- }
- }
- //生成原生调试二维码
- var qrcode = require('qrcode-terminal');
- qrcode.generate("http://"+getIPAddress()+":8080/dist/main.js");
- console.log("\r\n按住ctrl点击右侧地址打开应用--->http://localhost:8080\r\n");
里面进行了对src文件夹的遍历,同时根据当前ip生成了一下main.js文件的二维码。
在cmd里运行如下命令
如果已经安装qrcode-terminal则跳过该步骤
- npm install qrcode-terminal --save
- npm run dev
另一种方式:
进入src目录下会看到一个.we文件(如文件是:text.we),这个就是你的Weex程序
然后按住Shift+鼠标右键出现:在此处打开命令窗口:输入weex xxxxxxx(文件的全称包括扩展名) --qr 如:(weex text.we --qr)
就会生成一个很大的二维码:然后用WEEX应用扫描就可以看到效果了!
会出现如图
以上二维码需要安装Weex的Playground(下载地址见下面)软件然后点击右上角扫码就可以了如图
Playground下载地址
百度云下载地址http://pan.baidu.com/s/1slq3z9V
官方下载地址http://alibaba.github.io/weex/download.html
二维码下载
npm run dev
是错误的生成二维码的方式。而是进入src目录下会看到一个.we文件(如文件是:text.we),这个就是你的Weex程序
然后按住Shift+鼠标右键出现:在此处打开命令窗口:输入weex xxxxxxx(文件的全称包括扩展名) --qr 如:(weex text.we --qr)
就会生成一个很大的二维码:然后用WEEX应用扫描就可以看到效果了!回复
npm run dev
是错误的生成二维码的方式。而是进入src目录下会看到一个.we文件(如文件是:text.we),这个就是你的Weex程序
然后按住Shift+鼠标右键出现:在此处打开命令窗口:输入weex xxxxxxx(文件的全称包括扩展名) --qr 如:(weex text.we --qr)
就会生成一个很大的二维码:然后用WEEX应用扫描就可以看到效果了!回复
npm install qrcode-terminal --save
npm run dev
错误, 应该输入次,此命令:
weex tech_list.we --qr( 进入此 tech_list.we 所在 的目录下, tech_list.we 是 自己src目录下生成的.we文件 )
回复