初始化wepy項(xiàng)目

image

# wepy init standard <項(xiàng)目名>
wepy init standard wepy-iview

輸出如上圖所示,則創(chuàng)建項(xiàng)目成功

安裝依賴(lài)包

進(jìn)入項(xiàng)目根目錄,命令行執(zhí)行 npm install命令進(jìn)行安裝依賴(lài)包

image

# 進(jìn)入目錄
cd wepy-iview/

# 執(zhí)行安裝命令
npm install

筆者使用的是mac os系統(tǒng),需要給目錄權(quán)限,不然npm install時(shí)各種權(quán)限報(bào)錯(cuò)
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下載最新的開(kāi)源代碼(主要是src目錄下的文件)

筆者將會(huì)演示引入 iview 的 modal樣式,具體操作步驟請(qǐng)看下方:

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

   
   
   image

2. 到官方的開(kāi)源代碼里,拷貝src目錄下的 styles目錄和base到 項(xiàng)目 ui目錄中
   

   image

3. 到官方的開(kāi)源代碼里,拷貝src目錄下的modal目錄到 項(xiàng)目ui目錄中

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

   image
   
   
   image

使用 modal 組件

修改項(xiàng)目pages目錄下的index.wpy

1. config引入組件

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

2. 添加視圖代碼

   <i-modal title="標(biāo)題" visible="{{ true }}" show-ok="{{true}}" ok-text="好樣的" show-cancel="{{false}}">
     <view>已經(jīng)成功引用了iview樣式</view>
   </i-modal>
   

構(gòu)建dist目錄及小程序開(kāi)發(fā)工具預(yù)覽效果

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

   wepy build --no-cache
   

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

   
   
   image

3. 最終效果

   
   
   image