iOS 圖片加載框架-SDWebImage 解讀

前段時間,美團開源了mpvue這個項目,使得咱們又多了一種用來開發小程序的框架選項。因爲mpvue框架是徹底基於Vue框架的(重寫了其runtime和compiler),所以在用法上面是高度和Vue一致的(某些功能因爲受限於小程序環境自己的緣由而不能使用),這給使用過Vue開發Web應用的前端開發者提供了極低的切換門檻來開發小程序。html

iOS 圖片加載框架-SDWebImage 解讀 若是以前還不曾用過Vue這個框架的話,建議你能夠 加咱們QQ羣668041364,一塊兒交流學習前端

起手式:必要的開發環境vue

工欲善其事必先利其器!在開始寫代碼以前,請確保你已經安裝了必要的開發環境和工具,如下是幾個必需的和可選的工具:node

1)node.jsredis

如今,前端工具鏈基本都依賴Node.js,因此請率先安裝它吧。vue-cli

下載地址:nodejs.org/en/download…npm

安裝完成後,打開你的命令行輸入以下命令,驗證安裝是否成功:小程序

node --version //成功的話輸出相似:v10.6.0微信小程序

npm --version //成功的話輸出相似:6.1.0 而後,咱們須要執行如下命令,將npm的下載源切換到國內淘寶的鏡像,以提升下載時的速度和成功率:微信

npm set registry registry.npm.taobao.org/ 2)vue-cli

vue-cli是一個vue專用的項目腳手架工具,能夠用於方便的建立vue項目骨架代碼,包括咱們要講到的mpvue的項目代碼。咱們能夠經過安裝node.js后里麪包含的npm工具來安裝vue-cli,在命令行輸入以下命令:

npm install vue-cli -g 安裝完成後,輸入以下命令進行驗證:

vue // 成功的話會輸出以下內容: // Usage: vue [options] // // Options: // // -V, --version output the version number // -h, --help output usage information // // Commands: // // init generate a new project from a template // list list available official templates // build prototype a new project // create (for v3 warning only) // help [cmd] display help for [cmd] 3)微信開發者工具

這個工具是開發、調試和模擬運行微信小程序的最核心的工具了,因此必須安裝。

下載地址:developers.weixin.qq.com/miniprogram…

4)Visual Studio Code + Vetur

Visual Studio Code(簡稱vscode)是如今很是流行的一個輕量級代碼編輯器,擁有很是多好用的輔助開發插件,在個人文章中我都會使用這個編輯器來編輯代碼。固然,好用的代碼編輯器有不少,好比Sublime Text、WebStorm等,一樣能夠達到咱們的開發目的,你也儘管用你本身最喜歡的代碼編輯器來寫代碼就好了。

下載地址:code.visualstudio.com

安裝完vscode後,在它的插件管理器中,查找Vetur並安裝,而後重啓一下vscode後,插件即生效:

iOS 圖片加載框架-SDWebImage 解讀 安裝Vetur插件

Vetur是一款能夠提供Vue語法高亮、語法檢查和代碼快捷輸入等功能的插件,能夠爲咱們的開發過程提供不少便利。

建立第一個基於mpvue的小程序項目代碼

花了點時間裝好了必要的開發環境,下面咱們就來建立咱們的第一個mpvue小程序項目。這裏將用到前面已安裝的vue-cli:

vue init mpvue/mpvue-quickstart firstapp 命令行將一步步的引導咱們選擇或填寫項目的配置信息,若是你還不太明白這些內容的含義,能夠先直接所有按回車:

? Project name firstapp ? wxmp appid touristappid ? Project description A Mpvue project ? Author kevinzhang kevin.zhang@moredist.com ? Vue build runtime ? Use Vuex? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? 小程序測試,敬請關注最新微信開發者工具的「測試報告」功能 vue-cli · Generated "firstapp".

To get started:

cd firstapp npm install npm run dev

Documentation can be found at mpvue.com 這個過程vue-cli主要是先從遠程的代碼倉庫中下載了一份註冊名爲mpvue/mpvue-quickstart的模板代碼,而後根據開發者在命令行提示過程當中輸入的信息,生成一份通過配置後的代碼。

這份代碼暫時還運行不起來,由於它還缺乏依賴的庫,咱們須要執行如下命令進行依賴庫的安裝:

cd firstapp npm install 通過幾分鐘的下載安裝,依賴庫安裝到了firstapp目錄下,你能夠看到該目錄下多出了一個node_modules目錄。

而後,執行命令讓這個代碼運行起來,進入開發模式:

npm run dev 成功運行後,這個項目代碼就進入開發模式,一旦有源代碼發生修改,就會觸發自動編譯。由於mpvue使用的是Vue + HTML Web的開發方式開發小程序,它最終仍是須要被轉換成小程序的代碼才能夠在小程序環境運行,因此這裏的自動編譯的目的就是要把Web代碼編譯成小程序代碼。編譯後的代碼會在dist目錄下:

iOS 圖片加載框架-SDWebImage 解讀 運行並查看結果

上面的步驟中,咱們開啓開發模式後,其實並不能看到小程序的執行效果,要真正看小程序的運行界面的話,咱們仍是要藉助微信開發者工具。

打開微信開發者工具,選擇新增項目:

iOS 圖片加載框架-SDWebImage 解讀 項目目錄選擇指向firstapp目錄:

iOS 圖片加載框架-SDWebImage 解讀 點擊「肯定」按鈕,進入小程序開發主界面,在左邊的小程序模擬器中就能看到firstapp小程序的執行結果了:

iOS 圖片加載框架-SDWebImage 解讀 【提醒】記得在微信開發者工具的菜單》設置 》編輯設置 中,將「保存時自動編譯小程序」勾選上,這樣當mpvue的代碼自動編譯完成後,模擬器纔會自動刷新界面。

iOS 圖片加載框架-SDWebImage 解讀 小結

本文先簡要介紹一下使用mpvue開發小程序的前期準備,在後面的文章中將一步步講解mpvue的詳細用法。

相關文章
相關標籤/搜索