WEEX,一次撰写,多端运行
来源:互联网 发布:汽车用品淘宝 编辑:程序博客网 时间:2024/06/02 06:12
最新体验了下WEEX,这是一个使用js语法编写客户端程序的框架。我们可以使用vue.js编写代码。
vue语法
demo
效果展示:
这个展示效果app使用的是我本地的tomcat提供服务,服务端源码:码云
- 首先 web 开发体验在各端当中是相同的。包括语法设计和工程链路。
- 其次,Weex 的组件、模块设计都是 iOS、Android、Web 的开发者共同讨论出来的,有一定的通用性和普遍性。
- Weex 开发同一份代码,可以在不同的端上分别执行,避免了多端的重复研发成本。
下面进入正题:
环境搭建
- 客户端原生: 只需要在手机上安装一个app即可,调试运行可以通过扫描二维码非常方便。playground
- node.js: 官网,
首页上就有下载链接。node安装应该也是非常轻松 - WEEX:
官网guide
官网github
demo和源码
首先安装weex-toolkit
$ npm install -g weex-toolkit
如果npm遭遇网络问题,可以使用淘宝的 cnpm 镜像:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org$ cnpm install -g weex-toolkit
初始化 weex 项目
$ weex init weex-bobby
这样在当前文件夹下会生成一个weex-bobby工程,进入weex-bobby文件夹安装项目依赖
$ npm install
这样环境基本就可以正常使用了。
项目运行
首先是Hello World
在weex-bobby文件夹下,会有一个src文件夹,这个文件夹就是源代码的目录,新建的项目工程目录中会有一个index.vue文件。
<template> <text>Hello World</text></template>
template
标签中写的是页面布局 script
标签控制逻辑 style
标签控制样式
第一个文件有了,然后在weex-bobby目录下输入或直接点击start.bat
$ npm run serve
页面就启动了,网页会自动打开,想在手机上看到效果可以输入
weex src/index.vue
页面启动后,还会生成二维码,使用playground扫一下即可在真机上看到效果。
运行demo
demo源码的地址在文章开头,直接把源代码放到src目录就是这么简单。这里我们需要对整个工程打包
$ weex src --entry src/index.vue
同样的,手机扫一扫即可看到效果
如果想直接打包生成js源码发在手机上运行不通过网络,使用下面的命令
$ weex compile src dist
运行后,dist文件夹下就是项目的打包后的文件,我们直接把dist文件夹下的所有内容全部复制到android工程中的assets目录下,然后重新运行playground的项目,playground项目android源码在demo和源码
存在的未知问题:
使用weex src --entry src/index.vue
运行项目后tabbar中单页标签中的style样式会解析失败,但是通过解析打包后的js文件就可以加载style样式,目前原因不知道。
所以demo项目如果想通过二维码直接在真机上看到效果使用一下2个命令
$ weex src --entry src/index.vue
然后在一个cmd中
$ weex compile src .weex_tmp
更新第一步生成的js源码
- WEEX,一次撰写,多端运行
- Redis启动多端口、运行多实例
- Redis启动多端口、运行多实例
- Redis启动多端口、运行多实例
- Redis启动多端口、运行多实例
- Weex
- weex
- WEEX
- weex
- Weex 如何快速运行官方的examples?
- iOS Mac版 终端安装weex环境以及运行效果
- 折腾Weex+Android App开发运行环境搭建手记
- 一次编写,随处运行
- 控制程序运行一次
- 程序运行一次
- 一次运行一个实例
- 程序只运行一次
- 控制程序运行一次
- spring-boot-data-jpa
- 数据结构实验之查找五:平方之哈希表
- lambda函数是变成对集合进行排序的几种方式
- golang判断文件或文件夹是否存在
- js-完美物体运动框架
- WEEX,一次撰写,多端运行
- 洛谷 P1597 语句解析
- 伪知识之了解数据库中外键主键的区别以及含义持续更新:【内向即失败--王奕君】
- 手势识别代码详细说明2(衔接上一篇)
- 在Windows下编译Mapnik的依赖库
- Draggrid 频道管理
- 滑动窗口中的最大值
- 协调世界时转换为GPS周秒
- 。。。