weex开发
weex框架使用和扩展优化
一拳小和尚LXY
学而不思则罔
展开
-
weex开发之手势事件冲突解决
在开发中在使用weex手势事件时遇到了问题,在Android端,当给某个容器类元素上添加手势事件或者绑定bindingX表达式之后,如果在这个容器内部添加了list或者scroller等滚动元素,就会导致手势事件无法触发。我们看到weex官方文档在手势部分说明“目前,由于会触发大量事件冲突,Weex Android 还不支持在滚动类型的元素上监听手势,例如scroller,list和w...原创 2019-06-23 19:05:48 · 1782 阅读 · 0 评论 -
weex开发之动画实现方式的比较
1.css动画简单的动画,比如改变宽高,位置等,可以使用css动画实现,但是需要注意css动画的兼容性比较差,会出现在ios和android上奇怪的表现不一致。详细使用方法见weex官网的相关文档。使用方法:<style scoped> .panel { margin: 10px; top:10px; align-items: center;...原创 2019-06-23 18:25:23 · 2955 阅读 · 0 评论 -
weex实现带有跟手动画的tab栏
在weex开发的群中看到有人提到这个问题,就想着去实现以下,还不是很完美,只支持一屏的tab栏内容,后续会进行优化。2019-6-20 更新:已支持滚动跟手,可以超出屏幕。2019-6-23 更新:解决子元素包含滚动标签时无法滑动切换的问题。2019-6-25 更新:修复底部和指示器会超出屏幕的bug。效果图如下:组件源码:<template> &...原创 2019-05-20 18:51:26 · 1079 阅读 · 0 评论 -
weex实现手势密码效果
实现手势密码效果需要使用weex-gcanvas,继承weex-gcanvas请参考Weex Gcanves集成和使用。效果图:手势密码效果组件封装代码:<template> <div class="container" :style="{width:width,height:height}"> <div class="pa...原创 2019-05-16 15:41:57 · 857 阅读 · 0 评论 -
weex实现侧滑删除效果
参考BUI-Weex实现的侧滑删除的weex组件。上图:侧滑删除示例组件实现:<!--列表侧滑操作组件--><template> <div class="cell" :style="cell_style" ref="cell" @swipe="handleSwipe"> <slot name="cell_co...原创 2019-05-15 10:17:01 · 824 阅读 · 0 评论 -
Weex实现炫酷的侧滑菜单效果
最近在在bindingX,使用bindingX结合weex手势可以比较轻松实现很炫酷的富交互效果,且性能很好,这里实现一个侧滑菜单的效果。weex中集成并使用bindingX看篇BindingX在weex中使用。老规矩,先上效果图侧滑菜单效果图侧滑组件源码:<!--侧滑菜单实现--><template> <div class="conta...原创 2019-05-14 19:14:17 · 1203 阅读 · 0 评论 -
weex-gcanvas+animation模块实现雷达扫描效果
集成weex-gcanvas请参考Weex Gcanves集成和使用先上图示例图上代码:<template> <div ref="test" style="background-color: #ffffff"> <gcanvas @touchstart="touchstart" @touchmove="touchmove...原创 2019-05-10 15:33:57 · 984 阅读 · 0 评论 -
Weex框架源码分析(Android)(一)
一、weexSDK初始化流程WXSDKEngine.initialize(Application application,InitConfig config);//WXSDKEngine的init方法已经被弃用,weex的初始化需要使用下面这个initialize方法public static void initialize(Application application,InitC...原创 2019-04-10 18:56:23 · 2308 阅读 · 0 评论 -
weex开发进阶之component扩展(Android)
做过weex开发的同学应该都知道weex的原生扩展可以分为module扩展和component扩展,component扩展也可以被称为UI组件扩展,我们把原生中的UI组件封装之后就能在vue文件中以标签的方式使用了,这里我们主要讲一下component的扩展。常规的component扩展知识在weex官网中都有教程,我在这里就不再赘述了,如果还不熟悉的话请移步weex官网中的教程。那么我...原创 2019-03-21 22:16:05 · 3583 阅读 · 6 评论 -
Weex开发APP实战(路由和调试方式)
本文主要讲对weex的android工程的两点改造,调试模式和路由方式。一、路由方式通过命令行创建项目时不推荐使用vue-router作为路由的单页面开发模式,当项目规模稍大之后原生应用会经常出现卡顿的情况,而使用多界面开发模式,weex官方提供的navigator使用文档及其不全,这里我们主要说一下navigator模块的用法。1、push(url,callback) 跳...原创 2019-01-17 15:56:37 · 1670 阅读 · 1 评论 -
Weex常用API总结和理解
一、WXEnvironment1、static Map getConfig()获取一些应用配置信息,如下包括:操作系统,app版本号,缓存目录,设备id等。Map<String, String> configs = new HashMap<>();configs.put(WXConfig.os, OS);configs.put(WXConfig.a...原创 2019-04-10 18:57:40 · 985 阅读 · 0 评论 -
Weex开发APP之环境搭建和创建项目
本人在大学毕业之后就开始在公司使用weex开发APP,最开始是有点抵触的,因为我是想做Android或者java的,而是用weex开发APP的话大部分在使用vue的语法进行开发,自己不是很喜欢。 项目启动之初我们公司邀请了weex方面的专家来给我们培训weex相关技术,我们大概跟着边学边做了一个多星期就基本能自己开发weex的界面了,不过后面遇到一些问题(主要是涉及的原生...原创 2019-01-15 09:27:26 · 1113 阅读 · 0 评论 -
Weex Gcanves集成和使用
Weex-gcances介绍GCanvas是一个跨平台的画布解决方案,它实现了图形2d和WebGL API.GCanvas使其用户能够直接访问OpenGL ES API.GCanvas旨在解决JavaScript开发人员的画布的性能问题和兼容性问题。它也是“nativeFramwork“的功能扩展,如weex、react-native,那些没有自己的画布元素的开发体系。目前,GCanvas...原创 2018-09-01 13:49:48 · 6239 阅读 · 25 评论 -
BindingX在weex中使用
如果曾经尝试过按照bindingX官网的方式在weex中使用,就会发现不能实现自己想要的效果。通过在网上查阅资料,了解到weex中使用bindingX不能直接写表达式,sdk无法解析,因此需要一个表达式解析工具的帮助,即bindingx-parser,在我们的项目目录下执行用npm安装上这个插件之后即可使用它来解析bindingX的表达式了。使用方法如下:首先使用npm安装bindi...原创 2018-08-06 16:54:32 · 4343 阅读 · 0 评论 -
Weex组件与模块封装(Android)
Weex组件Android Studio配置在AndroidManifest.xml中添加网络权限等权限。<uses-permission android:name="android.permission.INTERNET"/>//网络权限<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAG...原创 2018-04-10 18:24:35 · 4378 阅读 · 2 评论 -
weex封装两端webView组件(可加载本地HTML文件)
因为项目需求需要显示较为复杂的UI,类似echart的各种统计图。如果封装Android和iOS两端的组件费时费力,因此就想到通过加载本地HTML的方式来实现,但是发现weex的webView组件是没有加载本地html的功能,因此就要自己扩展一下。 这次封装的webView组件具有较强的通用性,可以在HTML界面的事件传递到weex端,也可以在weex端调用HTML...原创 2019-01-16 00:15:16 · 3498 阅读 · 5 评论 -
Weex地图组件开发流程及使用(android)
一、组件开发前准备 首先,新建高德地图开发者账号,获取地图的key。 进入自己的高德开发账号,点击‘创建新应用’ 创建应用完成点击右上角的添加新key 发布版SHA1以及调试版SHA1获取:1、打开android studio 找到Terminal并打开,或者在最下面找到Terminal 如下图: 2、 输入命令 C: 进入c...原创 2018-04-11 13:42:11 · 2660 阅读 · 0 评论 -
Weex地图组件开发流程及使用(IOS)
Weex地图组件开发流程及使用(IOS)一、组件开发前准备 首先,新建高德地图开发者账号,获取地图的key。 进入自己的高德开发账号,点击‘创建新应用’ 创建应用完成点击右上角的添加新key 下图证书的位置 在Info.list中添加相应的权限 使用 CocoaPods 安装 SDK1、在您当前工程文件(.xcodeproj)所在文件夹下创建一个名为 Podfile 的文件。 Pod...原创 2018-03-28 10:51:04 · 1993 阅读 · 0 评论