天天看點

微信小程式wepy架構入門教程-搭建開發環境(一)

wepy快速指南

小程式架構wepy開發文檔

wepy開源

wepy官方文檔

端開發架構和環境都是需要 Node.js ,先安裝node.js開發環境,WePY借鑒了Vue.js(後文簡稱Vue)的文法風格和功能特性,vue的運作是要依賴于node的npm的管理工具來實作,下載下傳https://nodejs.org/en/,安裝完成之後,打開cmd開始輸入指令。(我用的是win10系統,是以需要管理者權限,右鍵點選以管理者身份運作cmd),不然會出現很多報錯。

微信小程式wepy架構入門教程-搭建開發環境(一)

安裝成功之後顯示如下,檢視版本,安裝成功。

微信小程式wepy架構入門教程-搭建開發環境(一)

進入D盤(當然可以根據你自己的選擇來安裝路徑)全局安裝鏡像。由于npm是國外的,使用起來比較慢,我們這裡使用淘寶的cnpm鏡像來安裝vue.

淘寶的cnpm指令管理工具可以代替預設的npm管理工具。

微信小程式wepy架構入門教程-搭建開發環境(一)
微信小程式wepy架構入門教程-搭建開發環境(一)

注意版本,因為我的版本是1.7.3的

1.7.0之後的版本使用 wepy init standard myproject 初始化項目

暫時可以一路回車,後續如果遇到要做具體的項目的時候,可以根據項目需要填寫。

微信小程式wepy架構入門教程-搭建開發環境(一)

打開d盤,可以看見初始化的項目

微信小程式wepy架構入門教程-搭建開發環境(一)

目錄結構

在建立的項目裡面安裝需要的依賴包

微信小程式wepy架構入門教程-搭建開發環境(一)

安裝完成之後可以看見,檔案裡面多出了兩個依賴檔案

微信小程式wepy架構入門教程-搭建開發環境(一)
微信小程式wepy架構入門教程-搭建開發環境(一)

可以看到,剛才建立的項目

微信小程式wepy架構入門教程-搭建開發環境(一)

注意:因為小程式開發工具對wepy檔案不太友好,無法直接在開發者工具裡面打開,是以要另外選擇編輯器編寫代碼,開發者工具可進行調試和檢視效果

微信小程式wepy架構入門教程-搭建開發環境(一)

ps:簡書寫文章的一個缺陷,就是有時候在上傳markdown圖檔的過程中不能繼續使用鍵盤,等圖檔上傳好之後才可以,不然通篇文章都會消失,進入頂部重新編輯,遇到過兩三次,編輯好的文章就這樣消失了,頭疼,隻好又開始重新寫一遍,權當是加深印象咯。

原文作者:祈澈姑娘  90後前端妹子,愛程式設計,愛營運,文藝與代碼齊飛,魅力與智慧共存的程式媛一枚。 堅持總結工作中遇到的技術問題,堅持記錄工作中所所思所見,對于部落格上面有不會的問題,可以加入qq技術交流群聊:473819131。

繼續閱讀