The main problem

Bug: When a component method is called through ref, the previous data is used.

Reason: Wechat applets can call component methods immediately after modifying the component properties pass value; Uniapp needs to call component methods in this.$nextTick after changing the value passed to component prop. This.$nextTick does not solve the problem, so it adds a setTimeout.

Error: [TMA][WARN][RUNTIME] Page Route Error +0ms switchTab before Pages are registered.

Solution: Use the latest base library.

Bug: Passing value to input via value property does not take effect.

When certain properties are repeatedly set to the same value, they are not synchronized to the View layer. For example, if the scrolltop property of the scrollview component is set to 0 each time, the scroll to the top can be returned successfully only for the first time. This is due to the one-way data flow feature of props. If the actual scroll top value inside a component is changed, the bound properties do not change with it. Solution: Component property setting does not take effect solution

Difference: getSetting returns

The scope. UserInfo in the authSetting obtained by getSetting is true even if the baidu small program is not authorized. The key corresponding to the authorization status of user information in the authSetting obtained by alipay mini program is not scope.userInfo, but userInfo.

  • WeChat, qq

Bug :(wechat, qq) abnormal display of swiper.

Cause: Inline styles (:style) cannot be bound to swiper-item components.

Problem :(wechat, qq) custom tabbar picture flashing.

Solution: Use Base64 instead of images.

Error: the (QQ) file common/vendor.js exceeds 500K, no ES5 conversion or compression, please convert compression by yourself.

Cause 1: It is not compressed. Solution: Add “–minimize” to the end of package.json dev:mp-qq configuration. Cause 2: The sourceMappingURL in the vender.js file of the QQ small program generated by UNIApp is too large. UNI_PLATFORM === ‘mp-qq’ productionSourceMap = false

Bug (QQ 【 android 】) Canvas @touchMove event is not triggered.

Cause: Unknown. Maybe the problem is the cause. In addition, bytedance applets do not support Canvas.

  • headlines

Bug: (Headline) After fetching an instance of a component from $ref and assigning it to a variable, the prop of the instance held by the variable does not change as the component passes the value.

Solution: not by assigned this. $refs. XxxComponent component method called variable, but every time with this. $refs. XxxComponent. XxxMethod () method of the component.

Question :(toutiao) only douyin can tune up the advertisement, toutiao cannot tune up the advertisement, but toutiao’s createRewardedVideoAd is not empty, the existence of this API cannot be used to judge whether the advertisement can be used.

Tt.getsysteminfosync ().appName.toupperCase () === ‘DOUYIN’

Bug :(headline) style mess.

(1) Found in bytedance’s style:

:host{
	display:block;
	white-space: normal;
}
Copy the code

The code. Since the scope of influence is not large, the value of white-space is set separately in two places. (2) The header style is problematic when using height: 100% for consecutive nested elements.

Bug: button’s getUserInfo event is invalid.

Only wechat, QQ, Baidu button has the getUserInfo event. Toutiao calls getUserInfo to pop up the authorization popup window. If you click cancel, the authorization will be rejected and it will never pop up again (wechat will never pop up the window). In this case, only openSetting can guide the user to open permissions, and then call getUserInfo to obtain user information. Although Baidu button has the getUserInfo event, baidu’s getUserInfo interface cannot be called. The data obtained by the Button’s getUserInfo event can be stored to simulate a getUserInfo interface. Alipay access to user information has been upgraded to “access to basic member information”, click to view the document. OnGetAuthorize in button attribute is written as @getauthorize in UNIApp, which can be compiled successfully.

  • baidu

Bug :(baidu real machine) failed to run upload function.

Json.parse () was passed object data instead of string data, causing an error. Since the returned data is of type object, the code works fine without json.parse (). After a while, the error starts again, and the returned data is a string again. Parse json.parse () to determine if the returned data is a string. Since json.parse () has a number of errors passing arguments of type other than string, it is best to judge the type when using it, given platform differences.

Bug: (Baidu) picture preview failed, black screen.

Cause: Baidu applet does not support the local path obtained by getImageInfo as the image list parameter of previewImage. Solution: Use network diagram when using previewImage.

Bug: (Baidu, Alipay) picture saving error.

Cause: The data returned by Baidu getImageInfo does not contain the errMsg field. ErrMsg === ‘getImageInfo: OK ‘is used to determine the successful saving of the image. Solution: Baidu, Alipay small program with other fields (PATH) to judge the picture save state.

Bug :(baidu) array length update exception on the page.

When xxxlist. length is used as interpolation, the length of xxxList is reduced, and the page is updated normally. Add length to xxxList without updating the page. Solution: Define an additional variable instead of xxxlist.length as interpolation.

Special :(baidu, alipay) the scrolltolower event will not be triggered when the length of the scroll area in the scroll view element is not greater than the length of the scroll view itself in this direction. When the height of a vertical Scroll view is not set and is completely determined by the spread of the elements it contains, scrolltolower will not fire properly.

  • Alipay

Problem :(alipay) failed to hide components through v-show.

If you select the element, you can see that V-show has been compiled into Hidden =true supported by Alipay. Other small programs have failed to use V-show, so it is not recommended to use V-show in UniApp. Solution: change to V-if.

Problem :(pay treasure) style disorder.

Solution: When using UniApp, the same style class name in different components will interfere with each other in Alipay. You need to add style tag scoped and modify the class name. Alipay applet also needs some style resets:

/* #ifdef MP-ALIPAY */
button{
  border: none;
}
input{
  background: transparent;
}
/* #endif */
Copy the code

Special :(alipay) the @ symbol is not allowed in the file name or folder name.

Problem :(alipay) the “clear data cache” in the development tool “clear cache” appears to clear the cache, but actually does not clear the cache; In the debugger, the circular Clear All button in the upper left corner of the Storage panel can actually Clear the cache.

Bug :(alipay) canvas drawing fails.

Solution: Add the ID. Canvas component is identified by id, not Canvas-ID.

Bug :(alipay) uploading pictures stuck in uploads.

Reason: Uni. uploadFile has a required fileType field on and only on alipay applet.

Bug :(alipay) an interface requests an exception on the development tool.

Reason: Compared with other small programs, it was found that there were Chinese characters in the request parameters of Alipay small program, while other small programs would automatically encode Chinese characters. After manual coding with encodeURIComponent.

Problem :(alipay) on the mobile phone, the width of a list set by js calculation is abnormally large.

Reason: The screenWidth and screenHeight values obtained by uni.getSystemInfosync () on other platforms are CSS pixels, but the values obtained by alipay applet on mobile phone are physical pixels. Solution: On Alipay platform, when screenWidth>500, the screenWidth/pixelRatio value is used.

Bug :(alipay) select pictures to get data wrong.

Reason: The data obtained by Alipay with chooseImage() does not have tempFiles field, only tempFilePaths field.

Error :(alipay) some pictures failed to be saved. “failed to download file” was reported at getImageInfo.

Solution: save the original logic: uni. GetImageInfo – > uni. SaveImageToPhotosAlbum. Pay treasure to differentiate between: uni. SaveImageToPhotosAlbum. The saveImageToPhotosAlbum interface does not support network image paths, so the original save logic requires getImageInfo to obtain a local path before saving. The uni. SaveImageToPhotosAlbum compiled into pay treasure after small program code is my saveImage, this interface is not required for image path, so when the platform is alipay could save uni. GetImageInfo this step.

Bug :(quark, uc) we-cropper clipping doesn’t work.

Reasons: (1) pay treasure to the canvas picture interface not uni. The canvasToTempFilePath (), but CanvasContext. ToTempFilePath (), and take the apFilePath’s value. Platform differences description. (2) The temporary path obtained by other small programs on a page will not become invalid after closing the page. The temporary path (apFilePath) obtained by quark and UC through toTempFilePath will become invalid after the fetch page is closed. Solution: (1) Put the business using a temporary path in the current or later page of the path. (2) Put the logic of obtaining the temporary path in the component and introduce it into the corresponding page.

Bug :(quark [ios]) chooseImage() jumps page immediately after success without reaction.

Solution: Delayed jump.

Refer to the article

  • Uni-app ADAPTS wechat applets to customize tabBar
  • Uni-app · Alipay mini program stumbles
  • Notes for uni-app development of Alipay/Baidu mini program

Other problems

Problem: No response when importing items (MAC, Baidu mini program, Alipay mini program).

Cause: The developer tool did not have permission for unknown reasons. Solution: (1) Open the application as the root user. (But too much trouble.) (2) Because every time you use NPM to run the project, you need sudo to execute it. It is suspected that Node is installed in a place with too high permission.

Error: ios failed to request the interface after using Charles proxy.

Reason: After downloading the certificate and enabling the certificate in the description file, you also need to enable full trust Charles certificate in Settings → General → About This machine → Certificate Trust Settings.

Summary of global replacement of wechat code to UNIAPP code:

  • wx: —> v-
  • V – key – > : the key
  • {{– > (empty)
  • }} — > (empty)
  • bind:? The tap – > @ the click
  • catch:? The tap – > @ click. Stop
  • bind:? – > @
  • Wx. – > uni.
  • This. Data. – > this
  • < block – > < the template
  • Elif – > the else – the if
  • TriggerEvent – > $emit

Update address continuously