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

2022-05-16 IT知识小程序 webapp 框架整合

【小程序01:wepy框架整合iview webapp UI】宝剑锋从磨砺出，梅花香自苦寒来。这篇文章主要讲述小程序01:wepy框架整合iview webapp UI相关的知识，希望能为你提供帮助。
初始化wepy项目

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

文章图片

# wepy init standard < 项目名> wepy init standard wepy-iview

输出如上图所示,则创建项目成功
安装依赖包进入项目根目录,命令行执行 npm install命令进行安装依赖包

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

文章图片

# 进入目录 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样式,具体操作步骤请看下方:

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

文章图片
到官方的开源代码里,拷贝src目录下的 styles目录和base到项目 ui目录中

文章图片
到官方的开源代码里,拷贝src目录下的modal目录到项目ui目录中
查看modal需要依赖的组件,并把相关的组件都拷贝到项目的 ui目录中,最后如下图所示

文章图片

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

文章图片

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

文章图片
最终效果

文章图片

推荐阅读

上一篇：@SpringBootApplication(exclude={DataSourceAutoConfiguration.class})注解作用

下一篇：Android集成百度地图