WEBAPP开发之小程序01:wepy框架整合iview webapp UI-职坐标

WEBAPP开发之小程序01:wepy框架整合iview webapp UI

白羽 2018-07-19 来源：网络阅读 930 评论 0

摘要：本文将带你了解WEBAPP开发之小程序01:wepy框架整合iview webapp UI，希望本文对大家学WebApp有所帮助。

初始化wepy项目

#wepyinitstandard<项目名>
wepyinitstandardwepy-iview

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

#进入目录
cdwepy-iview/

#执行安装命令
npminstall

笔者使用的是macos系统,需要给目录权限,不然npminstall时各种权限报错
sudochmod-R755./wepy-iview

添加iviewui

首先到iviewwebappgithub下载最新的开源代码(主要是src目录下的文件)
笔者将会演示引入iview的modal样式,具体操作步骤请看下方:

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

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

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

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

使用modal组件
修改项目pages目录下的index.wpy

config引入组件
usingComponents:{
'i-modal':'../resources/ui/modal/index'
}

添加视图代码

已经成功引用了iview样式

构建dist目录及小程序开发工具预览效果

在项目根目录执行命令构建dist目录
wepybuild--no-cache

小程序开发工具新建项目并选择构建出来的dist目录