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

本文目錄一覽：

• 1、微信小程序開發(fā)系列 (四) ：微信小程序的頁面跳轉路由設計
• 2、小白如何自學做小程序開發(fā)？
• 3、微信小程序組件化開發(fā)
• 4、uni-app開發(fā) node和vue基礎
• 5、淺談原生小程序

微信小程序開發(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 內(nèi)容之前，顯示每條 log 的索引。因為 log 的索引從 0 開始，所以用 {{index + 1}} 在索引前加一，這樣顯示的索引更符合普通人的閱讀習慣。

這個視圖的控制器：

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

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

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

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

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

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

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

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

保留當前頁面，跳轉到應用內(nèi)的某個頁面，使用 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ā)者工具里進行單步調試了：

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

本教程前面三篇文章：

小白如何自學做小程序開發(fā)？

學習任何一門語言都要堅持，做小程序語言JS開發(fā)，肯定要先學會基本的前端只是HTML和CSS這兩個比較簡單，然后就是學習JavaScript。學會這個JS就可以學習一個框架例如VUE。

學完前端還要學習后端語言例如PHP，這個相對于其他后端語言比較簡單，只是學起來簡單，其實也很難，學會這個語言就可以學習一個框架例如ThinkPHP或者Laravel。

到這里就可以參考視頻開發(fā)小程序，小程序一般是前后端分類，后端寫個API前端調用就行。

這些知識學好了，也可以開發(fā)別的APP應用和網(wǎng)站，可以學習一下uni-app這個是基于VUE開發(fā)的前端框架，一套代碼可以生成IOS應用，安卓應用，各種百度頭條抖音微信QQ小程序。

祝您學習快樂，一點要堅持！

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

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

在微信小程序中有很多內(nèi)置組件，比如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，分為左中右三部分。不把這三部分的內(nèi)容寫死。就用插槽，為了封裝性更好。

單個插槽的使用很簡單：

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

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

uni-app開發(fā) node和vue基礎

具體安裝步驟和流程

小程序開發(fā)入門

Node.js 詳解

node.js是什么？

Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環(huán)境。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型。

Node 是一個讓 JavaScript 運行在服務端的開發(fā)平臺，它讓 JavaScript 成為與PHP、Python、Perl、Ruby 等服務端語言平起平坐的腳本語言。

Node對一些特殊用例進行優(yōu)化，提供替代的API，使得V8在非瀏覽器環(huán)境下運行得更好。V8引擎執(zhí)行Javascript的速度非?？?，性能非常好。Node是一個基于Chrome JavaScript運行時建立的平臺， 用于方便地搭建響應速度快、易于擴展的網(wǎng)絡應用。Node 使用事件驅動， 非阻塞I/O 模型而得以輕量和高效，非常適合在分布式設備上運行數(shù)據(jù)密集型的實時應用。

Node.js 的發(fā)展歷程

簡單的說 Node.js 就是運行在服務端的 JavaScript。

Node.js 是一個基于Chrome JavaScript 運行時建立的一個平臺。

Node.js是一個事件驅動I/O服務端JavaScript環(huán)境，基于Google的V8引擎，V8引擎執(zhí)行Javascript的速度非?？?，性能非常好。

介紹

Node.js 是一個非常新興的開發(fā)工具，它誕生自 2009 年，年齡遠不如 Python、Ruby、PHP 等老大哥，但是它確實有史以來發(fā)展最快的開發(fā)工具，沒有之一。在這短短的幾年間，我們看到了 Node.js 從當初的一無所有到如今的飛速發(fā)展，這是沒有任何其他開發(fā)工具能夠媲美的。

作者

Ryan Dahl，網(wǎng)名 ry，雖然如今已經(jīng)沒有多少人了解這一名字。是的，他就是 Node.js 的親爹，我們依稀還記得那個安裝 Node.js 需要執(zhí)行這行命令的日子。

名字的由來

其實?Node.js?最開始叫?「Web.js」（發(fā)布之前），后來因為?API?設計越來越龐大，ry?和他的團隊依稀感覺到Web.js?已經(jīng)過于狹隘了，于是就有了現(xiàn)在的名字。

Vue.js詳解

Vue.js是什么？

Vue.js是一款流行的JavaScript前端框架，一個用于創(chuàng)建用戶界面的開源JavaScript框架，旨在更好地組織與簡化Web開發(fā)。Vue所關注的核心是MVC模式中的視圖層，同時，它也能方便地獲取數(shù)據(jù)更新，并通過組件內(nèi)部特定的方法實現(xiàn)視圖與模型的交互。

Vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設計。Vue的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue完全有能力驅動采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復雜單頁應用。

Vue.js 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。

Vue.js 自身不是一個全能框架——它只聚焦于視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。另一方面，在與相關工具和支持庫一起使用時，Vue.js 也能完美地驅動復雜的單頁應用。

學習網(wǎng)站：

Node.js 和 Vue.js 的區(qū)別

一個是前端框架，一個是服務端語言。

Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環(huán)境。

Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。

Node.js 的包管理器 npm，是全球最大的開源庫生態(tài)系統(tǒng)。

Vue.js是一個構建數(shù)據(jù)驅動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API 實現(xiàn)- 響應的數(shù)據(jù)綁定和組合的視圖組件。它不僅易于上手，還便于與第三方庫或既有項目整合。

另一方面，當與單文件組件和?Vue?生態(tài)系統(tǒng)支持的庫結合使用時，Vue?也完全能夠為復雜的單頁應用程序提供驅動。

淺談原生小程序

有句話說，會使用 vue 開發(fā)的程序員就會開發(fā)小程序，確實是這樣，在我學習 vue 后，再去學習小程序時，感覺很好上手，因為很多語法都是類似的寫法。當然，也有很多不一樣的。

1.聲明 data ：用過 vue 的朋友都知道， vue 中聲明 data 時， data 必須是函數(shù)，不然會報錯，原生的小程序就不是這樣，直接 data: { } 就ok了。

2.綁定數(shù)據(jù)：綁定動態(tài)屬性時需要在屬性的雙引號里使用 {{ }}

3.列表循環(huán)：使用 wx:for ，在循環(huán)題內(nèi)有隱藏的item代表當前項， index 代表下標

4.事件 事件處理函數(shù)在page里定義，和onLoad / data等同級

事件的寫法：以 bind 或 catch 開頭，然后跟上事件的類型，如 bindtap、catchtouchstart

bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

事件的傳參：事件傳參不能事件處理通過 () 來傳遞參數(shù)，在組件里面通過自定義屬性 data-xx="參數(shù)名稱" 來定義，在事件處理函數(shù)里通過 event.currentTarget.dataset 來獲取參數(shù)

事件官方文檔

5.修改data里面的數(shù)據(jù)

在vue中，修改data里面的數(shù)據(jù)，直接【 this.屬性 】就可以修改了，可是小程序不一樣，它需要通過【 this.setData({ data: newData }) 】來修改，訪問data的中的數(shù)據(jù)用【 this.data.xx 】來訪問；一開始學習小程序的時候，習慣了[vue]()的寫法，總是寫成 vue 的法，賊難受。

6.自定義組件

更多關注 小程序官方文檔

關于基于vue的小程序開發(fā)和vue開發(fā)小程序教程的介紹到此就結束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關注本站。