1. vant 介绍
Vant - 轻量、可靠的移动端 Vue 小程序 组件库。由有赞公司开发与维护。提供了一系列美观、优质的移动端组件。 vant 官网
2. 在普通小程序怎么使用 vant 组件
使用之前
使用 Vant Weapp 前，请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍
安装
方式一. 通过 npm 安装 (推荐)
小程序已经支持使用 npm 安装第三方包，详见 npm 支持
# npmnpm i vant-weapp -S--production# yarnyarnaddvant-weapp--production
方式二. 下载代码
直接通过 git 下载 Vant Weapp 源代码，并将dist或lib目录拷贝到自己的项目中
gitclonehttps://github.com/youzan/vant-weapp.git
使用组件
以按钮组件为例，只需要在 json 文件中引入按钮对应的自定义组件即可
某些小程序框架会要求关闭ES6转ES5选项，可以引入lib目录内es5版本的组件
es6
"usingComponents": {"van-button":"/path/to/vant-weapp/dist/button/index"}
es5
"usingComponents": {"van-button":"/path/to/vant-weapp/lib/button/index"}
接着就可以在 wxml 中直接使用组件
按钮
在开发者工具中预览示例小程序
#安装项目依赖npminstall#执行组件编译npmrun dev
3. 使用 mpvue
mpvue （github 地址请参见） 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
初始化一个 mpvue 项目
如果没有安装vue-cli，先安装vue-cli
npminstall --globalvue-cli
创建一个基于 mpvue-quickstart 模板的新项目
vue init mpvue/mpvue-quickstartmy-project
安装依赖
cdmy-project# npmnpminstallnpmrun dev#yarnyarnyarnstart
4. 在 mpvue 里使用 less
下载 less 到项目中
npminstalllessless-loader--save
导入 loader
在 webpack.base.conf.js 里 rules 里添加一条规则
{test: /.less$/, loader:"style-loader!css-loader!less-loader"},
在 mpvue 里使用 axios
axios 介绍
axios 是一个易用、简洁且高效的 http 库,使用 Promise 管理异步，告别传统 callback 方式, 支持拦截器等高级配置
安装 axios
# npm
npm install axios# yarnyarnadd axios
使用 axios
import axios from'axios'
functionget(url,params) {returnaxios({method:'get', url:url, params:params })}functionpost(url,params) {returnaxios({method:'post', url:url, data:params })}
为 axios 配置拦截器
// axios拦截器functionInstance(){//请求拦截器axios.interceptors.request.use(function( request ){// request.headers.token = 'token=11124654654687';// console.log(request) //请求成功returnrequest },function( error ){// console.log(error); //请求失败returnPromise.reject(error); });//添加响应拦截器axios.interceptors.response.use(function( response ){console.log(response.data.data)//响应成功returnresponse; },function( error ){// console.log(error); //响应失败returnPromise.reject(error); });}
axios 配置请求函数
axios.defaults.timeout =30000;axios.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded;charset=UTF-8';axios.defaults.adapter =function(config){returnnewPromise((resolve, reject) =>{// console.log(config,'adapter')letdata = config.method ==='get'? config.params : qs.stringify(config.data)// wx小程序发起请求相应log就可以看到熟悉的返回啦wx.request({url:config.url,method:config.method,data:data,success:(res)=>{returnresolve(res)},fail:(err)=>{returnreject(err)} }) })}
关注前端撸客公众号