今天給各位分享微信小程序開發(fā)如何用vue的知識，其中也會對微信小程序開發(fā)如何用當前時間作為名稱保存文件進行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關注本站，現(xiàn)在開始吧！

本文目錄一覽：

• 1、uni-app 項目小程序端支持 vue3 介紹
• 2、推薦兩個微信小程序開發(fā)框架
• 3、小程序開發(fā)教程 小程序怎么開發(fā)
• 4、得到一套vue小程序怎樣導入微信開發(fā)者工具？
• 5、微信小程序組件化開發(fā)
• 6、uni-app使用Vue.js

uni-app 項目小程序端支持 vue3 介紹

隨著 vue3 的發(fā)布， uni-app 也逐步支持 vue3 。

目前小程序平臺已支持，h5、App 平臺暫不支持。

除支持 vue3 語法特性外， uni-app 特有的生命周期鉤子支持 Composition API ，如 onLaunch ， onShow ， onLoad …

下面介紹創(chuàng)建支持 vue3 的 uni-app 項目的流程，以及使用中的一些注意事項。vue3 相關問題請關注vue官方文檔 vue3 中文文檔。

目前僅支持 cli 方式創(chuàng)建支持 vue3 默認模板項目。

如果你之前沒有使用過 vue-cli 方式創(chuàng)建過項目，需要先安裝 vue-cli ，若已安裝則跳過步驟 1。

步驟 1: 全局安裝vue-cli

步驟 2: 用如下的命令創(chuàng)建vue3工程

步驟 3: 創(chuàng)建好工程后，進入對應目錄

步驟 4: 將項目跑到微信平臺

需要將編譯后的文件 dist/dev/mp-weixin 導入微信開發(fā)者工具運行，也可將項目拖入 HbuildX 中運行，方便運行到各個平臺。

歡迎開發(fā)者反饋使用該版本遇到的問題，我們將積極收集意見。

后續(xù)：

DCloud之所以不支持vue3的h5和app版，主要是因為vue3的組件中很多語法的寫法發(fā)生變化，這導致uni-app的h5版基礎組件庫和app版基礎組件庫的寫法與vue3不兼容。

當然除了基礎組件，插件市場的所有插件（包括uni ui），都不支持vue3。即便是uni-app已經推出的vue3的小程序版，也不支持插件市場的插件。

考慮到生態(tài)兼容的重要性，vue官方（尤雨溪）計劃2021年4月中下旬推出新版，對vue2的語法做兼容，屆時uni-app的h5版和app版將同時推出，并且插件市場的眾多插件也將自動適配vue3版的uni-app。

推薦兩個微信小程序開發(fā)框架

下面是最近了解的，開發(fā)者使用較多的框架：

1. WePY

WePY屬騰訊系，是一款組件化的開發(fā)框架，比原生小程序的開發(fā)模式更接近于MVVM ，它類Vue的開發(fā)風格，讓Vue開發(fā)者很容易上手。

Github地址:

官網地址：

2. mpvue

mpvue 是美團點評開源的一個使用Vue.js開發(fā)小程序的前端框架?？蚣芑?Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現(xiàn)，使其可以運行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套 Vue.js 開發(fā)體驗。

Github：

官網：

小程序開發(fā)教程 小程序怎么開發(fā)

1、有兩種方法，一種方法是自己開發(fā)，這需要有一定的基礎，微信小程序雖是騰訊出品，但是核心的思想跟vue等框架是一樣的。

2、申請注冊微信小程序賬號，注意：注冊賬號之后會有一個AppID，下載微信開發(fā)者工具，新建項目的時候需要填上，否則很多功能用不了，比如不能預覽、不能上傳代碼等問題。

3、新項目創(chuàng)建完畢就可以進入開發(fā)者工具進行編輯，其中最難的就是編寫代碼這部分，其中app.js、app.json、app.wxss這三個文件功能一定要了解清楚，這對微信小程序開發(fā)是非常有幫助的，后面有很多樣式、功能之類的，都是需要添加的。

4、善于搜集精美的小組件，比如在github或者微信開放社區(qū)上找到想要的組件并巧妙優(yōu)雅的組裝到自己的小程序中，可以大大縮短制作的時間，編輯好點擊“提交”，填寫小程序相關信息就可以提交審核了，注意：分類最好填寫準確，這樣才能更快的通過審核。

5、另一種方法則是利用一些一鍵生成小程序的工具，登錄后，進入選擇想要的模板進行相應的修改就可以了。

得到一套vue小程序怎樣導入微信開發(fā)者工具？

下載一個微信開發(fā)者工具，選擇導入項目，選擇你下載好的一套vue小程序放置的源碼根文件夾，然后等待加載即可?！军c擊查看小程序開發(fā)底價】

想要了解更多有關小程序開發(fā)的相關信息，推薦咨詢豬八戒網。豬八戒網成立于2006年，是中國領先的企業(yè)服務平臺，服務交易獨角獸企業(yè)。豬八戒網現(xiàn)有注冊用戶2800萬、在全國布局線下數(shù)字化創(chuàng)業(yè)園區(qū)超過100個。十余年來，累計有10萬余個人通過平臺孵化成長為公司，超過100萬人通過平臺實現(xiàn)靈活就業(yè)，千萬企業(yè)通過平臺解決專業(yè)服務需求；專業(yè)性值得選擇。

微信小程序組件化開發(fā)

微信小程序的組件和Vue的組件非常相似。

在微信小程序中有很多內置組件，比如button view input image等，有時候我們要自定義組件。和Vue的組件似的。

如何創(chuàng)建自定義組件：

新建一個components目錄，在里邊創(chuàng)建自定義組件

組件的組成：

使用組件：

一個簡單的示例：

創(chuàng)建comp，代表頁面；創(chuàng)建components/xxxx，代表組件。

創(chuàng)建組件：

使用組件：

注意：json文件中不能寫注釋啥的。這里的注釋是為了解釋清楚，在開發(fā)中不能寫注釋。

組件的注意事項：

組件的樣式細節(jié)：

如何控制頁面和組件的樣式相互影響：

組件和頁面相互通信

this.triggerEvent(事件名，參數(shù)對象，{})，最后是options，額外的一些選項

預留一個設備，以有利于對以后進行擴展。

好處：

例子：

在移動端，導航欄，nav-bar，分為左中右三部分。不把這三部分的內容寫死。就用插槽，為了封裝性更好。

單個插槽的使用很簡單：

多個插槽的使用稍微復雜，要設置幾個東西：

component構造器中可以寫哪些東西，如下

uni-app使用Vue.js

說明 ：uni-app基于 Vue 2.0 實現(xiàn)，開發(fā)者需注意Vue 1.0 – 2.0 的使用差異，詳見 從 Vue 1.x 遷移 。

uni-app不僅支持應用生命周期和頁面生命周期，還支持 vue 實例的如下生命周期函數(shù)：

注意 ：不要在選項屬性或回調上使用箭頭函數(shù)，比如 created: () = console.log(this.a) 或 vm.$watch(‘a’, newValue = this.myMethod())。因為箭頭函數(shù)是和父級上下文綁定在一起的，this 不會是如你做預期的 Vue 實例，且 this.a 或 this.myMethod 也會是未定義的。

幾乎全支持 Vue官方文檔：模板語法 ，下面講下不支持的情況。

(1)不支持純HTML

uni-app的非H5端里所有的 BOM／DOM 都不能用，也就是說 v-html 指令不能用，可以使用 rich-text組件 代替。或者使用三方組件wxparse，在hello uni-app中有示例。

(2)不支持部分復雜的 JavaScript 渲染表達式

非H5端無法支持復雜的 JavaScript 表達式。目前可以使用的有 + – * % ?: ! == === [] .，剩下的還待完善。

(3)不支持過濾器

編譯到 App 和小程序平臺時不支持使用過濾器，可以使用計算屬性（computed）提前計算出數(shù)據(jù)（如果是數(shù)組類型，就提前計算整個數(shù)組），用以代替過濾器。

備注 ： 自HBuilderX 1.7.1起，在微信小程序平臺支持使用過濾器。

data 必須聲明為返回一個初始數(shù)據(jù)對象的函數(shù)；否則頁面關閉時，數(shù)據(jù)不會自動銷毀，再次打開該頁面時，會顯示上次數(shù)據(jù)。

注意 ：在微信小程序端，uni-app 將數(shù)據(jù)綁定功能委托給Vue，開發(fā)者需按Vue 2.0的寫法實現(xiàn)數(shù)據(jù)綁定，不支持微信小程序的數(shù)據(jù)綁定寫法，故如下寫法不支持：

需修改為：

支持 Vue官方文檔：計算屬性 。

實現(xiàn)全局變量的方式需要遵循 Vue 單文件模式的開發(fā)規(guī)范。詳細參考： uni-app全局變量的幾種實現(xiàn)方式 。

非H5端不支持在 template 內使用 methods 中的函數(shù)。

備注 ： 自HBuilderX 1.7.1起，在微信小程序平臺支持支持在 template 內使用 methods 中的函數(shù)。

為節(jié)約性能，我們將 Class 與 Style 的表達式通過 compiler 硬編碼到 uni-app 中。

全支持 Vue官方文檔：條件渲染 。

全支持vue列表渲染 Vue官方文檔：列表渲染 。只是需要注意一點，嵌套列表渲染，必須指定不同的索引！需要填寫 :key=”xx” 。

注意 ：同級多個 v-for 時 key 的值是不允許重復的，key 的綁定是不支持表達式的，需要按照以下方式處理。

幾乎全支持 Vue官方文檔：事件處理器 。事件映射表如下所示：

注意 ：

(1)事件映射表中沒有的原生事件也可以使用，例如map組件的regionchange 事件直接在組件上寫成 @regionchange,同時這個事件也非常特殊，它的 event type 有 begin 和 end 兩個，導致我們無法在handleProxy 中區(qū)分到底是什么事件，所以你在監(jiān)聽此類事件的時候同時監(jiān)聽事件名和事件類型既 map @regionchange=”functionName” @end=”functionName” @begin=”functionName”map。

(2)為兼容各端，事件需使用 v-on 或 @ 的方式綁定，請勿使用小程序端的bind 和 catch 進行事件綁定。

(3)事件修飾符

(4)若需要禁止蒙版下的頁面滾動，可使用 @touchmove.stop.prevent=”moveHandle”，moveHandle 可以用來處理 touchmove 的事件，也可以是一個空函數(shù)。

(5)按鍵修飾符：uni-app運行在手機端，沒有鍵盤事件，所以不支持按鍵修飾符。

支持 Vue官方文檔：表單控件綁定 。建議開發(fā)過程中直接使用 uni-app：表單組件 。用法示例：

(1)H5 的select 標簽用 picker 組件進行代替

(2)表單元素 radio 用 radio-group 組件進行代替

組件是整個 Vue.js 中最復雜的部分，支持 Vue官方文檔：組件 。有且只能使用單文件組件（.vue 組件）的形式進行支持。其他的諸如：動態(tài)組件，自定義 render ，和 script type=”text/x-template” 字符串模版等非H5端都不支持。詳細的非H5端不支持列表：

(1)暫不支持在組件引用時，在組件上定義 click 等原生事件、v-show（可用 v-if 代替）和 class style 等樣式屬性(例：card class=”d01b07f3533105fc class-name” /card 樣式是不會生效的)。

Slot（scoped 暫時還沒做支持）

(2)動態(tài)組件

(3)異步組件

(4)inline-template

(5)X-Templates

(6)keep-alive

(7)transition

(8)class

(9)style

(10)組件里使用 slot 嵌套的其他組件時不支持 v-for

uni-app提供了豐富的 UI組件 ，比如： picker , map 等，需要注意的是原生組件上的事件綁定，需要以 vue 的事件綁定語法來綁定，如 bindchange=”eventName” 事件，需要寫成 @change=”eventName” 。如:

uni-app 支持配置全局組件，需在 main.js 里進行全局注冊，注冊后就可在所有頁面里使用該組件。 注意 ：Vue.component 的第一個參數(shù)必須是靜態(tài)的字符串。示例：

(1)main.js 里進行全局注冊

(2)index.vue 里可直接使用組件

在 uni-app 中以下這些作為保留關鍵字，不可作為組件名。

備注 ：除以上列表中的名稱外，標準的 HTML 及 SVG 標簽名也不能作為組件名。

(1) 如何獲取上個頁面?zhèn)鬟f的數(shù)據(jù)

在 onLoad 里得到，onLoad 的參數(shù)是其他頁面打開當前頁面所傳遞的數(shù)據(jù)。

(2) 如何設置全局的數(shù)據(jù)和全局的方法

uni-app內置了 vuex ，在app里的使用，可參考 hello-uniapp 的 store/index.js 。

(3)如何捕獲 app 的 onError

由于 onError 并不是完整意義的生命周期，所以只提供一個捕獲錯誤的方法，在 app 的根組件上添加名為 onError 的回調函數(shù)即可。如下：

(4)組件屬性設置不生效解決辦法

當重復設置某些屬性為相同的值時，不會同步到view層。 例如：每次將scroll-view組件的scroll-top屬性值設置為0，只有第一次能順利返回頂部。 這和props的單向數(shù)據(jù)流特性有關，組件內部scroll-top的實際值改動后，其綁定的屬性并不會一同變化。解決辦法有兩種（以scroll-view組件為例）：

備注 ：第二種解決方式在某些組件可能造成抖動，推薦第一種解決方式。

關于微信小程序開發(fā)如何用vue和微信小程序開發(fā)如何用當前時間作為名稱保存文件的介紹到此就結束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關注本站。