初始化wepy項目
image
# wepy init standard <項目名>
wepy init standard wepy-iview
輸出如上圖所示,則創(chuàng)建項目成功
安裝依賴包
進入項目根目錄,命令行執(zhí)行 npm install命令進行安裝依賴包
image
# 進入目錄
cd wepy-iview/
# 執(zhí)行安裝命令
npm install
筆者使用的是mac os系統(tǒng),需要給目錄權(quán)限,不然npm install時各種權(quán)限報錯
sudo chmod -R 755 ./wepy-iview
添加iview ui
iview webapp官網(wǎng): https://weapp.iviewui.com/docs/guide/start
iview webapp gihub: https://github.com/TalkingData/iview-weapp
首先到 iview webapp github下載最新的開源代碼(主要是src目錄下的文件)
筆者將會演示引入 iview 的 modal樣式,具體操作步驟請看下方:
-
在項目中創(chuàng)建ui目錄,方便區(qū)分管理
image -
到官方的開源代碼里,拷貝
src目錄下的styles目錄和base到 項目ui目錄中
image 到官方的開源代碼里,拷貝
src目錄下的modal目錄到 項目ui目錄中-
查看
modal需要依賴的組件,并把相關(guān)的組件都拷貝到 項目的ui目錄中,最后如下圖所示
image
image
使用 modal 組件
修改項目pages目錄下的index.wpy
-
config引入組件
usingComponents: { 'i-modal': '../resources/ui/modal/index' } -
添加視圖代碼
<i-modal title="標題" visible="{{ true }}" show-ok="{{true}}" ok-text="好樣的" show-cancel="{{false}}"> <view>已經(jīng)成功引用了iview樣式</view> </i-modal>
構(gòu)建dist目錄及小程序開發(fā)工具預(yù)覽效果
-
在項目根目錄執(zhí)行命令構(gòu)建
dist目錄wepy build --no-cache -
小程序開發(fā)工具新建項目并選擇構(gòu)建出來的dist目錄
image -
最終效果
image
