1. vant 介紹
### 掃碼體驗
Vant - 輕量、可靠的移動端 Vue 小程序 組件庫。由 有贊 公司開發與維護。提供了一系列美觀、優質的移動端組件。vant 官網
2. 在普通小程序怎么使用 vant 組件
使用之前
使用 Vant Weapp 前，請確保你已經學習過微信官方的小程序簡易教程 和自定義組件介紹
安裝
方式一. 通過 npm 安裝 (推薦)
小程序已經支持使用 npm 安裝第三方包，詳見npm 支持
# npm npm i vant-weapp -S --production # yarn yarn 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 # npm npm install npm run dev #yarn yarn yarn 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
# npm npm install axios # yarn yarn 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建立代碼規范
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
