Generally speaking, the official documents of the DingTalk applet are relatively complete, and some documents need to be read carefully. In addition to some content, you need to look at other materials, such as css styles, complex layout waterfalls, etc.
1. Layout problem
Complete the layout as shown. According to the layout method of iOS (personally developed for iOS), first add all subviews to the parent view, and then set the corresponding frame for the subviews through relative layout or absolute layout.
However, the applet completes the layout in the figure, so this will not work. The layout of the applet uses the flex layout . I personally recommend mobile developers to develop applets. You can read this article first, and the development will be more effective!
So how does the applet complete the layout of the above picture? First, divide the views inside into blocks. The division is based on the overall direction of the view layout ( or ) row . columnIn view, the purpose is the same. To put it simply, the image and label on the left side of the figure are divided into one block, and the three labels on the right side are divided into another block, so that the overall two large blocks in the page are horizontal layout (ie), the image in the rowblock And the label is a vertical layout (that is column), as shown in the figure (the specific code will not be listed):
2. The problem of switching tab parameters
By the way, page jump parameter carrying ( documentation ):
dd.navigateTo({
url: 'new_page?count=100'
})
First tab switching needs to be used dd.switchTab:
dd.switchTab({
url: '/home'
})
However, this method cannot carry parameters in this way. For specific reasons, please refer to the official documentation . The solution is to use global variables and app.jsadd the following parameters in:
// 全局变量
globalParams:{
prames1: false,
prames2: 0,
},
dd.switchTabModify the variable value before calling :
var app = getApp();
app.globalParams.prames1 = true;
app.globalParams.prames2 = 1;
dd.switchTab({
url: '/home'
})
Just get the response value in the corresponding tab page, personally get it in onShow:
var app = getApp();
let param1 = app.globalParams.prames1;
3. Gesture penetration problem
The main scenario is that both the parent view and the child view have click events, and gesture conflicts will be triggered when they are clicked. Here, the event types need to be distinguished:
-
Bubble event (onTap)
When an event on a component is fired, the event is passed to the parent node.
-
Non-bubbling event (catchTap)
When an event is fired on a component, the event is not passed to the parent node.
Does not exist bindTapand does not need to be set hover-stop-propagation. For details, please refer to the official document
4. Scheduled tasks
Here 3000 is milliseconds
setTimeout(function () {
this.doSomething();
}, 3000);
5. Realization of Waterfall Flow in Small Programs
Personal reference to this article
The only problem that arises in practice is the gap between the upper and lower items. Here, wrap a layer and set 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. Set the number of text display lines
The css is set as follows:
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
Attention 不能给视图设置height! Setting the height will cause the text to display a small half
7. Use custom fonts in applets
Refer to the article , pull directly to the bottom to view the conversion of the picture BASE64, the conversion tool mentioned inside, the supported file type can only be ttf, if the type is not correct, you can manually modify it and use it
8. Network request
DingTalk applet 网络请求只支持get和post, others can be used according to official documents
9. About web-view
The problem encountered in the first development is that the webpage can be loaded normally in the emulator and preview, but in the trial version, the webpage fails to load. For this problem, refer to the official document and set the whitelist in the console
Regarding the interaction between the DingTalk applet and H5, the official documents also have detailed descriptions and sample codes
10. About environment switching
Now there is a requirement: to automatically switch the url of the current environment according to whether the package type is a trial version or a release version.
In short, it is necessary to determine whether the current version is a trial version or a release version. After consulting technical support, I regret to tell you that the DingTalk applet cannot determine whether it is a trial version or a release version.