踩坑--- 基于钉钉的Weex微运用开辟起手式（实在写完发明变成Weex相干材料汇总了）

2023年12月31日 166次阅读 来源: 落入星空辽阔

好吧，我晓得你来看这个文章，肯定是碰到坑了,所以，把这几个放在最最先吧

如今，假如你的团队的手艺栈是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能越来越好。

    原文作者：落入星空辽阔
    原文地址: https://segmentfault.com/a/1190000015942150
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞