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

96
毛宇鹏
2018.07.19 11:30* 字数 381

初始化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样式,具体操作步骤请看下方:

  1. 在项目中创建ui目录,方便区分管理


    image
  2. 到官方的开源代码里,拷贝src目录下的 styles目录和base到 项目 ui目录中

    image

  3. 到官方的开源代码里,拷贝src目录下的modal目录到 项目ui目录中

  4. 查看modal需要依赖的组件,并把相关的组件都拷贝到 项目的 ui目录中,最后如下图所示

    image

    image

使用 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目录


    image
  3. 最终效果


    image
日记本
Gupao