欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp開發(fā)微信小程序遇到的問題筆記

 更新時間：2023年01月09日 14:26:48   作者：heroboyluck  
這篇文章主要給大家介紹了關于uniapp開發(fā)微信小程序遇到的問題的相關資料,比較適合第一次使用uniapp?開發(fā)微信小程序的伙伴,或者沒有過實戰(zhàn)經(jīng)驗的小伙伴參考,需要的朋友可以參考下

前言

最近接手了一個小程序開發(fā)，從頭開始。使用了 uniapp 搭建，以前沒有做過小程序開發(fā)，著手看文檔、查文檔。一步一步完成了任務的開發(fā)。特此記錄開發(fā)過程中的問題。

開發(fā)建議：

  • 使用 HBuilderX 工具進行開發(fā)。通過工具創(chuàng)建項目
  • 遇到原來的 vue 寫法怎么不生效，別猶豫去看文檔，可能就是不支持。
  • 有時間熟讀文檔。
  • 跨端最大的問題就是兼容性。

1. 不能采用全局注冊的方式注冊組件

通常在 components 目錄會存放項目中共用的組件，然后暴露install,全局引用安裝

// components/index.js

// 各種組件
import Page from "./page.vue";

//
const Components = [Page];
export default {
  install: (app) => {
    // 注冊
    Components.forEach((component) => app.component(component.name, component));
  },
};

// 然后在 main.js 引用注冊
import Vue from "vue";
import Component from "@/components";

// 注冊 就可以全局使用了。
Vue.use(Component);

但是在 uniapp 中不生效，有兩種方式實現(xiàn)組件注冊：

1.1 導入到 main.js 中進行注冊

所有的組件直接導入到 mian.js 中，通過 Vue 對象注冊即可在其他頁面中引用。

要注意的是，注冊的組件名必須是字符串，不能是page.name

import Vue from "vue";
import Page from "@/components/page.vue";

Vue.component("page", page);

1.2 特有的 easycom 模式注冊組件

只要符合components/組件名稱/組件名稱.vue 文件存儲路徑，則不需要手動注冊，可直接引用組件。

而且這有助于打包時剔除掉沒有使用到的組件。

那現(xiàn)在我們的功能組件存放路徑改為components/page/page.vue ，即可全局使用。

也可以在pages.json 配置自定義設置，定義哪些匹配的組件。

{
  "easycom": {
    "autoscan": true,
    "custom": {
      // uni-ui 規(guī)則如下配置
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
  }
}

新加的組件注意清除緩存，重新運行生效。

2. 小程序真機調(diào)試包太大，無法上傳，分包處理

由于開始項目，所有的 UI 設計圖都放在了前端，導致編譯后整個包大小超過了 4M。開發(fā)時并沒有提示這個問題，準備真機測試時，提示無法上傳。就去找解決方案。

在采用方案之前耗費了好多時間去手動刪除一些不用的文件、刪除不用的代碼。再一看無濟于事，看來代碼并占不了多少。

2.1 將所有靜態(tài)資源都存放到遠程服務器上

2.2 采用分包的方式，將主包的體積降下來

分包的方式，剛開始的時候所有的文件都是放在pages下的，pages.jon中 也都配置在 pages中。

需要將初始加載無關的模塊拆出來，同 pages 同級目錄下。

|———————————————————————————————————— 項目
|—————————————— integral
|——————— rank
|——————— log
|——————— mall
|—————————————— pages
|——————— index
|——————— login
|——————— user
|—————————————— pages.json

在pages.jong 通過屬性subPackages 配置分包編譯。

root 為分包的主目錄，pages 目錄下的頁面，path為相對路徑。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首頁"
      }
    },
    {
      "path": "pages/login/login",
      "style": {
        "navigationBarTitleText": "登錄"
      }
    }
    // ...
  ],
  "subPackages": [
    {
      "root": "integral",
      "pages": [
        {
          "path": "rank/rank",
          "style": {
            "navigationBarTitleText": "排行榜"
          }
        }
        // ...
      ]
    }
  ]
}

然后重新運行，再次真機調(diào)試，沒有此前的包過大的提示。順利打開小程序。

分包之后，檢查此前已寫好的模塊之間的跳轉(zhuǎn)。頁面路徑已經(jīng)變化，

可以通過預加載的方式幫助我們在進入某個頁面時，由框架自動預下載可能需要的分包，提高后續(xù)頁面進入的啟動速度。

以下配置，幫助我們在進入首頁后，加載全部的分包。也可以指定加載分包的某個頁面，具體查看官網(wǎng)preloadrule

{
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["__APP__"]
    }
  }
}

3. 內(nèi)置組件不能綁定 class 的問題

在使用擴展的 UI 組件，比如 uni-ui、uView 等給這些組件綁定 class 時，渲染并不能渲染成功。

只能在給他們包一層view 自定義 calss 。避免全局的樣式污染。

4. 定位 API 調(diào)用，需要增加授權配置manifest.json

增加配置,允許小程序調(diào)用位置的權限接口。然后通過requiredPrivateInfos定義你需要哪些方法。

{
  /* 小程序特有相關 */
  "mp-weixin": {
    // ...
    "permission": {
      "scope.userLocation": {
        "desc": "請求獲取地理信息"
      }
    },
    "requiredPrivateInfos": [
      "getLocation",
      "chooseAddress",
      "choosePoi",
      "chooseLocation"
    ]
  }
}

如果我們?nèi)绻朐谛〕绦蛑泄δ苁褂枚ㄎ还δ?，則需要申請高德、騰訊或其他地圖的 SDK ，通過拿到的經(jīng)緯度查詢詳細地址信息。

uni.getLocation(options)獲取當前地理位置。

不能獲取到地址中文描述，只能拿到經(jīng)緯度等其他參數(shù)，可以在通過第三方地圖服務，獲取詳細的位置信息。

address 地址信息僅 APP 端支持。

uni.chooseLocation(options) 提供給用戶選擇位置信息

可以拿到經(jīng)緯度、位置名稱以及詳細的 address 中文描述。

5. 主包不能引用分包的組件

通過分包后，降低了主包的大小。但也出現(xiàn)了一個問題就是主包不能復用分包的組件，很容易理解就是訪問主包的頁面時，分包還不一定加載。

6. 小程序不支持 $attrs \ $listeners

通過對組件進行二次封裝、三次封裝。底層組件定義的屬性、事件如果每層都定義接收，就很麻煩，

在 vue 中，通過屬性inheritAttrs: false 不然根元素承載這些屬性、時間，然后通過$attrs \ $listeners 綁定到目標元素上。

<template>
  <view class="dictionary-picker">
    <data-picker v-bind="$attrs" v-on="$listeners"></data-picker>
  </view>
</template>

<script>
export default {
  inheritAttrs: false,
};
</script>

在 uniapp 中，則是不可以的。他沒有 $attrs \ $listeners 這兩個屬性。

7. 不支持自定義雙向綁定model

在 vue 中定義一個組件的輸入、輸出通過綁定值、然后監(jiān)聽拋出事件處理邏輯，

<script>
export default {
  name:'data-picker',
  model:{
    prop:'value',
    event:'change',
  },
  methods:{
    handleChange(val){

      this.$emit('change',val)
    }
  }
}

這樣在調(diào)用組件時可通過v-model綁定。<data-picker v-model='value' />

在 uniapp 中，則是不可以的。 小程序不支持

8. 不能綁定給 style、class 對象

小程序端不支持綁定對象給 class、style

<template>
  <view class="dictionary-picker">
    <view :class="boxStyle"></view>
  </view>
</template>

<script>
export default {
  computed: {
    boxStyle() {
      return {
        active: this.activeTab ? true : false,
      };
    },
  },
};
</script>

這樣是不行的，渲染后的元素節(jié)點顯示 object 。 不通過計算屬性，直接在屬性上綁定邏輯。

<template>
  <view class="dictionary-picker">
    <view :class="[activeTab ? 'active' : '']"></view>
  </view>
</template>

9. 適配 iphone 底部劉海

在需要適配的頁面，元素增加樣式。特有的變量safe-area-inset-bottom \ safe-area-inset-bottom

建議這種通用性設置，提供一個基礎公共組件page. 通過定義插槽 nav \ header \ main \ footer 插入內(nèi)容。這是一些公共的樣式就不用每個頁面去設置。

.footer {
  padding-bottom: 0;
  // IOS <11.2
  padding-bottom: constant(safe-area-inset-bottom);
  // iso >11.2
  padding-bottom: env(safe-area-inset-bottom);
  // 安全距離設置后，一定要設置背景，不然滾動的內(nèi)容在下方可以看到
  background-color: #fff;
}

10. 一些全局的配置色彩，字號 注意單位、格式。

在配置pages.json的一些設置，顏色都是必須是十六進制顏色，不能是 rgb 或 rgba

  • globalStyle.navigationBarBackgroundColor 導航欄背景顏色
  • globalStyle.backgroundColor 下拉顯示出來的窗口的背景色
  • tabBar.color tab 上的文字默認顏色
  • tabBar.backgroundColor tab 的背景色
  • tabBar.fontSize 文字默認大小
  • tabBar.iconWidth 圖標默認寬度（高度等比例縮放）
  • …

11. 自定義手機頂部的導航欄。

通常手機頂部信號、電量等一些狀態(tài)占據(jù)手機的部分位子。想讓這部分區(qū)域也融入到我們的程序中。

配置pages.jons

{
  "globalStyle": {
    "navigationStyle": "custom"
  }
}

設置自定義導航樣式，這樣你的頁面會以手機屏幕的最頂端開始。頂部標題、返回都需要自己去定義了。

12. 在視圖中不能直接使用綁定在Vue.prototype上的全局變量

直接在視圖使用Vue.prototype上的變量是訪問不到的。向下面這樣：

<template>
  <view>
    <img :src="$baseUrl + data.imgUrl" />
  </view>
</template>

可以通過計算屬性，或者提供一個變量值.

<template>
  <view>
    <img :src="avatarUrl" />
  </view>
</template>
<script>

export default {
	data() {
    return {
      //
      data:{}
    }
  },
  computed: {
		avatarUrl() {
			return this.$baseUrl + '/upload' + this.data.imgUrl;
		}
	},

13. 二次封裝 uni-ui 組件，更改的組件樣式未生效。

微信小程序里的組件之間的樣式隔離，只需要增加選項配置，

<script>
export default {
	name: 'confirmDialog',
	options: {
		styleIsolation: 'shared' // 解除樣式隔離
	},
}

微信官方文檔說明 - 樣式隔離

14. 使用微信小程序插件 plugin

主要是小程序插件 plugin 的開發(fā)文檔，在manifest.json 中配置

{
  "mp-weixin": {
    "appid": "",
    "usingComponents": true,
    "plugins": {
      "myPlugin": {
        "version": "版本號",
        "provider": "wx8**********75"
      }
    }
  }
}

14.1 在這邊引入的插件可全局引用

在需要引入的頁面中配置，pages.json

{
  "pages": [
    {
      "path": "pages/login/login",
      "style": {
        "navigationBarTitleText": "登錄",
        "enablePullDownRefresh": false,
        // 定義微信插件
        "mp-weixin": {
          "usingComponents": {
            "login": "plugin://myPlugin/login"
          }
        }
      }
    }
  ]
}

然后在頁面 login.vue 中使用組件

<template>
	<view class="login-box">
		<login
			:config="loginConfig"
		></login>
</template>

14.2 分包引入插件，只能在分包中使用

在pages.json配置，同一個插件不能被多個分包引入，直接放入主包中配置。

{
  "subPackages": [
    {
      "root": "integral",
      "pages": [
        {
          "path": "integralMall/list"
        }
      ],
      "plugins": {
        "pluginName": {
          "version": "版本號",
          "provider": "wx8**********75"
        }
      }
    }
  ]
}

15. 攔截器uni.addInterceptor(API,Options)

對于 uni 可調(diào)用的全局 API，可通過攔截器來批量處理邏輯，常用就是攔截請求，控制權限。

在App.vue 中調(diào)用攔截，定義攔截器在未注冊時控制某些頁面不可訪問。

import { Not_register_access_page } from "@/utils/config.js";

export default {
  onLaunch: function () {
    // 跳轉(zhuǎn)攔截
    uni.addInterceptor("navigateTo", {
      invoke(config) {
        if (
          !$this.isRegister &&
          !Not_register_access_page.includes(config.url)
        ) {
          // 不允許訪問，則將前置訪問的page地址置空
          config.url = "";
        }
      },
    });
  },
};

攔截器options參數(shù)

  • invoke 攔截前觸發(fā)
  • success 成功回調(diào)觸發(fā)
  • fail 失敗回調(diào)觸發(fā)
  • complete 完成回調(diào)后觸發(fā)

uni.removeInterceptor(API)刪除攔截器

總結

到此這篇關于uniapp開發(fā)微信小程序遇到的問題的文章就介紹到這了,更多相關uniapp開發(fā)微信小程序問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論