关于weex学习笔记
最近在完善之前的weex项目功能,clone下项目来竟然忘记了怎么操作了,慢慢回顾查询并操作,终于跑起来了。
一、准备工作
开发工具:WebStorm (V 2018.1.1)
浏览器环境:Google Chrome (版本必须是79或以下,不然weex debug 不起来)
![](https://img.haomeiwen.com/i9358782/ceeaeb1c9498a2c1.png)
二、开发
由于我这个不是新项目,是放github上了的,就从我这次开发做记录。
1、通过git clone 将项目克隆下来并通过webstorm打开。
2、改配置信息 ,在这里写上项目渲染出来的第一个页面文件。
![](https://img.haomeiwen.com/i9358782/bc97fd46218986fc.png)
在这里改上第一页的文件目录名。
![](https://img.haomeiwen.com/i9358782/0d7f9c77ada273eb.png)
3.npm install 安装插件
![](https://img.haomeiwen.com/i9358782/972c8b20fa9d9157.png)
安装完成就多了一个这个node_modules文件:
![](https://img.haomeiwen.com/i9358782/747c6eecc8e6065f.png)
4、检查weex安装版本
命令:weex -v
![](https://img.haomeiwen.com/i9358782/602e6644e41c9aeb.png)
5、简单文件用法
(1)在store文件里
api.js里宏定义了一些接口名称和请求地址,
action.js请求中间层方法,
index.js里定义一些变量名并做了一些get方法,
mutations.js里定义了一些处理数据的方法。
![](https://img.haomeiwen.com/i9358782/a6effeea104b36e4.png)
(2)在.vue文件里写界面布局template、事件script、样式style。
(3)在.router.js文件里写了当前文件地址及有跳转的地址,及返回的文件地址。
![](https://img.haomeiwen.com/i9358782/bfe9bb75eedace15.png)
5、常用命令
(1)npm run build
(2)npm run dev 打包后生成的文件在dist文件底下,需要将.js文件给服务器端,其他移动端获取链接跳转到我们写的weex页就可以了。
![](https://img.haomeiwen.com/i9358782/0fd1f1fd79431a7d.png)
本地测试时可以写个本地地址,比如我在xcode里这样测试:
![](https://img.haomeiwen.com/i9358782/41803928a112a251.png)
(3)npm run serve 在浏览器打开页面 ,用weexPlaygroud客户端扫码手机端看效果。
![](https://img.haomeiwen.com/i9358782/d5fc9195b8a2b426.png)
三、debug调试
weex debug 命令开启调试,手机扫码点击调试就可以了。
具体怎么看调试数据根据官网来就行 https://weex.apache.org/zh/guide/debug/debug.html
![](https://img.haomeiwen.com/i9358782/022626dd14ad9905.png)
![](https://img.haomeiwen.com/i9358782/2517c1471e738c79.png)