使用mpvue開發小程式教程(五)

2022-09-15 18:21:08 字數 3320 閱讀 7527

在上一章節中,我們了解了元件的三個基本特性以及元件的基本使用方法。在實際的小程式開發中,我們應該以元件的思維去設計每個小程式的功能頁面,對其進行合理的元件拆分,讓每個部分都保持功能簡潔、條理清楚、各司其職,這樣會讓**變得更易理解和維護,間接的也提公升了**的健壯性,降低出現bug的機率,即使出現bug,也會更容易進行定位和除錯。

由於mpvue採用的是vue框架的基礎設施,所以大部分的功能都是和vue一致的。但是,mpvue的**畢竟最終還是要轉譯成小程式原生框架下的**的,由於小程式框架本身存在的一些功能限制,導致有些功能不能被翻譯過去,也就是說有些標準的vue功能在mpvue下是不可以使用或有特殊限制的。

今天我們就來羅列一下,在使用mpvue的時候那些需要特別注意的點。

1. 在模板中,動態插入html的v-html指令不可用

這條很好理解,小程式的介面並不是基於瀏覽器的bom/dom的,所以不能動態的在介面模板裡直接插入html片段來顯示。

題外話,如果有在小程式裡插入html片段的需求怎麼辦?可以用元件或者wxparse(來實現。

2. 在模板中,用於資料繫結的雙括號語法}中的表示式功能存在諸多限制

在vue本身的模板內雙括號語法中,我們可以對繫結變數進行比較豐富的處理,比如:

}

}

}

以上這些好用的功能,在mpvue中,記得都是通通不能用的哦!!!

我們只能在雙括號中使用一些簡單的運算子運算(+ - * % ?: ! == === > < .)。

但是也得找些可用的替代方案吶,大夥先考慮使用計算屬性(computed)來做吧。

3. 在模板中,除事件監聽外,其餘地方都不能呼叫methods下的函式

在vue中,模板裡呼叫methods部分定義的函式是非常常見的,比如下面這段**所示,在v-if指令中呼叫函式geterrornum()

if="

geterrornum() > 0 && code == 10001

"class="

error

">}

可是,在mpvue裡就是不可以用!因為在小程式原生模板wxml裡就不支援這種函式呼叫,導致mpvue沒有很好的方式轉譯過去(雖然小程式有wxs,但是感覺翻譯過去mpvue要做的工作會比較複雜)。

所以,可用的替代方案可能還是計算屬性了。

4. 在模板中,不支援直接繫結乙個物件到styleclass屬性上

在vue中我們可以為html元素的classstyle繫結乙個物件,並按照物件內的屬性值來決定是否新增對應的屬性名到html元素的樣式名。示例如下:

class="

classobject

">

上面這段**的執行後生成的html將是:

class="

active

">

class="

">

其實改動不大,稍微多打了一些字而已,相當於在模板的class裡再定義乙個物件罷了。但是據文件中說這樣會提公升效能。好吧,為了效能,這點麻煩還是能忍受的。但是它又說了:從效能考慮,建議不要過度依賴此......看來即使這樣,也還是有效能問題。

看來最好一點的方案,還是得使用計算屬性,直接生成一串樣式的字串,繫結到classstyle上:

class="

classstr

">

5. 在模板中,巢狀使用v-for時,必須指定索引index通常,我們在vue模板中巢狀迴圈渲染陣列的時候,一般是這個樣子的:

但在mpvue中使用這種巢狀結構的v-for時,則必須每層的v-for上都給出索引,且索引需取不同名字:

6. 事件處理中的注意點

在mpvue中,一般可以使用web的dom事件名來繫結事件,mpvue會將web事件名對映成對應的小程式事件名,對應列表如下:

//

左側為web事件 : 右側為對應的小程式事件

除了上面的之外,web表單元件的change事件會被轉為blur事件。

然後,像keydownkeypress之類的鍵盤事件也沒有了,因為小程式沒有鍵盤,所以不需要這些事件。

還有,vue裡面繫結事件的時候,可以指定事件修飾符,但是在mpvue裡,官方給出了一些注意資訊:

所以呢,總之當你在遇到事件相關的問題,請回來檢視一下文件,看看自己是否已經掉在坑里了。

7. 對於表單,請直接使用小程式原生的表單元件

一句話,表單元件又多又複雜,框架可能hold不住。所以在實際開發中,推薦直接使用小程式的表單元件標籤來寫,而不是使用web的表單元件標籤來寫。當然了,在mpvue中使用了小程式的元件標籤,資料繫結功能還是完全可以用的。給個示例:

"

handlepickerchange

" :value="

selectedindex

" :range="

messages

">

class="

picker

">當前訊息:}

其他注意事項

另外,在vue開發web應用的時候,通常使用vue-router來進行頁面路由。但是在mpvue小程式開發中,不能用這種方式,請使用標籤和小程式原生apiwx.n**igateto等來做路由功能。

還有就是請求後端資料,我們通常在web開發中使用axios等ajax庫來實現,但是在小程式開發中也是不能用的,也請使用小程式的原生apiwx.request等來進行。

使用mpvue開發小程式教程(六)

使用mpvue開發小程式教程(二)

在visual studio code裡面開啟專案資料夾,我們可以看到類似如下的檔案結構 package.json project.config.json static src components pages utils main.js config index.js dev.env.js pro...

使用mpvue開發小程式教程(二)

在visual studio code裡面開啟專案資料夾,我們可以看到類似如下的檔案結構 package.json project.config.json static src components pages utils main.js config index.js dev.env.js pro...

使用mpvue開發小程式教程(三)

為了清楚起見,我們將要對vue cli生成的 做乙個清理工作,具體如下 import vue from vue vue.config.productiontip false export default 至此,我們的 就成了乙個小程式頁面都沒有的初始狀態。程式入口 有了這三個部分,才能成功執行起乙個...