钉钉小程序开发笔记

总体来说钉钉小程序的官方文档都比较全,部分文档还需仔细阅读。除了部分内容需要看别的资料,如css样式、复杂布局瀑布流等

1、布局问题

完成如图所示布局。按照iOS的布局方式(个人为iOS开发),首先把所有的子视图add到父视图中,然后再通过相对布局or绝对布局的方式,给子视图设置对应的frame。

但是,小程序完成图中的布局,这样就行不通了,小程序的布局使用flex布局,个人建议移动开发人员来开发小程序的,都可以先看一下这篇文章,开发起来会事半功倍!

那么小程序如何完成上图的布局呢? 首先要给里面的视图划分一下块,划分的依据是视图布局的总体方向(row or column),看过点前端代码的都会看到会把控件包裹到一个个view中,目的也是这样。简单说一下就是把图中左侧的image和label划分为一个块,右侧的三个label划分为另一个块,这样页面中总体的两个大块是横向布局(即row),块内的image和label是纵向布局(即column),如图(具体的代码就不上了):

2、切换tab参数携带问题

顺带提一下页面跳转参数携带(文档):

dd.navigateTo({
  url: 'new_page?count=100'
})

首先tab切换需要使用dd.switchTab

dd.switchTab({
  url: '/home'
})

但是这个方法不能这样携带参数,具体原因可查看官方文档,解决的方法使用全局变量,在app.js中添加如下参数:

// 全局变量
globalParams:{
    prames1: false,
    prames2: 0,
},

在调用dd.switchTab之前修改变量值:

var app = getApp();
app.globalParams.prames1 = true;
app.globalParams.prames2 = 1;
dd.switchTab({
  url: '/home'
})

在对应的tab页面中获取响应的值即可,个人是在onShow中获取:

var app = getApp();
let param1 = app.globalParams.prames1;

3、手势穿透问题

主要场景就是父视图和子视图都存在点击事件,点击时手势冲突都会触发的问题,这里需要区分下事件类型:

  • 冒泡事件(onTap)

    当一个组件上的事件被触发后,该事件会向父节点传递。

  • 非冒泡事件(catchTap)

    当一个组件上的事件被触发后,该事件不会向父节点传递。

不存在bindTap,也不需要设置hover-stop-propagation,具体的可以查看官方文档

4、定时任务

此处3000为毫秒

setTimeout(function () {
    this.doSomething();
}, 3000);

5、小程序中瀑布流的实现

个人参考这篇文章

实践中唯一出现的问题,就是上下两个item之前间距的问题,这里包裹一层,设置margin-top即可:

<view class='left'>
  <block a:for="{{leftlist}}" a:key="index">
    <view class="left-item" onTap="onTapLeftItem" data-index={{index}}>
      <!-- 此处添加子视图 -->

    </view>
  </block>
</view>

6、设置文本显示行数

css中设置如下:

overflow: hidden;
-webkit-line-clamp: 2; 
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;

注意不能给视图设置height!设置height会造成文本显示小半截

7、小程序中使用自定义字体

参考文章,直接拉到底部查看将图片转换成BASE64,内部讲到的转换工具,支持的文件类型只能是ttf,类型不对自己手动修改下即可使用

8、网络请求

钉钉小程序网络请求只支持get和post,其它按官方文档使用即可

9、关于web-view

首次开发遇到的问题是在模拟器和预览时,可以正常加载网页,但是在体验版中,网页加载失败,此问题参照官方文档,在控制台设置白名单

关于钉钉小程序与H5的交互,官方文档也有详细说明和示例代码

10、关于环境切换

现在有一个需求:根据包的类型是体验版还是发布版,自动切换当前环境的url。

简言之就是要判断出当前是体验版还是发布版,在咨询过技术支持之后,遗憾的告诉你,钉钉小程序无法判断是体验版还是发布版

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

推荐阅读更多精彩内容