本篇文章給大家談談vue微信小程序開發(fā)，以及vue怎么開發(fā)微信小程序對應的知識點，希望對各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、微信小程序組件化開發(fā)
• 2、推薦兩個微信小程序開發(fā)框架
• 3、微信小程序開發(fā)主要用到什么技術
• 4、關于微信小程序開發(fā)中如何動態(tài)的往數(shù)組中添加對象，并進行更改
• 5、微信小程序開發(fā)系列 (四) ：微信小程序的頁面跳轉路由設計
• 6、小程序開發(fā)教程 小程序怎么開發(fā)

微信小程序組件化開發(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構造器中可以寫哪些東西，如下

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

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

1. WePY

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

Github地址:

官網(wǎng)地址：

2. mpvue

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

Github：

官網(wǎng)：

微信小程序開發(fā)主要用到什么技術

1.前端基礎，如JS、HTML、css

2.一門后臺語言，如PHP、JAVA，后端什么語言都可以，自己定。【點擊查看小程序開發(fā)底價】

3.學習微信接口文檔如果用到了微信本身相關功能，如支付、分享等功能，加個微信jssdk就可以了。

4.還需要美工，保證制作的小程序有美感。

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

關于微信小程序開發(fā)中如何動態(tài)的往數(shù)組中添加對象，并進行更改

因為以前都是用Vue開發(fā)，寫項目，自然而然的就習慣了vue的雙向綁定機制，開發(fā)中也覺得這真是方便，但是在最近的小程序開發(fā)中，我在動態(tài)往數(shù)組中傳值，可是吃盡了苦頭，怎么綁都綁定不上。當然，也并不是再說小程序的不好，各有各的開發(fā)理念，各有各的好，所以在這里寫下一些心得，一方面讓自己別忘了，一方面也希望和我一起遇到這個問題的小伙伴們，別再走這個坑!

言歸正傳：

加入此刻我的data中，有一個數(shù)組

然后我定義了一個方法，需要往這個lists數(shù)組中動態(tài)的添加數(shù)據(jù)

這個方法是可以往data中的lists中添加對象的，這我相信大家都能做得到，很簡單

但是，當我們要改變這個lists中某個對象下的key：value值呢？當時我就在這里卡了好久，我一開始想的的是在this.setData()這個函數(shù)中，把key值改為 lists[下標].屬性值 但是當我這樣寫了以后，控制臺立馬報錯，原因是因為，他在data中并沒有找到你這個key值，也就是說我們這個寫的方法是錯誤的，但是按照道理思路是沒錯的，所以也就有了下面這個方法，可以改變對應的lists里面的屬性值

這樣就可以了，就能改變data中數(shù)組里面任意的值，不過要謹記一點，就是，一定要拿中括號[xx]包裹你要改變的key值，不然也是會報錯的！好了，其實我感覺我說了很多沒必要的話，但是，我就當記筆記了！希望大家和自己繼續(xù)努力，學習永無止境【點擊了解更多加盟項目】

微信小程序開發(fā)系列 (四) ：微信小程序的頁面跳轉路由設計

筆者由于工作需要，曾經(jīng)參加過一個微信小程序同 SAP 系統(tǒng)集成的項目，因此從零開始學習了微信小程序的開發(fā)知識。這里通過系列文章把自己所學分享出來，希望對相關學習者有所幫助。

本教程前面三篇文章：

通過本系列前面三篇文章的介紹，大家對微信小程序的視圖和控制器，微信調試器的用法，以及如何消費微信平臺提供的 Public API，已經(jīng)有了一個最基本的認識了。在這個基礎上，本文讓我們進一步學習微信小程序的頁面跳轉路由設計。

這個系列教程的前六篇文章我們都在單個的視圖上操作?，F(xiàn)在讓我們創(chuàng)建第二個視圖，然后實現(xiàn)從第一個視圖到第二個視圖的跳轉。

首先開發(fā)第二個視圖：

做過 Angular 開發(fā)的朋友們對上面的視圖設計一定不會陌生。這個視圖的數(shù)據(jù)源由模型 logs 提供，是一個列表結果，列表每個元素的數(shù)據(jù)源是模型 logs 里的一條記錄，用 log 代表。

為了讓 log 看起來顯示更整齊，在 log 內容之前，顯示每條 log 的索引。因為 log 的索引從 0 開始，所以用 {{index + 1}} 在索引前加一，這樣顯示的索引更符合普通人的閱讀習慣。

這個視圖的控制器：

控制器 logs.js 的實現(xiàn)：

在控制器里調用 Page 構造函數(shù)，給當前控制器指定名為 logs 的數(shù)據(jù)模型。

這個數(shù)據(jù)模型的值填充，通過微信框架提供的 API wx.getStorageSync 來獲取。

wx.getStorageSync 的含義在微信小程序 官網(wǎng) 上有定義：從本地緩存中同步獲取指定 key 對應的內容。

第二個視圖的 UI 和控制器都開發(fā)完畢，剩下的事情就是在第一個視圖里定義一個觸發(fā)點，讓它能觸發(fā)到第二個視圖的跳轉。

我在第一個視圖上通過屬性 bindtap 綁定了一個點擊函數(shù) bindViewTap :

bindViewTap 在第一個控制器 index.js 里的實現(xiàn)：

跳轉還是通過微信小程序提供的 API wx.navigateTo :

保留當前頁面，跳轉到應用內的某個頁面，使用 wx.navigateBack 可以返回到原頁面。

學習了微信小程序頁面路由跳轉之后，我們來進行一個實際的需求開發(fā)。

效果：我在手機上打開微信小程序，自動顯示出我當前所在的地理位置：

具體步驟：

ReservationService.getGeocode 的實現(xiàn)：

看下面一個使用高德地圖 API 將經(jīng)緯度轉換成文字描述的地址的例子，使用 postman 發(fā)送請求：

API 響應：

假設我用 vue 開發(fā)了一個 web 應用,需要在手機微信里訪問并調試, 可以按照本文介紹的步驟,使用微信開發(fā)者工具來調試。

假設我的 web 應用的訪問入口是如下公眾號菜單的”預約”按鈕:

那么為了能夠在微信開發(fā)者工具里調試,需要首先進入該公眾號的后臺,在 web 開發(fā)者工具里,將開發(fā)者本人的微信號添加進去:

點擊”綁定開發(fā)者賬號”:

輸入待綁定的微信賬號:

點擊綁定,該微信號會收到一條消息,詢問是否綁定:

點擊同意操作完成綁定。

接下來, 把要調試的 web 應用的 url 放到微信開發(fā)者工具地址欄里，回車之后，微信開發(fā)者工具就會彈出一個詢問窗口，點擊 Allow 之后，就可以在微信開發(fā)者工具提供的類似 Chrome 開發(fā)者工具調試器一樣的界面里進行單步調試了。

這個粘貼到地址欄的 url 很有講究。

;redirect_uri=https%3a%2f%2f;response_type=codescope=snsapi_userinfostate=123#wechat_redirect

其中 appid= 后面的值，是從微信公眾號控制臺里拷貝出來的 appid ：

redirect_uri, 即為我們開發(fā)的 web 應用，部署到服務器之后生成的 url，需要經(jīng)過 url encode 處理：

這個 url 準備好之后，將其粘貼到微信開發(fā)者工具地址欄里，回車，即可看到一個對話窗口，要求獲得我們公開信息的許可：

點擊 Allow 之后，就可以像使用 Chrome 開發(fā)者工具的調試器一樣，在微信開發(fā)者工具里進行單步調試了：

本文首先介紹了微信小程序多頁面內的路由跳轉設計，接著通過獲得手機當前經(jīng)緯度并轉換成地址的需求實現(xiàn)，進一步深入了解了微信小程序如何消費微信平臺提供 Public API 的方法。

本教程前面三篇文章：

小程序開發(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ā)和vue怎么開發(fā)微信小程序的介紹到此就結束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關注本站。