寫了近兩年小程序了，越來越發現原生小程序有太多雞肋的地方。所以今天準備嘗試一下wepy，正好最近手上有個外包，可以拿來練手。如果可以的話，或許會出一系列wepy相關的文章（偏實戰），歡迎大佬們指正。

安裝wepy-cli

npm install wepy-cli -g wepy --version //查看版本，這里是1.7.3復制代碼

根據文檔介紹，wepy-cli在1.7.0之前和1.7.0之后是有區別的，這里使用的是1.7.3，所以下面的都是基于wepy-cli 1.7.3版本

初始化項目

wepy init standard demo1 復制代碼

接下來就會彈出一系列的配置選項，按照自己的需求添加就行啦，最簡單的直接全選。選完之后，會輸出一個：

wepy-cli · Generated "demo1". 復制代碼

一個標準的名為demo1的wepy項目就創建完成了。該項目會幫我們默認開啟promise、async等功能。如果需要安裝一個簡單的空模板，將wepy init standard demo1換成wepy init empty demo1即可。

運行項目

項目創建完成了，現在需要在微信開發者工具上查看下效果。

wepy build -w 復制代碼

上面命令表示編譯，然后監聽文件的變化。但是這個時候坑爹的報錯了，提示:

未發現相關 less 編譯器配置，請檢查wepy.config.js文件。 復制代碼

根據報錯可以知道，這是因為缺少less相關的包導致的，執行下面命令可以解決：

npm install less -d 復制代碼

然后再試試

wepy build -w 復制代碼

輸出開始監聽文件改動。。OK！現在可以打開微信開發者工具了，導入項目下面的dist目錄，然后appid的話，有就填上，沒有可以點擊測試。
不出意外的話，它又會報錯，大概是下面這樣的。

后來查閱文檔之后發現，原因出在開發工具上面默認開啟了ES6轉ES5，手動關閉就好了。

再次編譯，然后查看。就會看到如下的界面：

嘗試一下empty模板

• empty模板，的目錄結構如下：

• standard目錄機構如下：

對于學習而言，建議使用standard，因為其中部分安利給我們參考，不知道的時候可以看看官方的寫法。

直接下載案例

除了以上兩個基本的模板以外，官方還提供了其他的幾個demo給我們作為參考，也可以直接拉取下來看看:

結尾

一個簡單的wepy項目就這么搭建完成了，總體來講還是很省心的。

總結

以上是生活随笔為你收集整理的wepy学习笔记之环境搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。