总体来说钉钉小程序的官方文档都比较全,部分文档还需仔细阅读。除了部分内容需要看别的资料,如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即可:
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。
简言之就是要判断出当前是体验版还是发布版,在咨询过技术支持之后,遗憾的告诉你,钉钉小程序无法判断是体验版还是发布版