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

2018-08-09 admin

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

现在,如果你的团队的技术栈是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的知乎专栏 超级全的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官方地址 具体的搭建环境什么的里面都有,可以直接阅读官方文档,但是官方文档有坑,请酌情阅读

有以下知识需要注意

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

  2. 在样式上,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扫二维码)。

推荐阅读 前人留下的印迹


<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>


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




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





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


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

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

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



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



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


注意:仅支持 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能越来越好。

原文链接:https://segmentfault.com/a/1190000015942150

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37626.html

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

相关文章
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
回到顶部