微信小程式開發過程中需要首先了解一些基礎知識

myskies發表於2023-04-29
微信小程式

如果你是微信小程式開發的初學者，同時以前還使用過一些其它的前端框架，那麼在進行微信小程式開發過程中，可能需要快速閱覽以下的知識：

測試號

首先，需要一個用於開發的微信小程式測試賬號。申請地址為：https://developers.weixin.qq.com/sandbox ，然後就在微信統一的管理後臺 https://mp.weixin.qq.com/ 上掃碼登入時選擇自己的微信小程式測試賬號了。

工具

微信小程式開發原則上僅僅需要 微信開發者工具，並不需要其它的額外工具。

引用第三方包

微信小程式支援引用npm管理的第三方包，但引用的方式與傳統的node.js專案並不一致。具體還得隨時開發隨時學習垃圾的官方文件，之所以說需要隨時學習，是因為這個文件變化的比較快。

UI

官方提供的WEUI雖然解決不了所有的場景，但在初步接觸時肯定夠了。官方文件地址為：https://wechat-miniprogram.github.io/weui/docs/，坑的是這個DEMO上有些外鏈是不可用的，然後示例給的也不全，效果圖也沒有。這是騰訊的垃圾風格。想看具體的使用方法需要移步到：https://github.com/wechat-miniprogram/weui-miniprogram/tree/master/src/example，僅僅想看效果的話也可以簡單看看 https://weui.io/

框架

此部分開始是技術相關

路由

小程式的路由就是pages，某些路由是否可用，取決於其是否被新增到app.json中的pages屬性中。

{
  "pages": [
    "pages/index/index",
    "pages/login/login",
    "pages/web-view/web-view",
    "pages/questionnaire/questionnaire",
    "pages/template/template",
    "pages/final-score/final-score"
  ]
}

而pages中的第一項則為小程式的預設路由。

路由跳轉的基本語法是：wx.navigateTo({url: 'pages的相對地址'}).then()，當調整的url不存在或是未在pages中時，則會出現page not found相關的錯誤。關於跳轉的具體引數，可以檢視navigateTo的註釋，這個註釋還是寫的不錯的，並不像騰訊的風格。

生命週期

小程式的生命週期有3個主要的部分夠成，分別是：應用、page頁面以及component元件.

應用

應用是指整下微信小程式從啟動到銷燬的全過程，具體請參考官方文件，前期僅使用onShow即可。onShow會在小程式初始化時執行，或是在小程式初切回來的時候執行。

page頁面

頁面與路由對應，所以每個路由即頁面，生命週期可參考官方文件, 前期可使用onLoad方法。

component元件

元件的生命週期全部在pageLifetimes屬性中宣告，參考官方文件。前期可使用created。

模板

有時候我們希望在渲染完後不進行任何的佔用，則可以使用<block>標籤，這等同於angular中的ng-container。

文字插值

在元件初始化時，將預設複製data中的資料至V層：

data: {
  foo: 'foo'
}
<view> {{foo}} </view>

屬性繫結

當前元件（頁面）

data: {foo: 'foo'}
<yz-foo foo="{{foo}}"></yz-foo>

yz-foo元件:

  properties: {
    foo: {
      value: '',
      type: String
    }
  }

以下是官方給的僅的兩個例子：
image.png

image.png

在元件（頁面）初始化時，會將properties上的值傳遞給data

事件繫結

在微信小程式中，預設的點選事件是bindtap，注意完全是小寫。比如：<button bindtap="onTap">點選<button>。同時，並不支援主動傳參，比如以下寫法是錯誤的<button bindtap="onTap(foo)">點選<button>.

然後在C層（頁面和元件不一樣，請參考： https://developers.weixin.qq.com/miniprogram/dev/reference/ap...， https://developers.weixin.qq.com/miniprogram/dev/reference/ap...）中對應建立onTap方法：

onTap(e) {
    console.log(e);
}

如果在事件被觸發的同時還想獲取一些額外引數（比如遍歷生成了N個按鈕，當按鈕被點選事件觸發時，我們希望知道是哪個按鈕），則需要使用data-xxx來進行繫結：

<button data-foo="{{foo}}" bindtap="onTap">點選<button>

注意這樣寫是錯誤的：data-foo="foo"，然後在點選時可以透過以下方法獲取到這個foo:

onTap(e) {
    console.log(e.currentTarget.dataset.foo);
}

需要特別注意的是，微信小程式的C\V層位於不同的兩個上下文中，這決定其CV傳值時是值傳遞，而不是地址傳遞。如果此時獲取到的foo是另一個物件，而不是你以前那個了。測試如下：

    data: {
        foo: {
            id: 1
        }
    },
    onButtonTap: function (e) {
        var foo = e.currentTarget.dataset.foo;
        console.log(foo === this.data.foo);
    },
<button data-foo="{{foo}}" bindtap="onButtonTap">傳值測試</button>

image.png

自定義事件

微信小程式並不需要自定義事件，子元件需要向父元件彈值時，僅僅需要指定彈值的關鍵字即可：

this.triggerEvent('onchangeevent', 'foo');

此時父元件在V層中進行事件繫結，並透過以下方法獲取到子元件彈出的值：

<yz-foo bindonchangeevent="onChange"></yz-foo>
onChange(e) {
  console.log(e.detail);
}

手動渲染

微信小程式沒有自動渲染的機制，想渲染V層的方法是呼叫：this.setData({foo: 'newFooValue'})，此時將進行值傳遞並重新渲染V層。

值傳遞

微信小程式的值傳遞，使得最少在以下兩處地需要特別的注意：

  1. 在進行父子元件傳值時需要特別的處理。父元件把物件傳給了子元件，子元件此時獲取到的便是父元件物件的clone。
  2. setData({foo: foo})被呼叫時，傳給V層供使用的是C層中物件的clone.

TUCAO

騰訊風格----基於龐大的使用者群體來綁架程式設計師。感覺它真該沒事想想微軟的IE瀏覽器是怎麼一點點消亡的，然後多改改內部的考核導向，可以讓一些維護文件工作的員工安心地維護文件。

相關文章