uni-app开发微信小程序引入vantWeapp库 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

uni-app开发微信小程序引入vantWeapp库

发表时间:2021-1-4

发布人:葵宇科技

浏览次数:79

为什么使用nui-app开发微信小程序呢?

  • 一次开发,多端发布
  • 防止源码反编译,增加安全性
  • 提供插件市场,ui库,丰富的周边生态

确实是优点多多,所以打算用uni-app开发一款微信小程序,奈何首席ui设计师小姐姐不喜欢nui-app自带的ui库,却一眼相中了vant的组件样式,于是开始了舍近求远的引入VantWeapp的征程

特别注意 vant自己是不跨端的.千万不要搞错了.引入Vant的h5 ui库,只能在h5使用. app和小程序需要用Vant Weapp.Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。


一.建立nui-app新项目


二.运行微信开发者工具

image.png

运行到小程序模拟器>>微信开发者工具

如果无法打开请先进行配置 1.在工具>>设置中配置微信开发者工具的路径 2.在微信开发者工具中设置>安全设置开启服务端口 再次运行微信呢开发者工具,hbuilder就自动将创建的小程序更新到微信开发者工具

image.png

此时发现nui-app编译多出一个nupackge文件夹(红框),而绿框中的代码正是运行在微信开发者工具中的

image.png

三.引入Vant Weapp组件库

1.进入unpackage/dist/ dev/mp-weixin文件夹下,执行npm init初始化一个package.js文件

npm init
复制代码

2.在unpackage/dist/ dev/mp-weixin文件夹下,执行npm i vant-weapp -S --production,完成Vant Weapp的下载

npm i @vant-weapp -S --production
复制代码

3.在微信开发者工具中,点击右上角详情>本地设置勾选ES6转ES5使用npm模块 4.在微信开发者工具中,点击菜单栏工具>构建npm,等待构建完成


四.使用Vant Weapp组件库

在uni-app项目的根目录下,在pages.json中注册组件声明

"usingComponents": {
  "van-button" : "@vant/weapp/button/index"
}
复制代码

image.png

在对应index.vue页面中使用该组件

警告按钮
复制代码

image.png


五.查看页面效果

image.png

大功告成!!!

作者:harold1024
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关案例查看更多