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

安裝wepy-cli

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

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

初始化項(xiàng)目

wepy init standard demo1 復(fù)制代碼

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

wepy-cli · Generated "demo1". 復(fù)制代碼

一個(gè)標(biāo)準(zhǔn)的名為demo1的wepy項(xiàng)目就創(chuàng)建完成了。該項(xiàng)目會(huì)幫我們默認(rèn)開啟promise、async等功能。如果需要安裝一個(gè)簡單的空模板，將wepy init standard demo1換成wepy init empty demo1即可。

運(yùn)行項(xiàng)目

項(xiàng)目創(chuàng)建完成了，現(xiàn)在需要在微信開發(fā)者工具上查看下效果。

wepy build -w 復(fù)制代碼

上面命令表示編譯，然后監(jiān)聽文件的變化。但是這個(gè)時(shí)候坑爹的報(bào)錯(cuò)了，提示:

未發(fā)現(xiàn)相關(guān) less 編譯器配置，請檢查wepy.config.js文件。 復(fù)制代碼

根據(jù)報(bào)錯(cuò)可以知道，這是因?yàn)槿鄙賚ess相關(guān)的包導(dǎo)致的，執(zhí)行下面命令可以解決：

npm install less -d 復(fù)制代碼

然后再試試

wepy build -w 復(fù)制代碼

輸出開始監(jiān)聽文件改動(dòng)。。OK！現(xiàn)在可以打開微信開發(fā)者工具了，導(dǎo)入項(xiàng)目下面的dist目錄，然后appid的話，有就填上，沒有可以點(diǎn)擊測試。
不出意外的話，它又會(huì)報(bào)錯(cuò)，大概是下面這樣的。

后來查閱文檔之后發(fā)現(xiàn)，原因出在開發(fā)工具上面默認(rèn)開啟了ES6轉(zhuǎn)ES5，手動(dòng)關(guān)閉就好了。

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

嘗試一下empty模板

• empty模板，的目錄結(jié)構(gòu)如下：

• standard目錄機(jī)構(gòu)如下：

對于學(xué)習(xí)而言，建議使用standard，因?yàn)槠渲胁糠职怖o我們參考，不知道的時(shí)候可以看看官方的寫法。

直接下載案例

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

結(jié)尾

一個(gè)簡單的wepy項(xiàng)目就這么搭建完成了，總體來講還是很省心的。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。