weex入门学习总结

weex是什么就不用多说了，相信大家都百度，一大堆。

直接上：1.weex的环境的搭建

1.Weex 是使用Node.js 开发构建的，所以需要我们的电脑上安装有 Node.js。

安装Node.js：

1. node.js需要4.0+
2. 百度云下载地址http://pan.baidu.com/s/1o84g6c6
3. 官网下载地址https://nodejs.org/en/
4. 安装教程请看这里http://www.shouce.ren/api/view/a/3461

2.安装 weex-toolkit

1.打开CMD工具现在 安装weex-toolkit,这是weex的集成环境。

       输入：npm install -g weex-toolkit

    2.查看weex的版本输入：weex --version

    3.查看一下weex的指令输入：weex

	如下：
   
   
Usage: weex foo/bar/we_file_or_dir_path  [options]
Usage: weex debug [options] [we_file|bundles_dir]
Usage: weex init
 
Options:
  --qr          display QR code for PlaygroundApp                      [boolean]
 
  --smallqr     display small-scale version of QR code for PlaygroundApp,try it
                if you use default font in CLI                         [boolean]
 
  -o, --output  transform weex we file to JS Bundle, output path must specified
                (single JS bundle file or dir)
                [for create sub cmd]it specified we file output path
                                                 [default: "no JSBundle output"]
 
  --watch       using with -o , watch input path , auto run transform if change
                happen
  -s, --server  start a http file server, weex .we file will be transforme to JS
 
                bundle on the server , specify local root path using the option
                                                                        [string]
 
  --port        http listening port number ,default is 8081        [default: -1]
 
  --wsport      websocket listening port number ,default is 8082   [default: -1]
 
  --np          do not open preview browser automatic                  [boolean]
 
  -f, --force   [for create sub cmd]force to replace exsisting file(s) [boolean]
 
  -h, --host                                              [default: "127.0.0.1"]
 
 
weex debug -h for Weex debug help information.
 
for cmd example & more information please visit
https://www.npmjs.com/package/weex-toolkit

这里你就安装好weex的环境了！

2.我们来创建第一个weex的项目

1.首先建一个文件夹如：Demo

   2.然后使用cmd进入Demo这个文件夹，或者在这个文件夹下直接打开cmd（按住shift键同时点击鼠标右键选择【在此处打开命令窗口】）

   3.输入：weex init 

它会出现prompt:Project Name:<weex-test> 按回车也可自定义   （这个是让你设置创建项目的名称   如果直接按回车就是默认文件夹的名字）

   4.会出现下面这几个文件

1. file:.gitignore created.
2. file: README.md created.
3. file: index.html created.
4. file: package.json created.
5. file: src/main.we created.
6. file: webpack.config.js created.

5.接着安装依赖输入

1. npm install

 6.输入：npm run build 同步在dist目录下创建main.js文件

 7.输入：npm run serve 开启一个端口8080的服务  

接着打开浏览器在地址栏输入：localhost:8080就可以出现效果了

还有一种方式打开这个.we文件看到效果就是在

src文件夹下面开启cmd输入：weex  Demo.we（就是你项目名）就会自动浏览器渲染效果

还可以在手机上显示这个效果：

进入src目录下会看到一个.we文件（如文件是：text.we），这个就是你的Weex程序
然后按住Shift+鼠标右键出现：在此处打开命令窗口：输入weex xxxxxxx（文件的全称包括扩展名） --qr 如：（weex text.we --qr）
就会生成一个很大的二维码：然后用WEEX应用扫描就可以看到效果了！这个应用在这里下载：http://alibaba.github.io/weex/download.html  

8.再在这个目录下打开cmd 输入：npm run dev 这个是开启监听.we文件的改动

也就是说我们在src目录下：用记事本（其他编译软件也可以）打开.we文件把那个HelloWeex 改成Helloword接着刷新网页就会改变文本；手机上刷新也会跟着改变！

3.接着介绍SublimeText3这款编译软件的安装以及插件的安装

去官网下载：http://www.sublimetext.com/3

     解压直接下一步，下一步安装完成。

     我安装的插件有：1.Package Control 下载地址：https://packagecontrol.io/installation

为了方便开发人员快速安装需要的插件

下载完了复制 打开SublimeText3点击Preferences-->BrowsePackages-->注意这里只有User退回到Sublimi Text 3目录下进入-->

Installed Packages 粘贴就可了.

查看是否安装成功：点击Preferences-->Package Settings这时就会看到Package Control这个选项 恭喜安装成功。

2.SublimeCodeIntel 代码提示的插件

打开SublimeText3 按住Ctrl+Shift+P 就会出现一个框框 输入：Pain 选择Package Control：Inatall Package 也会出现一个输入框

输入：SublimeCodeIntel 回车坐等安装成功 看做下提示

3.HTML-CSS-JS Prettify代码的格式化插件 安装方法跟上面一样

用法：点击右键就会出现HTML-CSS-JS Prettify 进入选第一个Prettif Code 

这时候会报一个找不到nodejs程序 点击进入把那个nodejs路劲换成你自己的路径就好了！

4.ColorPicker 这个插件可以在编译器中取色 安装同上

用法：按住Ctrl+Shift+C 就可以了

5.All Autocomplete 插件会搜索所有打开的文件来寻找匹配的提示词。安装同上

如果你觉得不够用可以自行安装

4.显示weex语法高亮设置：

由于 weex 源代码的文件格式为.we 格式，默认在文本编辑器中不支持语法高亮，代码看起来很不舒服。不过可以使用 vue.js 的语法高亮来支持

第一步：下载 Weex 语法高亮脚本地址：https://pan.baidu.com/s/1mibEtFa  （不是我自己的）

第二步：打开 Sublime Text，依次点击 Tools -> Developer -> New Syntax，新建一个语法文件，把下载下来的文件打开复制内容覆盖原有的内容，并保存，文件名和扩展名为Plain we.sublime-syntax 。请注意文件名称必须命名为Plain we.sublime-syntax,否则没有高亮.  

第三步：开启weex语法高亮 点击View --> Syntax-->we Component (这个选项在最下面点击先下箭头往下翻)

这时候就大工告成了。

5.最后就是学习weex的学习资源了

weex的中文文档 http://www.shouce.ren/api/view/a/11586

weex社区 http://weex.help/

weex官网 http://alibaba.github.io/weex/download.html

有关weex学习的网址: 1.https://github.com/alibaba/weex

2.weex你需要知道的事 命令行工具：weex-toolkit  https://github.com/weexteam/weex-toolkit

调试工具: weex-devtool  https://github.com/weexteam/weex-devtool

3.WEEX SDK集成到工程(Integrate to Android) ：https://github.com/weexteam/article/issues/25

有图的：https://vczero.github.io/weex-learning/android/003_HelloWorldBuildInWeex.html

4.weex创建项目--工程构建--官方示例文件解析 ：https://github.com/vczero/weex-learning

基本没有了！我也是刚刚才接触weex的有什么错误的地方请留言交流！希望大家可以一起交流互相学习！