Some problems encountered in uniApp hybrid APP :pencil2

: iPhone: Adapter Problem:

  • Uniapp provides built-in CSS variables:

  • –status-bar-height specifies the height of the status bar. This variable is often used to customize the navigation bar.

  • –window-top: distance from the top of the content area,–window-bottom: distance from the bottom of the content area. The content area is the area stripped of the system status bar, the native navigation bar, and the bottom security zone.

  • Constant (safe-area-inset-bottom),env(safe-area-inset-bottom)

  •   .safeArea {  
    padding-bottom: 0;  
    padding-bottom: constant(safe-area-inset-bottom);  
    padding-bottom: env(safe-area-inset-bottom);  
  }  
Copy the code

: Camera: APP batch upload pictures problem:

  • :triangular_flag_on_post: Fact sheet: Uni. uploadFileAPI when uploading images in batches, pass an array of file objects through the files field, uri is mandatory, upload images in batches in built-in browser on HBuilderX, no problem, ok. * : SOB :: uploading uploading as the last uploading image is received by the uploading server.

  • Later, through debugging, I found that only path and size fields were returned when uploading pictures in APP, while uploading pictures in built-in browser contained the following fields:

  •   lastModified:1575899269994
  lastModifiedDate:Mon Dec 09 2019 21:47:49 GMT+0800(Chinese Standard Time) {}name:"aren.png"
  size:2268
  type:"image/png"
  webkitRelativePath:""
  path:"blob:http://localhost:8080/7f935d88-0f45-4331-90c2-5fffcb60439b"
Copy the code

  • It is found that the local path obtained after uploading in H5 and APP is quite different, and there is no name field after uploading in APP, which is the most important point. As a result, the name of images uploaded in batch on APP is the same as file by default, and the background is regarded as one picture. Now that you know the reason, it’s easy to solve.

  •   let fileArr = [];
  let files = res.tempFiles;
  files.forEach((item,index) = > {
        let itemImg = { uri: item.path, name: 'image'+index };
        fileArr.push(itemImg);
       });
Copy the code

    :key: permission display tabbar problem:

  • Requirement: Display tabbars according to different permissions

  • There are two ideas:

    1. Customize tabbar, do not configure tabbar-related data in pages. Json, write tabbar items as components, and display corresponding tabbars according to permissions in a unified home page.

    2. Json configuration tabBar related data, rewrite the native tabBar, then use the UNI. hideTabBar API to hide the native tabBar, and call uni.switchTab when switching items within a custom tabBar.

    However, both of these two schemes have certain flaws. The biggest problem of the first one is that there is no caching mechanism and every switch is re-rendering. The second one is prone to inconsistency between selected item and corresponding page (which can be solved by Vuex). There are a lot of problems with customizing tabbars, and uni has no API to deal with such situations :no_mouth:

    A few days later, it was updated again. The second idea was used in the project. However, when ios switched tabbar, there would be a probability that tabbar would be raised at the bottom of the white bar. [Bug] Uni-app V3 compiler, uni.hidetabbar () does not hide the tabbar at the bottom correctly

    Page. json has some configuration problems

    • Page. Json under the style property of the corresponding page:
    "style" : {
              "navigationBarTitleText": "Navigation title"."app-plus": {
                  // The bottom border of the navigation bar is configured
                  "titleNView": {
                      "splitLine": {
                          "color": "#f2f2f2"// Border color}}"bounce": "none".// Rubber bounces back
                   "scrollIndicator": "none".// Do not display scroll bars
                       
                       // If the navigation bar is customized, use the default drop-down refresh, the navigation bar will be pulled down in the drop-down process, because the default refresh style is used, then use the circle refresh style to avoid problems, you need to configure the corresponding page:
                   "pullToRefresh": {
                       "support": true.// Enable pull-down refresh
                       "color": "#2F89FC".// Circle color
                       "style": "circle"."offset": "50px"// Distance from the top}}}Copy the code

Version update

onLaunch: function() { plus.screen.lockOrientation('portrait-primary'); // lock screen orientation let _this = this; Plus.runtime.getproperty (plus.runtime.appId, function(app) {let version = app.version; // console.log(version) _this.$api.common.updateVersion({ version: version }).then(res => { if (res.code == 1 && res.data.status == 1) { let updateType = res.data.up_type; Let url = res.data.url_wgt; if (updateType == 1) {let url = res.data.url_wgt; installHotUpdate(url); } else { let andriod = res.data.url_android; let ios = res.data.url_ios; installApp(andriod, ios); }}}); Function installHotUpdate(url) {uni. DownloadFile ({url: url, success: downloadResult => { if (downloadResult.statusCode === 200) { plus.runtime.install( downloadResult.tempFilePath, {force: true}, function() {plus.runtime.restart(); }, function(e) {uni. ShowToast ({icon: 'none', title: 'hot update failed'}); }); }}}); } function installApp(url_android, url_ios) {uni.showModal({title: 'new version detected ', content: ShowCancel: false, success: res => {if (res.confirm) {let osType = plus.os.name; If (osType == 'Android') {// android.runtime.openurl (url_android); } else {// apple download plus.runtime.openURL(url_ios); }}}}); }}); }Copy the code

Module Permission Configuration

  • Android needs to check theandroid.permission.INSTALL_PACKAGESandandroid.permission.REQUEST_INSTALL_PACKAGESPermission, to avoid some models installation problems.
  • Ios needs to fill in the description if it involves the read and write permission of album: for example (‘ If we need to upload or save pictures, we will use this permission ‘)

Other problems

  • To remove the default bottom security zone in ios, you need to configure it under the app-plus property in manifest.json:

     "safearea" : {
            "bottom" : {
                "offset" : "none"}}Copy the code