资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/踩坑--- 基于钉钉的Weex微应用开发起手式（其实写完发现变成Weex相关资料汇总了）

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

zhouzhou / 2762人阅读

摘要：问题，你可以在中文讨论板块提交问题，地址。文字展现必须使用标签关于端的点透事件需要在上层视图上加上，如果上层视图有事件，多加一个中间层，把加在空事件视图上关于事件注意仅支持和，暂不支持。事件会在页面就要关闭时被触发。

好吧，我知道你来看这个文章，一定是遇到坑了,所以，把这几个放在最开始吧 现在，如果你的团队的技术栈是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 写法的解决方案](https://www.gitbook.com/book/...
首先，你肯定想知道Weex是个什么玩意

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

有以下知识需要注意

Weex现在支持用Vue2.0语法进行开发，所以你现在需要先具备一定的Vue基础，关于Vue的相关知识，请参考Vue官方文档，Weex官方说是Vue的全家桶都能够使用，但是在实际开发过程中，我们团队还是遇到了一定的问题，3端表现并不一致，请斟酌使用。如果你有原生开发经验，那就太好了。

非常重要,一定要仔细阅读  Vue 2.x 在 Weex 和 Web 中的差异

在样式上，Weex对CSS的支持不是特别完善

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

调试

如果你对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扫二维码）。
推荐阅读 前人留下的印迹 
钉钉官方人员，基于Weex的钉钉高性能微应用倡导者与实践者，写的相关文章    请仔细阅读  地球上最全的weex踩坑攻略-出自大量实践与沉淀

关于字体图标的解决办法，字体图标需要处理后才能正常使用 字体图标的Bug



{{getFontName}}



一个可爱的萌妹子的探路历程比较详细的Weex踩坑过程



连载教程进击的weex 第二发 weex的各种坑





目前所知的，比较倾向于原生的踩坑历程最早的踩坑历程




基本的Weex介绍视频 ，钉钉研发人员开讲 快到让你难以置信的Weex技术




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




钉钉给出的常见小问题




Weex相关的视频，但是Weex1.0版本的，可以学习思想  暴走亲年的weex教学视频




weex-hackernews项目源码，Weex官方给的一个Demo https://github.com/weexteam/weex-hackernews




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




关于最多的Playground扫码白屏的问题，这个文章中有提到我的Weex开发之路


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


标签跳转的是一个Weex页面（也就是一个js文件），与H5下的标签用法不一致，并不是跳转一个常见的网页




关于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的动图，可以尝试使用动画实现



可以考虑用来做loading动画持续旋转的动画效果



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



文字展现必须使用标签



关于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 weex webrtc weex图表 weex-playground

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96750.html

相关文章

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

    摘要：问题，你可以在中文讨论板块提交问题，地址。文字展现必须使用标签关于端的点透事件需要在上层视图上加上，如果上层视图有事件，多加一个中间层，把加在空事件视图上关于事件注意仅支持和，暂不支持。事件会在页面就要关闭时被触发。 好吧，我知道你来看这个文章，一定是遇到坑了,所以，把这几个放在最开始吧 现在，如果你的团队的技术栈是react，请尝试这个吧,跟react很像，如果你的团队一直使用rea...

    neu 评论0 收藏0

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

    摘要：问题，你可以在中文讨论板块提交问题，地址。文字展现必须使用标签关于端的点透事件需要在上层视图上加上，如果上层视图有事件，多加一个中间层，把加在空事件视图上关于事件注意仅支持和，暂不支持。事件会在页面就要关闭时被触发。 好吧，我知道你来看这个文章，一定是遇到坑了,所以，把这几个放在最开始吧 现在，如果你的团队的技术栈是react，请尝试这个吧,跟react很像，如果你的团队一直使用rea...

    fish 评论0 收藏0

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

    摘要：问题，你可以在中文讨论板块提交问题，地址。文字展现必须使用标签关于端的点透事件需要在上层视图上加上，如果上层视图有事件，多加一个中间层，把加在空事件视图上关于事件注意仅支持和，暂不支持。事件会在页面就要关闭时被触发。 好吧，我知道你来看这个文章，一定是遇到坑了,所以，把这几个放在最开始吧 现在，如果你的团队的技术栈是react，请尝试这个吧,跟react很像，如果你的团队一直使用rea...

    Carbs 评论0 收藏0

  • 最全的weex踩坑攻略-出自大量实践与沉淀

    摘要：如果你对微应用感兴趣，也在开发着微信小程序，不妨来看看为了让你减少顾虑而准备的技术对比表格，是的，开发钉钉的微应用是如此的简单。访问这个链接阅读钉钉微应用与微信小程序技术对比表格。与内存管理由于运行在中，此与有较大差异。 在自己的业务环境中使用，并开放给第三方isv，企业开发者使用，这是一篇有内涵有故事的文章。 如果你对weex微应用感兴趣，也在开发着微信小程序，不妨来看看为了让你减少...

    qc1iu 评论0 收藏0

  • 最全的weex踩坑攻略-出自大量实践与沉淀

    摘要：如果你对微应用感兴趣，也在开发着微信小程序，不妨来看看为了让你减少顾虑而准备的技术对比表格，是的，开发钉钉的微应用是如此的简单。访问这个链接阅读钉钉微应用与微信小程序技术对比表格。与内存管理由于运行在中，此与有较大差异。 在自己的业务环境中使用，并开放给第三方isv，企业开发者使用，这是一篇有内涵有故事的文章。 如果你对weex微应用感兴趣，也在开发着微信小程序，不妨来看看为了让你减少...

    leiyi 评论0 收藏0

发表评论

登陆后可评论

0条评论

zhouzhou

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<