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

baimeishaoxia baimeishaoxia     2023-03-22     251

关键词:

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

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

有以下知识需要注意

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

    非常重要,一定要仔细阅读 Vue 2.x 在 Weex 和 Web 中的差异
  2. 在样式上,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>


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




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




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

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


  • 关于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能越来越好。

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hbabi2ibaab

企业数字化转型的起手式是什么?

...研究数字规律、也不应该是根据数字做出决策,而是基于真实的数据采集,数据失去了真实,有数据比没有数据更可怕。一、团队没有爱上终端系统,就暂停搞数 查看详情

html[vue]vue+webpack起手式(代码片段)

查看详情

企业内部应用如何开发?

...是H5微应用还是小程序开发?钉钉开放平台支持支持H5微应用开发以及小程序开发,企业内部应用也支持。H5微应用以及小程序在以下方面存在不同:钉钉开放平台支持小程序和H5微应用两种类型的应用开发。小程序是一种全新的... 查看详情

vue-起手式

0x00:前言这次前言不想扯太多。本文主要是记录一下自己的学习历程,顺带做一个总结。当中有參考Vue.js的中文文档,也有去查看其它大大们给出的总结。最后也是一个期盼,希望能够帮助到其它有须要的小伙伴。补充:第一次... 查看详情

钉钉h5微应用的一些简单使用

参考技术A刚写完钉钉的H5微应用,在此记录一些H5里面调用钉钉原生的方法H5使用的是vue2写的 查看详情

vue.js起手式+vue小作品实战

 本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑的代码以供练... 查看详情

张书乐:5分钟搞懂自媒体怎么选头像!萌萌哒只是起手式

自媒体都是要走亲近风的,不是亲切,亲切还有点居高临下,亲近才是举案齐眉。我有一个梦想:有个自媒体,有7个头像,按周一到周日排序,就像日历一样,每天对日期或节日进行提示。‘650)this.width=650;"src="https://s2.51cto.com/w... 查看详情

钉钉应用开发新手入门求助

...其实这个问题很难有准确的答案,相对于app开发,钉钉微应用开发花费的更少,开发周期更短,但局限性也更大。2、钉钉微应用的开发投入人力很多吗?钉钉微应用的开发和app的开发的流程其实是一样的,都是要通过功能需求... 查看详情

企业微信的功能有啥及登录方法图文教程

参考技术A  钉钉比企业微信早出来很长时间,但是也意味着企业只能选择选择一个,企业微信到底具有什么功能?它与钉钉相比哪个更好?这也是大家比较好奇的地方,下面就让我为大家介绍一下企业微信相关的的功能及登录方... 查看详情

钉钉,企业微信,华为welink,头条飞书,各有啥优势?

....com/content/20/0203/01/33954190_889352853.shtml华为welink没有用过,钉钉、企业微信和飞书都体验过,也和身边的朋友们偶尔聊起过这些软件,谈谈个人对钉钉、企业微信和飞书的理解和感受。钉钉和企业微信其实可以放到一起来谈,因为... 查看详情

钉钉的坏与好

钉钉更新频繁,有时候让人恼火。移动端,我希望极简,结果它越来越重。 文件归属公司所有,两年时间,公司的100G员工已用5G。长远打算,公司的归公司,我的归我。 员工交接不方便,QQ归属公司,钉钉则不是。前面... 查看详情

钉钉的坏与好

钉钉更新频繁,有时候让人恼火。移动端,我希望极简,结果它越来越重。 文件归属公司所有,两年时间,公司的100G员工已用5G。长远打算,公司的归公司,我的归我。 员工交接不方便,QQ归属公司,钉钉则不是。前面... 查看详情

在asp.netmvc项目中使用react

...UI库的支持,遂采用了React来开发前端。目前我的项目是基于ABP框架的ASP.NETMVC/WEBAPI作为后端,AngularJS作为前端。但是发现钉钉官方的UI(SaltUI)是基于React封装的,另外AmazeUI的Touch版本也是React封装,也考虑到R 查看详情

企业微信对外,钉钉对内,你选哪个?

原文:企业微信对外,钉钉对内,你选哪个?作者分享自己对于企业微信与钉钉的定位、场景、市场前景的思考,不知道市场最终会给出什么答案。  一、企业微信年度发布会2019年12月23日,企业微信2019年度发布会在广州... 查看详情

[转]钉钉的h5性能优化方案

对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环。原本H5的渲染性能就不及native的app,如果不把性能优化做起来,将极大地影响用户使用产品的积极性。用户感受当用户能够在1-2秒内打开H5页面,... 查看详情

怎么激活钉钉?

激活钉钉的方法:1、首先下载安装好钉钉,然后打开钉钉,再点击页面下方的注册账号。2、打开注册页面后,输入手机号码,然后点击同意协议并注册。3、收到验证码后,点击输入验证码。4、验证码输入完成后,设置密码,... 查看详情

阿里钉钉是免费的吗

阿里钉钉的最新优惠活动,即阿里钉钉0元购机计划。企业在购买阿里钉钉,并完成相关操作,阿里巴巴会把企业购买阿里钉钉的费用全部返还,相当于0元购买了阿里钉钉,企业没有花一分钱的费用下面介绍阿里钉钉如何0元购买... 查看详情

企业微信、钉钉、飞书各有啥功能特色?选哪个比较好呢

参考技术A首先,抛结论:纯办公沟通用钉钉;涉及内部创作和内部资料安全的用飞书;客户沟通偏多需要做很多营销活动做私域流量反复触达用企业微信本文将从协作效率、视频会议、在线文档、客户联系以及营销活动几方面... 查看详情