查看详情

在 Weex 中使用 SVG

weex-svg 介绍 近几年 SVG 逐渐成为前端开发的热门技术。我们可以在业务场景中构建我们的图标,以及替代部分位图,随着动画交互的普及,SVG 也成为了大家的选择之一。 今天我们给大家带来如何在 weex 项目中通过 weex-svg 来实现 SVG 的一些图形信息的展示。 我们查阅 weex-svg 的文档,可以了解它目前支持的一些元素和属性有: 基本的图形 rect 矩形 circle 圆形 path 路径 polyline 折线 polygon 几何形 line 直线 linear-gradient 线性渐变 radial-gradient 径向渐变 通用属性 fill 颜色填充 stroke 描边的颜色 stroke-width 描边的宽度 快速开始 weex-svg 在插件市场已经发布了,我们可以通过 weex-toolkit 来添加插件。 首先我们创建一个项目: weex create svgapp 然后进入创建的项目, 详情 »

查看详情

通过Weex 300行代码开发一款简易的跑步App

Weex正如它的目标, 一套构建高性能、可扩展的原生应用的跨平台开发方案 Weex 给大家带来的无疑是客户端开发效率的提升,我们可以通过一套代码,实现web,android, iOS的三个平台上运行。自己最近尝试了一次借助weex的插件机制,使用Weex-Amap地图插件 可以开发 LBS 相关的应用。 首先我们先来看下运行的效果吧: iOS 版 Android 版 截图数据仅供参考 它大概具备下面的一些功能; 统计用户在运动过程中的距离累计,时间计算等。 存储用户的运动数据 使用地图定位和距离计算的API,实现距离统计。 显示地图折线,通过对定位的数据地理位置进行折线绘制 统计用户运动的数据,计算总距离和时间 点击用户的历史记录,可以查看轨迹 感觉和大家所用到的app功能相差不多了,但实际上我们借助 Weex 和 Weex-Amap 插件可以非常快速的实现这些功能,下面我们来看下具体怎么实现吧。 使用 weex-toolkit 创建项目 首先我们按照官网的教程安装weex-toolkit。如果已经安装过请忽略。 $ npm install -g weex-toolit 安装完成后,我们创建一个项目目录,比如running-app。 weex create running-app 大家可能会看到下面的提示,输入y安装即可。 详情 »

查看详情

Weex-amap:Weex高德地图插件使用指南

weex-amap 一款高德地图 Weex 插件,它具备了地图的基本使用功能,包括地图展示,添加坐标点,控制地图缩放,在地图上添加折线或者圆形等图形,同时也具备地图的一些基本计算和判断等功能。而且如同 Weex 的能力,它是三端都支持运行,这样你可以通过一套代码实现三端的地图功能。 使用效果预览(iOS版): 快速开始 使用插件,我们需要初始化一个工程项目,然后将插件添加进去。 weex create mapapp cd mapapp # 你可以自行添加ios 或者 android weex platform add ios # 添加地图插件 weex plugin add weex-amap 请确保你安装了最新的 weex-toolkit 这样你的项目里就具备了高德地图的插件功能。 先来一段基本的地图展示,编辑你的weex文件 <template> <div class="container"> <weex-amap class= 详情 »

WEEX老版本插件扩展与VUE版的差异

WEEX在今年一月份宣布在web端对vue渲染的支持,也就是说,今后你可以用写vue的的方式去写weex 项目。在升级新版的weex的时候大家一定记得去官网看下diff [Weex 和 Vue 2.x 的语法差异]https://weex-project.io/cn/references/migration/difference.html。 如果我们在开发第三方插件的时候,我们同样需要注意对与插件写法上的差异。 第三方组件 老版本我们在第三方组件的时候,大致是这样的: // 设置 标签属性 const attr = { // ... } // 设置样式 const style = { // ... } // 设置事件响应 const event = { // ... } // 初始化函数 function init (Weex) { const Component = Weex.Component const extend = Weex.utils.extend // the component's constructor function Hello (data) { Component.call(this, 详情 »

查看详情

WEEX 第三方插件开发教程

weex 是阿里巴巴集团在去年4月份开源的一个使用JS进行代码编写,多端实现运行的开源框架。这也是国内少有的大型开源项目(目前stars 的数量也超过了10K)。 Write Once Run Everywhere weex的的目的就是为了解放生产力,让更少的人去维护更少的代码。weex虽然目前还在密集开发阶段,可用到内部组件,相对少一点,由于是开源项目,因此大家都可以自己贡献自己的开发组件。 其中weex的组件有两种,一种是完全基于提供的api和element去进行封装扩展,类似weex-percentage-circle. 你完全不需要会任何的android/iOS知识和技能就完成一个简单的组件封装。另外一种,叫三方扩展插件可能更好,它需要你在实现某些功能的时候,需要去写三个平台的支持 需要支持ios/android/web。当然这并不是非常严格的限制,比如你就支持了web,ios,但是如果开发者开发的APP就没有andorid的要求,这样的需求也是存在的。 先简单说下第一种,其实非常简单。 我们只需要简单编写一个weex-demo.we文件即可 <template> <div><text>{{textstr}}</text></dv> </template& 详情 »

查看详情

使用yeoman 快速生成WEEX项目

yeoman是一款非常好用的项目模版工具,你可以用它快速生成一个指定的项目,比如react+ webpack或者是angular的项目。它通过命令行会话去完成一定参数配置。 如何使用 首先我们要全局安装 yo 模块。yo是yeoman 的命令行工具模块。 npm install -g yo 然后我们需要选择我们需要生成的具体项目的模版,你可以在discover generator找到你要的项目模版,比如react、angular、vue、Bootstrap等。 然后你需要全局安装这些模块比如 webapp。 npm install -g generator-webapp 安装完成后,只要执行命令,即可生成一定的项目的目录了。我们创建一个目录app-demo,然后进入目录,执行: yo webapp 这样你可以看到的命令行提示选择: 你可以看到项目的执行流程,拷贝,然后安装依赖。 安装完成后,我们就可以看到一个webapp的目录了,这样无疑节省了我们初始化项目的时间。 使用generator-weex-vue 上周weex发布了新的版本宣布对vue2.0的支持,我们可以通过写vue的方式来写weex项目,除了官方的工具,现在可以使用yeoman来生成一个weex项目。 同样你只需要安装模块 generator-weex-vue就行了。 然后执行 yo weex-vue 项目变创建成功了。 项目支持的一些命令: 详情 »

查看详情

聊聊React Native与Weex的Growth Hack

最近开始接触了Weex的一些项目。自己之前写过一段时间React Native,当然这篇文章并不是去探讨两者之间的差异化和使用这些。而是说说技术产品的Growth hack. Growth hacking目前还没有较好的中文对应精准的翻译,来自于Andrew Chen 曾在他那篇有名的《Growth Hacker is the new VP Marketing》 .对于产品用户增长,而且持续曾长,不是一件特别容易的事情,也不要相信一个好的产品,用户就会源源不断的增长。很多知名互联网公司(Facebook Twitter Linkdin)用户增长的背后是来源不断的实践,在其背后有运营在市场的策略也有程序员的开发和数据支持。 React Native 和 Weex 其实背后都天生具有好的基因。那就是其背后是知名的互联网公司。其实在用户成长方面,React Native相比 Weex较为优势的地方,有下面几个方面: React Native基于React,而React很早就开源了,对于JSX的写法,很多React程序员的学习曲线就没有那么陡,而且也奠定了早期的用户。相对VUE的话,相对时间落后些,阿里是今年6月份才开源,而且在写法上与VUE并不能够完全匹配,因此这一点上Weex还需要再进一步。 生态环境,React Native的生态环境远比阿里,当然由于不在同一个时间点,这样不公平, 详情 »