小程序01:wepy框架整合iview webapp UI

初始化wepy項目

# wepy init standard <項目名>
wepy init standard wepy-iview

輸出如上圖所示,則建立項目成功

安裝依賴包

進入項目根目錄,命令行執行 npm install命令進行安裝依賴包

# 進入目錄
cd wepy-iview/

# 執行安裝命令
npm install

筆者使用的是mac os系統,須要給目錄權限,否則npm install時各類權限報錯

添加iview ui

iview webapp官網: https://weapp.iviewui.com/docs/guide/start
iview webapp gihub: https://github.com/TalkingData/iview-weapp

首先到 iview webapp github下載最新的開源代碼(主要是src目錄下的文件)

筆者將會演示引入 iview 的 modal樣式,具體操做步驟請看下方:

1. 在項目中建立ui目錄,方便區分管理
   
2. 到官方的開源代碼裏,拷貝src目錄下的 styles目錄和base到 項目 ui目錄中
   
3. 到官方的開源代碼裏,拷貝src目錄下的modal目錄到 項目ui目錄中
4. 查看modal須要依賴的組件,並把相關的組件都拷貝到 項目的 ui目錄中,最後以下圖所示
   

使用 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>已經成功引用了iview樣式</view>
   </i-modal>

構建dist目錄及小程序開發工具預覽效果

1. 在項目根目錄執行命令構建dist目錄

   wepy build --no-cache

2. 小程序開發工具新建項目並選擇構建出來的dist目錄
   
3. 最終效果