钉钉小程序开发笔记

总体来说钉钉小程序的官方文档都比较全,部分文档还需仔细阅读。除了部分内容需要看别的资料,如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。

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

猜你喜欢

转载自blog.csdn.net/king6188/article/details/131263645