1. vant 介紹
### 掃碼體驗
Vant - 輕量、可靠的移動端 Vue 小程序 組件庫。由 有贊 公司開發與維護。提供了一系列美觀、優質的移動端組件。vant 官網
2. 在普通小程序怎么使用 vant 組件
使用之前
使用 Vant Weapp 前，請確保你已經學習過微信官方的小程序簡易教程 和自定義組件介紹
安裝
方式一. 通過 npm 安裝 (推薦)
小程序已經支持使用 npm 安裝第三方包，詳見npm 支持
# npmnpm i vant-weapp -S --production# yarnyarn add vant-weapp --production
方式二. 下載代碼
直接通過 git 下載 Vant Weapp 源代碼，并將 dist 或 lib 目錄拷貝到自己的項目中
git clone https://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 中直接使用組件
<van-button type="primary">按鈕</van-button>
在開發者工具中預覽示例小程序
# 安裝項目依賴npm install# 執行組件編譯npm run dev
3. 使用 mpvue
mpvue （github 地址請參見） 是一個使用 Vue.js 開發小程序的前端框架?？蚣芑?Vue.js 核心， mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其可以運行在小程序環境中，從而為小程序開發引入了整套 Vue.js 開發體驗。
初始化一個 mpvue 項目
如果沒有安裝 vue-cli ，先安裝 vue-cli
npm install --global vue-cli
創建一個基于 mpvue-quickstart 模板的新項目
vue init mpvue/mpvue-quickstart my-project
安裝依賴
cd my-project# npmnpm installnpm run dev#yarnyarnyarn start
4. 在 mpvue 里使用 less
下載 less 到項目中
npm install less less-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
# npmnpm install axios# yarnyarn add axios
使用 axios
import axios from 'axios'function get (url,params) { return axios({ method:'get', url:url, params:params })}function post (url,params) { return axios({ method:'post', url:url, data:params })}為 axios 配置攔截器
// axios 攔截器function Instance () { //請求攔截器 axios.interceptors.request.use(function ( request ) { // request.headers.token = 'token=11124654654687'; // console.log(request) //請求成功 return request }, function ( error ) { // console.log(error); //請求失敗 return Promise.reject(error); }); // 添加響應攔截器 axios.interceptors.response.use(function ( response ) { console.log(response.data.data) //響應成功 return response; }, function ( error ) { // console.log(error); //響應失敗 return Promise.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) { return new Promise((resolve, reject) => { // console.log(config,'adapter') let data = config.method === 'get' ? config.params : qs.stringify(config.data) // wx小程序 發起請求相應 log 就可以看到熟悉的返回啦 wx.request({ url:config.url, method:config.method, data:data, success:(res)=>{ return resolve(res)}, fail:(err)=>{return reject(err)} }) })}5. 在 mpvue 里配置 eslint
eslint 的配置請移步 webpack項目使用eslint建立代碼規范
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
