weex 探索
程序员文章站
2024-03-16 10:18:34
...
前提
掌握 .html, css,js
嗯,就这点要求
目的
1. 从新建项目,新建文件 开始,测试一个最基本的 weex展示
2. 完成最基本展示后,实现一个更复杂一点的应用。并了解使用weex制作app的优缺点
3. 实现更复杂一点的应用后,打包成android和ios安装包。并熟悉一个完整的weex项目从0到1整个流程。
起飞
开发环境
1 安装java JDK。
根据你的电脑类型选择安装,由于我的电脑是window 64位 所以选择图中红框。
配置java 环境变量,请自行百度,安装成功以 cmd中能够正确执行 java 和 javac为准
2 安装android JDK. 地址https://developer.android.com/studio/index.html。
下载安装后,里面包含一个开发andorid应用的编辑器,和andorid JDK .这个JDK是我们需要的,配置andorid JDK环境变量,自行百度,原理与配置java JDK一模一样。
配置开发工具
我使用webstorm开发,以此为例
安装插件,file–>setting–>输入plugin–>右侧输入weex–>安装–>重启
写出一个第一个weex展示案例
新建一个空项目,weex-kong
file—>new–>project–>empty project
然后新建一个weex文件,home.we
file—>new–>weex file
<template>
<div class="container" >
<div class="cell">
<image class="thumb" src="http://t.cn/RGE3AJt"></image>
<text class="title">hello weex</text>
</div>
</div>
</template>
<script>
module.exports = {
data: {
rows:[]
}
}
</script>
<style>
</style>
开始运行,运行需要在手机上安装weex专用playground 地址:https://weex-project.io/cn/playground.html
下载安装,后,在电脑cmd中 进入刚才新建项目的目录,执行weex home.we
使用手机扫描浏览器中的二维码,选择使用weex(其实就是playground )打开,这就是效果。
尝试改变电脑端页面代码,查看手机上展示,没错 会自动刷新,PC与手机神奇的链接在一起了。