欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

weex 探索

程序员文章站 2024-03-16 10:18:34
...

前提

掌握 .html, css,js
嗯,就这点要求

目的

1. 从新建项目,新建文件 开始,测试一个最基本的 weex展示
2. 完成最基本展示后,实现一个更复杂一点的应用。并了解使用weex制作app的优缺点
3.  实现更复杂一点的应用后,打包成android和ios安装包。并熟悉一个完整的weex项目从0到1整个流程。

起飞


开发环境

1 安装java JDK。

weex 探索
根据你的电脑类型选择安装,由于我的电脑是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开发,以此为例
weex 探索

安装插件,file–>setting–>输入plugin–>右侧输入weex–>安装–>重启
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与手机神奇的链接在一起了。