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

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序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样式,具体操作步骤请看下方:

  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. 最终效果
    技术图片

以上是关于小程序01:wepy框架整合iview webapp UI的主要内容,如果未能解决你的问题,请参考以下文章

iView Weapp微信小程序UI组件库中i-input的使用

微信小程序引入外部组件 iView Weapp

iView webapp / Mint UI / MUI [前端UI]

微信小程序:使用iView Weapp 循环创建自定义的tabbar(图文并茂)

微信小程序:使用iView Weapp 循环创建自定义的tabbar(图文并茂)

干货 | 开发者必看的webapp开发框架选择注意点