初始化wepy项目
image
# wepy init standard <项目名>
wepy init standard wepy-iview
输出如上图所示,则创建项目成功
安装依赖包
进入项目根目录,命令行执行 npm install命令进行安装依赖包
image
# 进入目录
cd wepy-iview/
# 执行安装命令
npm install
笔者使用的是mac os系统,需要给目录权限,不然npm install时各种权限报错
sudo chmod -R 755 ./wepy-iview
添加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样式,具体操作步骤请看下方:
-
在项目中创建ui目录,方便区分管理
image -
到官方的开源代码里,拷贝
src目录下的styles目录和base到 项目ui目录中
image 到官方的开源代码里,拷贝
src目录下的modal目录到 项目ui目录中-
查看
modal需要依赖的组件,并把相关的组件都拷贝到 项目的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>已经成功引用了iview样式</view> </i-modal>
构建dist目录及小程序开发工具预览效果
-
在项目根目录执行命令构建
dist目录wepy build --no-cache -
小程序开发工具新建项目并选择构建出来的dist目录
image -
最终效果
image
