初始化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樣式,具體操作步驟請看下方:

1. 在項目中創(chuàng)建ui目錄,方便區(qū)分管理

   
   
   image

2. 到官方的開源代碼里,拷貝src目錄下的 styles目錄和base到 項目 ui目錄中
   

   image

3. 到官方的開源代碼里,拷貝src目錄下的modal目錄到 項目ui目錄中

4. 查看modal需要依賴的組件,并把相關(guān)的組件都拷貝到 項目的 ui目錄中,最后如下圖所示
   

   image
   
   
   image

使用 modal 組件

修改項目pages目錄下的index.wpy

1. config引入組件

   usingComponents: {
       'i-modal': '../resources/ui/modal/index'
   }
   

2. 添加視圖代碼

   <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ù)覽效果

1. 在項目根目錄執(zhí)行命令構(gòu)建dist目錄

   wepy build --no-cache
   

2. 小程序開發(fā)工具新建項目并選擇構(gòu)建出來的dist目錄

   
   
   image

3. 最終效果

   
   
   image