weex 入门笔记

一、创建项目的方式

weex创建项目的方式有两种，一种是使用官网的工具init ，另一种是使用weexpack create出来的。

使用init创建的项目，需要更改weex.html中的一个index.js的引入路径。否则项目跑不起来

使用create创建的项目，使用chrome可以运行起来，一般是运行三个命令 npm run dev ，npm run serve，weex debug （调试用）

二、热更新的配置

（1）使用npm run dev 与npm run serve以后当修改代码以后会热更新dist 目录下index.js文件 但是不会热更新index.web.js的文件，在浏览器预览时，所访问的是index.web.js所以你看不到修改效果，必须运行npm run build 才会重新更新index.web. js，刷新浏览器可以看到效果

（2）修改配置达到热更新效果：在package.json文件中找到scripts这个节点 在build 字段的值后面添加--watch 即

"build": "webpack --watch"

这样当你运行npm run serve 与npm run build 就可达到热更新的效果，我试了下修改配置后运行npm run dev 与npm run serve 也可热更新 （不过要刷新浏览器）

三、调试

调试的时候必须在npm run dev 与npm  run serve的环境下，也就是说要先运行这两个命令

当在浏览器与模拟器运行都可以看到效果，但是当调试的时候遇到问题，使用weex debug 或者weex debug src/index.vue以后表示要调试项目或者调试某个界面，在真机上先下载官网推荐的调试apk，安装在真机上，当我们运行weex debug src/index.vue后悔自动打开chrome浏览器，会出现二维码，确保真机与电脑在同一个网段，用安装好的apk，扫描二维码，chrome出现设备调试场景，有两个模式一个debugger （调试js 在source中可以看到部分源码）一个inspector -（调试dom以及样式），如果是调试某个界面，会出现2个二维码，一个是手机连接调试模式，一个是这个界面的二维码，先扫描第一个二维码建立连接，再扫描第二个二维码调试。

注意点，我新建的项目里面有es6的语法。。。index.vue里面写着export default 这样我调试的这个界面一直出不来，一直在加载转圈中（一般就是代码有错，编译不过去了），改成 module.exports后就可以调试了。