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

【小程序01:wepy框架整合iview webapp UI】宝剑锋从磨砺出，梅花香自苦寒来。这篇文章主要讲述小程序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样式,具体操作步骤请看下方:

文章图片

使用 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目录及小程序开发工具预览效果