集成进第三方的UI框架其实很简单

这里把vant-weapp的dist目录重命名为vant-weapp放在项目根目录的static文件夹下:

在src文件夹下,即我们写vue代码的位置,正在编写的页面中添加main.json文件(vue代码编译成小程序代码时会直接使用这个文件)

{
"usingComponents": {
"van-button": "/static/vant-weapp/button/index"
//这个路径是指根目录下static文件中...
}
}

在index.vue中使用

<van-button type="default">测试按钮</van-button>
<van-button type="primary">测试主要按钮</van-button>
<van-button type="warning">测试警告按钮</van-button>
<van-button type="danger">测试危险按钮</van-button>

mpvue小程序开发之 集成第三方UI框架Vant Weapp UI的更多相关文章

  1. 第一个mpvue小程序开发总结

    前言 说起小程序,其实在去年我都还只试着照着官方文档写过demo的,不过现在这家公司小程序做得比较多,我来之后也参与了几个小程序的开发了,最开始那几个是用的wepy,最近一个开始转用mpvue开发,最 ...

  2. mpvue 小程序开发之 数据埋点统计

    mpvue 小程序开发之 数据埋点统计 在开发过程中,有数据统计的需求,需要获取小程序当前页面和来源页面的数据,以及页面的停留时间 在对小程序api进行了一番研究之后,发现获取这些数据其实并不难 当前 ...

  3. mpvue小程序开发

    查阅资料,看官方文档,知道mpvue是一个使用 Vue.js 开发小程序的前端框架(美团的开源项目).框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compi ...

  4. mpvue小程序开发之 城市定位

    背景: 在进行小程序开发时,有一个定位城市的需求,下面就来讲讲怎么实现这个功能的吧 解决方案: 小程序的wx.getLocation()获得是经纬度并不包含地名,所以要通过经纬度用相应的地图转换出地名 ...

  5. 微信小程序开发系列六:微信框架API的调用

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

  6. mpvue小程序开发入门级指南

    报错指南 "Error: ERR_GET_SESSION_KEY {"code":5100,"message":"(-1)服务内部错误,请稍 ...

  7. mpvue 小程序开发爬坑汇总

    <!-- 小程序的爬坑记录 --> 1 微信小程序之动态获取元素宽高 var obj=wx.createSelectorQuery(); 2 微信小程序图片自适应 <image cl ...

  8. 小程序开发:用Taro搭建框架

    1.node环境 1) 下载 . 官方地址:https://nodejs.org/en/ 或 https://nodejs.org/zh-cn/ 2)安装. 一路next......Install.直 ...

  9. mpvue小程序开发tips(1)

    wx.setStorageSync('vipId',vipId)-----存储   wx.getStorageSync('vipId')-------读取   wx.navigateTo({ url: ...

随机推荐

  1. Supported method argument types Spring MVC

    Supported method argument types The following are the supported method arguments: Request or respons ...

  2. ajax跨域问题(php)

    ajax出现请求跨域错误问题,主要原因就是因为浏览器的"同源策略". 解决方法(我只用过下面这3种): 1. 架设服务器代理:即浏览器请求同源服务器,再由后者请求外部服务(之前博主 ...

  3. 当Ucenter和应用通信失败

    http://blog.sina.com.cn/s/blog_775f158f010135uz.html 失败是常见的. 对于初次接触Ucenter的人来讲,添加一个自己的应用最头疼的就是发现通信失败 ...

  4. 浅谈cookie,sessionStorage和localStorage

    cookie:cookie在浏览器和服务器间来回传递 cookie数据不能超过4k 同时每次http请求都会携带cookie,所以cookie只适合保存很小的数据,比如会话标识 cookie只在设置的 ...

  5. 在Windows Server 2008 R2下搭建jsp环境(三)-Tomcat的下载安装

    1.百度搜索"Tomcat官网",点击有标志的官网进入,准备下载官方正版Tomcat. 2.进入Tomcat官网之后,在左边我们看到,Tomcat的有6,7,8这三个最流行的版本, ...

  6. float_array.go

    )         if err != nil {             log.Fatalf("Could not parse: %s", s)             ret ...

  7. 一类SG函数递推性质的深入分析——2018ACM陕西邀请赛H题

    题目描述 定义一种有根二叉树\(T(n)\)如下: (1)\(T(1)\)是一条长度为\(p\)的链: (2)\(T(2)\)是一条长度为\(q\)的链: (3)\(T(i)\)是一棵二叉树,它的左子 ...

  8. BZOJ_1345_[Baltic2007]序列问题Sequence_单调栈

    BZOJ_1345_[Baltic2007]序列问题Sequence_单调栈 Description 对于一个给定的序列a1,…,an,我们对它进行一个操作reduce(i),该操作将数列中的元素ai ...

  9. BZOJ_2788_[Poi2012]Festival_差分约束+tarjan+floyed

    BZOJ_2788_[Poi2012]Festival_差分约束+tarjan+floyed Description 有n个正整数X1,X2,...,Xn,再给出m1+m2个限制条件,限制分为两类: ...

  10. BZOJ_1180_[CROATIAN2009]OTOCI_LCT

    BZOJ_1180_[CROATIAN2009]OTOCI_LCT Description 给出n个结点以及每个点初始时对应的权值wi.起始时点与点之间没有连边.有3类操作:  1.bridge A ...