踩坑--- 基于钉钉的Weex微应用开发起手式(其实写完发现变成Weex相关资料汇总了)

好吧,我知道你来看这个文章,一定是遇到坑了,所以,把这几个放在最开始吧

现在,如果你的团队的技术栈是react,请尝试这个吧,跟react很像,如果你的团队一直使用react,这是一个更好的选择Rax · 跨容器的渲染引擎

Vue问题,你可以在Vue官方提交issues,【地址】
Weex问题,你可以在中文讨论板块提交问题,【地址】
Weex官方github提issues地址Weex的Issues
weex支持有限的Style,页面的布局使用Flex,建议仔细阅读:Weex 组件支持的通用样式规则
weex的上层业务框架有三层:vue2.0,rax,we,如果你用vue2.0来编写上层业务,建议仔细阅读:Vue 2.x 在 Weex 和 Web 中的差异Vue 官方文档
内建组件和内建模块基本上是你开发Weex应用的基础,建议仔细阅读:内建模块内建组件
weex debug 的使用方式,建议仔细阅读:weex dev tool 的使用

常用社区与资源

相当于阿里的weex官方UI库Weex Ui 官网

Weex + Ui - Weex Conf 2018

饿了么前端关于Weex的知乎专栏
超级全的Weex大集合,大礼包,千万不要错过
据说来着阿里的同学的 可能是史上最全的weex踩坑攻略
3个比较活跃的Weex开发QQ群 327169027 112304356 140596030
可以借鉴的Demo weex-eleme
Weex学院
Weex中文社区
一个weex的UI组件库
一个weex答题牛人,荔枝我大哥
Weex的github地址
做app的推荐使用远方的狼的脚手架,做了很多优化,极力推荐使用远方的狼的脚手架项目地址:
iOS的同学可以看看这个iOS开发者的Weex伪最佳实践指北
Weex项目实战及踩坑记录
weex-eros 是基于 weex 封装面向前端的 Vue2 写法的解决方案

首先,你肯定想知道Weex是个什么玩意

来给你甩个链接,来看看官方如何解释weex是个啥Weex官方地址
具体的搭建环境什么的里面都有,可以直接阅读官方文档,但是官方文档有坑,请酌情阅读

有以下知识需要注意

  1. Weex现在支持用Vue2.0语法进行开发,所以你现在需要先具备一定的Vue基础,关于Vue的相关知识,请参考Vue官方文档,Weex官方说是Vue的全家桶都能够使用,但是在实际开发过程中,我们团队还是遇到了一定的问题,3端表现并不一致,请斟酌使用。如果你有原生开发经验,那就太好了。
非常重要,一定要仔细阅读 Vue 2.x 在 Weex 和 Web 中的差异
  1. 在样式上,Weex对CSS的支持不是特别完善

Weex不支持CSS的简写,所有类似margin: 0 0 10px 10px的都是不支持的
不管是Web还是Weex你的设计应该基于750px来绘制界面,Weex框架层面会帮你自动计算和适配。

  1. 调试

如果你对Native比较熟悉可以直接编一下weex开源的项目,如果实在搞不明白的话,你可以去各大应用市场里下载 weex playground 这个App,然后用weex debug src/weex-bootstrap.we 来开启调试界面。
如果你只想查看一下在Native端的渲染,用weex playground这个App扫描一下第二个二维码即可。
如果你需要调试,依然是用weex playground这个App先扫描第一个二维码,此时会出现第二个节目,然后再扫描下方,你自己页面的二维码来渲染。
调试分为两个部分Debugger和Inspector,如果你选择Debugger,那么你可以在source里看到你写的文件,来断点之类的。如果你选择后者,那么你可以在element面板里查看元素。
重要的事情再说一遍:(要用weex playground扫二维码)。

推荐阅读 前人留下的印迹


  • 关于字体图标的解决办法,字体图标需要处理后才能正常使用 字体图标的Bug
    <text :style="{fontFamily:'iconfont',color:'red',fontSize:'40px'}">{{getFontName}}</text>
    <script>
    var he = require('he'); module.exports = { data: function () {
    return {
    fontName: '',
    }
    },
    computed: {
    getFontName: function() {
    return he.decode(this.fontName)
    }
    }
    }
    </script>




  • 强烈推荐的钉钉封的一个js库,非常好用,这个库存在的意义是提供一些便捷的Utility函数,这些Utility函数将抹平Web Weex之间的一些差异,提供统一的接口,让用户使用,目前实现了7个模块可供使用。抹平差异的Utility库




  • 我是从这个Demo上手的,基于Vue2.0 强烈推荐,强烈推荐,强烈推荐 ,Android可直接打包为apk,无须配置一个老外写的todo-list Demo

通往星辰大海的路上的坑(下面想起什么记录什么,无序排列,持续更新)

  • <a>标签跳转的是一个Weex页面(也就是一个js文件),与H5下的<a>标签用法不一致,并不是跳转一个常见的网页


  • 关于fetch(options, callback[,progressCallback])发起网络请求中有关Timeout的问题

当你在请求数据时,可能会发现官方的文档里没有设置 timeout 这个属性,官方大概把这个属性值设置为了3秒,在弱网情况下,这个值是不够的。经过研究,其实,你可以大胆使用,如下:

stream.fetch({
    method: 'GET',
    type: 'json',
    url: 'https://api.github.com/repos/' + repo,
    timeout:6000  //单位为ms
}, callback)

  • 使用Weex中的refresh,loading上拉与下拉刷新,3端体验不一致,Android上拉下拉都没问题,iOS都不行

原因是因为在iOS 上由于 Scroller 的contentSize 小于scroller 本身高度所以导致不能滑动,所以需要设置你想滑动的内容或容器高度
(建议同loadmore事件替换loading组件,loading的问题有点多,即使你的content足够长,高度大于屏幕高度,多拽几次也有可能出现加载中...情况收不下去的)


  • 目前图片不支持使用本地图片,并且不支持gif格式,如果需要类似loading的动图,可以尝试使用动画实现


Tips: transform: 'rotateZ(360deg)', 其中你旋转的角度每次动画过后都是保存了的,并没有归0,也就是说你第一次是从0度转到360度,以后(你的每600ms)都是从360度到360度。


  • 文字展现必须使用<text>标签


  • 关于Android端的点透事件

需要在上层视图上加上@click.stop,如果上层视图有事件,多加一个中间层,把@click.stop加在空事件视图上


  • 关于Page 事件

注意:仅支持 iOS 和 Android,H5 暂不支持。
Weex 通过 viewappear和 viewdisappear事件提供了简单的页面状态管理能力。
viewappear 事件会在页面就要显示或配置的任何页面动画被执行前触发,例如,当调用 navigator模块的 push方法时,该事件将会在打开新页面时被触发。viewdisappear事件会在页面就要关闭时被触发。必须绑定到页面的根元素上。
(我们遇到的坑是在Playground中这两个事件都能够触发,但是iOS和Android的触发时间好像有微小的差异,但是这个事件在钉钉客户端中,Android上表现完好,iOS端无法触发,原因 不明,但是在钉钉中的解决办法如下)
页面resume事件
当页面重新可见并可以交互的时候,钉钉客户端会触发这个事件。

import dingtalk from 'weex-dingtalk';
dingtalk.ready(function(){
    dingtalk.on('resume',function(){
        // do something
    })
});

页面pause事件
当页面不可见时,钉钉客户端会触发这个事件。

import dingtalk from 'weex-dingtalk';
dingtalk.ready(function(){
   dingtalk.on('pause',function(){
       // do something
   })
});

以上全部资源来自互联网搜集,欢迎转发分享,希望Weex能越来越好。

weex是不是凉凉了???

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,384评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,845评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,148评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,640评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,731评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,712评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,703评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,473评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,915评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,063评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,706评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2 352

推荐阅读更多精彩内容