加载中...

Weex 调试二维码


现在我们要在真机上进行调试,需要修改webpack.config.js文件

原代码:

  1. require('webpack')
  2. require('weex-loader')
  3.  
  4. var path = require('path')
  5.  
  6. module.exports = {
  7. entry: {
  8. main: path.join(__dirname, 'src', 'weex-bootstrap.we?entry=true')
  9. },
  10. output: {
  11. path: 'dist',
  12. filename: '[name].js'
  13. },
  14. module: {
  15. loaders: [
  16. {
  17. test: /\.we(\?[^?]+)?$/,
  18. loaders: ['weex-loader']
  19. }
  20. ]
  21. }
  22. }
修改后代码
  1. require('webpack')
  2. require('weex-loader')
  3. var path = require('path');
  4. var fs = require('fs');
  5. var entry = {};
  6. (function walk(dir) {
  7. dir = dir || '.'
  8. var directory = path.join(__dirname, 'src', dir);
  9. fs.readdirSync(directory)
  10. .forEach(function(file) {
  11. var fullpath = path.join(directory, file);
  12. var stat = fs.statSync(fullpath);
  13. var extname = path.extname(fullpath);
  14. if (stat.isFile() && extname === '.we') {
  15. var name = path.join('dist', dir, path.basename(file, extname));
  16. entry[name] = fullpath + '?entry=true';
  17. } else if (stat.isDirectory() && file !== 'dist' && file !== 'include') {
  18. var subdir = path.join(dir, file);
  19. walk(subdir);
  20. }
  21. });
  22. })();
  23. module.exports = {
  24. entry: entry,
  25. output: {
  26. path: '.',
  27. filename: '[name].js'
  28. },
  29. module: {
  30. loaders: [
  31. {
  32. test: /\.we(\?[^?]+)?$/,
  33. loader: 'weex'
  34. },
  35. {
  36. test: /\.js(\?[^?]+)?$/,
  37. loader: 'weex?type=script'
  38. },
  39. {
  40. test: /\.css(\?[^?]+)?$/,
  41. loader: 'weex?type=style'
  42. },
  43. {
  44. test: /\.html(\?[^?]+)?$/,
  45. loader: 'weex?type=tpl'
  46. }
  47. ]
  48. }
  49. }
  50. //获取当前ip地址
  51. function getIPAddress(){
  52. var os = require('os');
  53. var ips = os.networkInterfaces();
  54. var address ;
  55. for(var item in ips){
  56. for(var data in ips[item]){
  57. var ip = ips[item][data];
  58. if(ip.address.indexOf('192')==0){
  59. address = ip.address;
  60. return address;
  61. }
  62. }
  63. }
  64. }
  65. //生成原生调试二维码
  66. var qrcode = require('qrcode-terminal');
  67. qrcode.generate("http://"+getIPAddress()+":8080/dist/main.js");
  68. console.log("\r\n按住ctrl点击右侧地址打开应用--->http://localhost:8080\r\n");

里面进行了对src文件夹的遍历,同时根据当前ip生成了一下main.js文件的二维码。

在cmd里运行如下命令

如果已经安装qrcode-terminal则跳过该步骤

  1. npm install qrcode-terminal --save
  1. 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

二维码下载


第 1-5 条, 共 5 条.
流年浮沉拜生灵 2017-05-13 18:57:01
发现不是这个的问题,我是pc有虚拟网卡导致的它会解析ip成虚拟网卡地址导致手机app访问不到,禁用后重新生成二维码就好了回复
实例 2017-03-23 14:20:06
我的二维码能调出来,但是用weex playground 扫描二维码提示network(同一局域网上)回复
+++ 2017-02-21 18:07:23
@听不见的风景:正解:调二维码的不是输入:npm install qrcode-terminal --save
npm run dev
是错误的生成二维码的方式。而是进入src目录下会看到一个.we文件(如文件是:text.we),这个就是你的Weex程序
然后按住Shift+鼠标右键出现:在此处打开命令窗口:输入weex xxxxxxx(文件的全称包括扩展名) --qr 如:(weex text.we --qr)
就会生成一个很大的二维码:然后用WEEX应用扫描就可以看到效果了!回复
为什么我的weex应用一直时network error回复
听不见的风景 2016-12-01 16:35:06
正解:调二维码的不是输入:npm install qrcode-terminal --save
npm run dev
是错误的生成二维码的方式。而是进入src目录下会看到一个.we文件(如文件是:text.we),这个就是你的Weex程序
然后按住Shift+鼠标右键出现:在此处打开命令窗口:输入weex xxxxxxx(文件的全称包括扩展名) --qr 如:(weex text.we --qr)
就会生成一个很大的二维码:然后用WEEX应用扫描就可以看到效果了!回复
awkflf11 2016-11-30 11:34:56
输入命令时,在cmd里运行如下命令

npm install qrcode-terminal --save
npm run dev

错误, 应该输入次,此命令:
weex tech_list.we --qr( 进入此 tech_list.we 所在 的目录下, tech_list.we 是 自己src目录下生成的.we文件 )
回复