Apakah yang perlu anda perhatikan semasa menyesuaikan uniapp kepada applet WeChat? Artikel berikut akan berkongsi dengan anda beberapa langkah berjaga-jaga apabila menyesuaikan uniapp kepada applet WeChat saya harap ia akan membantu anda!

Ini juga kali pertama saya bermain uniapp. Laman web rasmi mengatakan bahawa ia boleh dikodkan sekali dan diterbitkan pada berbilang terminal. Sejujurnya, saya pada mulanya ragu-ragu. Namun, kini, aplikasi tersebut telah dibangunkan dan halaman h5 hampir siap. Sekarang kita perlu menjana program kecil, yang membuatkan saya sangat teruja hanya memikirkannya. .

Jalankan applet pada hbuilderx Saya sangat teruja apabila saya melihat antara muka log masuk yang biasa saya log masuk dan lihat. Akibatnya, semua butang pada halaman utama telah hilang, dan bar tab di bahagian bawah juga hilang. . Ini hanya langkah pertama, dan ia telah merosakkan keyakinan saya dengan teruk. Saya rasa seperti saya ditangkap makan ketam buat kali pertama! Nasib baik, uniapp agak boleh dipercayai Akhirnya, saya melalui maklumat komuniti dan akhirnya menyelesaikan masalah ini. Saya menghadapi masalah lain kemudian, jadi saya meringkaskannya dan berkongsi pengalaman saya. Bangun sekali dan keluarkan pada berbilang terminal, ia benar-benar menepati reputasinya!

1. V-jika elakkan perangkap

Lihat dokumentasi uniapp rasmi, v-if menyokong sokongan berbilang hujung. Program mini hanya menyokong program mini WeChat Selepas menjalankan program mini dengan hbuilderx, ia akan menjadi sintaks perintah WeChat wx:if. Terdapat lubang di sini, jadi berhati-hati!

v-jika ungkapan arahan

Jika ungkapan arahan ialah objek json, Selagi nilai atribut objek anda mengandungi null, maka anda harus memberi perhatian Jika anda mengikuti pendekatan konvensional di sini, ia adalah seperti berikut:

<view v-if="a.b"></view>

//a對象
{
"b": "ss",
"c": null
}

Kod anda masuk ke dalam. applet Akan ada masalah. Komponen paparan ini akan disusun tetapi tidak boleh dipaparkan secara normal pada apl dan h5. Sebabnya masih belum ditemui. Terdapat pepatah bahawa ia berkaitan dengan pepijat dalam js pada zaman dahulu (typeof(null) == "objek"). Kernel terbaru program mini WeChat adalah berdasarkan kernel MWEB mereka yang dibangunkan sendiri, yang juga harus berdasarkan pengubahsuaian kromium Saya tidak tahu mengapa reaksi di sini sangat berbeza? ! Terkejut. . Cara yang betul untuk menulis

adalah seperti berikut:

<view v-if="a.b!==null"></view>

//a對象
{
"b": "ss",
"c": null
}

2. Zindex of view

Ini juga satu perangkap yang sebabnya tidak ditemui kod asal saya adalah seperti ini, dan aplikasi dan h5 adalah normal, tetapi apabila saya menjalankan program mini, ia tidak. t berfungsi. Tiada respons apabila saya mengkliknya:

<view><view><view @click="todo"></view></view></view>

Lihat Berapa banyak lapisan yang diambil? Hanya jadikan nilai zindex bagi paparan paling dalam sedikit lebih besar dan itu sahaja! Saya tidak begitu faham apa yang berlaku dengan program mini WeChat. Jika anda juga menemuinya, berikan sahaja zindex

3 Nilai atribut objek terikat tidak menyokong fungsi

Dalam applet WeChat, nilai atribut objek tidak boleh menjadi objek fungsi, yang tidak menyeronokkan. Apabila melakukan pembangunan bahagian hadapan, objek kompleks sering dilalui, dan ia juga sangat biasa untuk nilai harta menjadi fungsi. Senario saya adalah untuk menghantar lajur ke komponen jadual Beberapa lajur mempunyai keperluan pemaparan dinamik, seperti mengembalikan gambar dan butang berdasarkan nilainya. Sekarang saya tidak boleh lulus fungsi menukar mereka?

Penyelesaian yang saya sediakan di sini ialah meletakkan fungsi penukaran ini dalam objek campuran global Jika dicampur secara global, ini bermakna semua komponen akan mempunyai fungsi ini apabila menghantar objek lajur ke komponen jadual. objek "fungsi" yang sepadan hanya perlu diberi nama fungsi. Okay, inilah persoalannya Apabila komponen jadual saya menghuraikan objek lajur, bagaimana saya boleh mencari fungsi yang sepadan melalui nama fungsi dan kemudian memanggilnya? Pada asalnya ia adalah mudah untuk dilaksanakan menggunakan eval(), tetapi applet WeChat malah melumpuhkan fungsi ini! ! Okey, kita sudah sampai sejauh ini. Sebenarnya, ada alternatif, lihat sahaja langkahnya!

1. Campuran global

Buat objek campuran global, sudah tentu jika anda mempunyai Data lain berguna dan juga boleh dicampur ke dalam sifat yang dikira Strukturnya serupa dengan komponen vue.

module.exports = {
 computed: {
  
 },
 methods: {
  tmtemp(row) {
   if (row.tm && row.tm != null) {
    return `<span style="text-align:center;">${row.tm}</span>`
   } else {
    return &#39;-&#39;
   }
  }
 }
}

2 Lulus nama kaedah

Lihat contoh ini, templat di sini Menurut penyelesaian yang dinyatakan sebelum ini, hanya nama fungsi tmtemp boleh diberikan.

columns: [{
      title: "測站編碼",
      // key: "stcd"
      format: {
       names: ["stcd"],
       template: &#39;<span style="word-break: break-all">#stcd#</span>&#39;
      }
     },
     {
      title: &#39;測站名稱&#39;,
      key: &#39;stnm&#39;
     },
     {
      title: &#39;最后一次上報時間&#39;,
      // key: &#39;tm&#39;,
      format: {
       names: [&#39;tm&#39;],
       codeChange: true,
                      //傳函數(shù)名
       template: &#39;tmtemp&#39; 
      }
     },
     {
      title: &#39;在線狀態(tài)&#39;,
      // key: &#39;onlinestate&#39;,
      width: &#39;146&#39;,
      format: {
       names: [&#39;onlinestate&#39;],
       codeChange: true,
                      //傳函數(shù)名
       template: &#39;onlinetemp&#39;
      }
     }
    ]

3 alternatif eval

Terdapat Fungsi eval sumber terbuka , berikut ialah alamat , muat turun kod sumber secara setempat dan gunakannya seperti ini apabila komponen tabale merujuk

import {binding} from "@/_utils/binding.js"

komponen jadual untuk menghuraikan:

function(row,col){
    if (col.format.codeChange) {//rpneval.calCommonExp
            tempHTML = binding.eval('tem($0)',[row],{tem:this[col.format.template]});
    }
}

簡單解釋下，binding.eval函數(shù)有三個參數(shù)，第一個是模板，tem可以隨意取名，指代函數(shù)名；第二個是傳入的參數(shù)，放在數(shù)組里；第三個就是一個函數(shù)名匹配對象，this[col.format.template]就是前面?zhèn)鬟^來的函數(shù)名。

4、存儲常量參數(shù)

如果在小程序的組件中，傳過去的函數(shù)需要用到當前組件里的參數(shù)，這個就不太好傳了，因為table組件里只會傳入row(列表行數(shù)據(jù)對象)、col(列名)這種參數(shù)，所以如果要用到組件內的其他參數(shù)傳到table組件，一般要提到全局，可以給到狀態(tài)管理，也可以給全局屬性，看需要了。

四、小程序分包、上傳

小程序為了良好性能的用戶體驗，對小程序的上傳發(fā)布有要求。對于微信小程序，上傳時，項目代碼總大小不能超過16M，小程序還有一個分包的概念，要求各個分包大小不能超過2M。這里可以參考官方文檔進行分包，細節(jié)我就不復述了。項目分完了包之后，pages.json中的配置應該是像這樣，我直接從官方文檔拷貝了一個例子：

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

packageA與packageB就是分包，主包是除了subPackages里的內容，其他所有的內容都是主包，pages只是部分內容 ，包括第三方庫、樣式及靜態(tài)文件默認情況下都是會在主包里。一般建議主包的pages中就只留tabbar對應的頁面，其他的放分包的中，像這樣：

光這些還不夠，因為主包東西太多。還有什么要注意的地方呢？以下是要點：

1、使用hbuilderx自帶壓縮

如圖，運行到小程序時將“運行時是否壓縮代碼”勾選就可以了，這樣基本可以壓縮掉一大半占用空間。

2、將局部引用文件分到對應分包

代碼壓縮了，但是主包還是很大怎么辦，給主包分點東西出來！舉個例子，在components文件夾下都是引用的三方組件，可以把這些組件分到各個分包里。這里要注意下分包原則，后面都以此為準，官方文檔也有說明，我這里總結下：

• 公共組件或者公共資源，就是各個包都會用到的，要放在類似components這樣的公共文件里不能動
• 分包中單獨用到的組件，可以放在各自的分包里
• 主包可以引用分包中的文件，分包無法引用其他分包的東西，只能引用自己包里和主包里的東西

3、static文件夾內只放靜態(tài)文件

這里有個要注意的地方：uni-app的編譯器會編譯40k以下的文件為base64方式。uni-app編譯器是不會編譯static里面的內容的，所以，這里面只能放靜態(tài)文件，像圖片這種可以放里面；其他的像樣式文件，字體這種就不行了，你得從static中移出來，就放在分包里，主包也可以調用得到。

像這樣，看著是有點別扭，但是沒辦法，為了小程序，為了能跨多端，只能犧牲長相了。其實我一開始并沒有想到要分包，后面有經(jīng)驗了就可以在項目設計時就想好分包，這樣各個分包有專門的作用，不至于看著別扭了。

4、壓縮vendor.js文件

vendor.js這個是小程序里面所有第三方庫的壓縮包，這個一般不小，要壓縮這個，官方有說明方法，這里提一下，在package.json里加上這段，注意得是cli創(chuàng)建的項目才會有用。

  "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"

好了，關于uniapp項目運行到微信小程序，要注意的地方就總結這么多，希望對你有用！不得不承認，學會用uniapp還是挺省事的，值得學習！

推薦：《uniapp教程》

Atas ialah kandungan terperinci Apakah yang perlu kita perhatikan semasa menyesuaikan uniapp kepada applet WeChat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!