Uni-app Pinning applet compatibility Summary

This summary is based on the wechat applets developed using UNI-App at the beginning, and the subsequent development of Dingdingapplets.

First of all, we need to customize the conditional compilation platform for the pegapplet, and add the uni-app extension node to the package.json file as follows:

{..."uni-app": {
    "scripts": {
      "mp-dingtalk": { 
        "title":"Tacks applet"."env": { 
          "UNI_PLATFORM": "mp-alipay" 
        },
        "define": { 
          "MP-DINGTALK": true}}}}... }Copy the code

After adding the extension node, you can find the pin applet under the Hbuilder X Action bar Run and Publish.

showModal

The confirmText and cancelText must be set. Otherwise, the button text is in English and the title must be set.

uni.showModal

uni.showModal({
  title: 'tip'.content: 'Failed to get Settings, will restart applet'.showCancel: false.// #ifndef MP-DINGTALK
  confirmColor: theme.showModalConfirmColor,
  // #endif
  confirmText: 'sure'.cancelText: 'cancel'.success: function (res) {}})Copy the code

Component style

Do not use class to style components. Style components in a layer outside the component.

<view class="custom-components-box">
  <custom-components></custom-components>
</view>
Copy the code

The drop-down refresh

To prevent pages from being pulled down to refresh for no reason, set “enablePullDownRefresh” to globalStyle in pages. Json: False, set enablePullDownRefresh: true separately for pages that need to be refreshed.

Page background color

The background color of wechat applet page is white by default, and that of Dingdingapplet is gray by default.

Image upload

The thumbnail applet must pass the fileType parameter to upload images.

uni.uploadFile(OBJECT)

this.$upload({
  url: ' '.filePath: ' '.name: ' '.// #ifdef MP-DINGTALK
  fileType: "image".// #endif
  formData: {... }})Copy the code

chooseImage

uni.chooseImage(OBJECT)

ChooseImage returns inconsistent data and requires compatibility processing

uni.chooseImage({
  count:1.sourceType: res.tapIndex === 0 ? ['camera'] : ['album'].success: (res2) = > {
    console.log(res)
    // #ifndef MP-DINGTALK
    const file = res.tempFiles[0]
    // #endif
    // #ifdef MP-DINGTALK
    const file = res.filePaths[0]
    // #endif}})Copy the code

The file to view

About the file view, in the nail need to use nail disk view.

Save files to tack: dd. SaveFileToDingTalk

Pin disk file preview: dd.previewFileindingTalk

// Use nail disk to handle files
dd.saveFileToDingTalk({
  url: fileUrl,  // The file is at the third-party server address
  name: fileName,
  success: (res) = > {
    console.log(res)
    if (res.data.length) {
      dd.confirm({
        title: 'tip'.content: 'The file has been saved to the tapped. do you want to see it now? '.confirmButtonText: 'sure'.cancelButtonText: 'cancel'.success: (result) = > {
          if (result.confirm) {
            dd.previewFileInDingTalk({
              spaceId: res.data[0].spaceId,
              fileId: res.data[0].fileId,
              fileName: fileName,
              fileType: fileType, }) } }, }); }},fail: (err) = >{
    console.log(err)
    dd.alert({
      content:JSON.stringify(err)
    })
  }
})
Copy the code

Time selector

Try not to use the picker as a time selector, use the DD.datepicker implementation.

Make a phone call

// #ifndef MP-DINGTALK
uni.makePhoneCall({
  phoneNumber: self.serviceMobile
})
// #endif
// #ifdef MP-DINGTALK
dd.showCallMenu({
  phoneNumber: self.serviceMobile, // The number you want to call
  code: '+ 86'.// China is +86
  showDingCall: false.// Whether to display the pin phone
});
// #endif
Copy the code

showToast

uni.showToast(OBJECT) dd.showToast

ShowToast sometimes does not display in the emulator and requires real machine testing.

picker

The picker selector is best wrapped with a view.

Picker radio

Picker radio uses value to specify the number of digits in the range selected (subscripts start at 0).

Cover – the view does not support

Plugins don’t support cover-view, so you need to use View instead.

<! -- #ifndef MP-DINGTALK -->
<cover-view class="page-footer">
  <button type="default">submit</button>
</cover-view>
<! -- #endif -->
<! -- #ifdef MP-DINGTALK -->
<view class="page-footer page-footer-ding">
  <button type="default">submit</button>
</view>
<! -- #endif -->
Copy the code

.page-footer {
  width: 100%;
  position: fixed;
  bottom: 0rpx;
  z-index: 10;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  &.page-footer-ding{... }}Copy the code