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

Posted 2021-02-28 homehtml

初始化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. 最终效果