The input label is not displayed on ios
The input label can be displayed normally on the development tools and Android, but it is found that the input label is not displayed on ios.
Solution: add width to input;
The reason is probably that the input box of the Douyin applet has no width and needs to be set manually.
<!-- 在ios不显示 -->
<input type="text" placeholder="请输入..." />
<!-- 调整后 - 设置宽度，就可以显示 -->
<input type="text" placeholder="请输入..." style="width: 100px" />The input tag cannot give a default value in ios
After the page is initialized, the data is obtained from the local cache and bound to the input tag. In ios, it is sometimes found that the value has been obtained, but it is not rendered on the page.
Solution: Use $nextTick to delay rendering before fetching data.
/** 这样可能导致input值给不上 */
onLoad() {
this.value = uni.getStorageSync("value");
}
/** 调整后 */
onLoad() {
this.$nextTick(() => {
this.value = uni.getStorageSync("value");
});
}Upload pictures can't be uploaded
After uploading a picture and selecting the picture with uni.chooseImage, the obtained local temporary path is as follows:
ttfile://temp/ab790db96c9b65cb54685c7d99c4d847.jpeg
Directly use this path to upload through the uni.uploadFile interface, and the upload will fail.
Solution: use the uni.compressImage interface to compress the image, and then use the obtained path to upload:
ttfile://temp/tempCompressImg1642681468739 .jpg
Comparing the local paths acquired twice, the middle part of the file name is different, and the micro-x applet does not have this problem.
Using web-view to display pdf files does not display on Android
The page uses web-view to display the pdf file, which is fine in ios and development tools, but the page is successfully opened on the Android phone and always shows blank. The solution is to download the file with uni.downloadFile first, and then open the document through uni.openDocument , but it still only displays a pdf file name when opened on the real Android device, you need to click to open it with other third-party applications such as wps
The event name in the $emit of the subcomponent transfer event cannot add "-"
When a child component passes an event like a parent component, the event name is added with a dash "-" and the event is invalid after compilation.
Something like this:
this.$emit('on-pick', info), it is useful to change to this.$emit('on-pick', info)
Compilation of multiple slots in subcomponents is invalid
There are multiple slots in the self-encapsulated components that cannot be compiled, and many components of uview also have problems
Checked es6 to es5, the function used in lodash reports an error
Generally, we will check the conversion from es6 to es5. If the anti-shake throttling function debounce and throttle in the lodash library are used in the page, an error will be reported directly. If it is not converted, there is no problem.
Clicking the blank in the Android applet to make the input box keyboard close will trigger 2 click events on the page
There is a page that uses the input box and the stepper of uview. First click the input box to get the focus and the keyboard pops up. If you just click + or - on the stepper at this time, it will directly add or subtract 2. Solution: Set a
variable Disable the stepper disabled, set disabled=true in the focus event of the input box, and set disabled=false with a timer in the burl event, so that the user must first click the blank to close the keyboard before clicking step device
The uni.getEnv method byte applet does not support
In the applet, the web-view can directly use interfaces such as uni.navigateTo to jump back to the applet or communicate with the applet. It is only necessary to introduce the communication sdk file provided by the corresponding platform in the webpage, such as the uni.getEnv method for obtaining environmental information. It is not supported in section applets
uni-app packaging optimization
uni-app packaging generally automatically sets the interface domain name according to environment variables, but uni only compresses the code in the production mode. Sometimes our development and test environments also need to be previewed on the real machine. If the code is not compressed, sometimes it will prompt that the package exceeds the size limit (Generally, the main package is limited to 2M)
Solution: use the default NODE_ENV command line variable to enable packaging production mode, and add an additional VUE_APP_ENV variable to determine the interface address, such as the following command: "
build:mp-toutiao-dev" : "cross-env VUE_APP_ENV=development NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --minimize --watch"
1