配置请求api
- 封装
在utils下新建require.js
// 默认请求方法为GET 默认data为空
function sendRequire(url,method="GET",data={
}){
// 开启loading
wx.showLoading({
title: '加载中',
})
// 新建promise对象并返回
return new Promise((resolve,reject) => {
// 创建 请求
wx.request({
url,
method,
data,
success:(res)=> {
// 成功回调
// console.log(res);
resolve(res)
},
fail(err){
// 失败
reject(err)
},
// 无论请求成功或失败都会执行此函数
complete(){
// 隐藏loading
wx.hideLoading();
}
})
})
}
// 导出
module.exports = {
request:sendRequire
}
- 使用
// 引入
let {
request } = require("../../utils/reuqire");
// 请求
request("http://elm.cangdu.org/v1/cities?type=hot").then((res) => {
console.log(res)
});
组件之间传值
定义globalData
在app.js中
App({
...
globalData: {
weather:"雪"
}
})
页面中使用
app和getApp()的作用相同
// 使用globalData
const app = getApp();
console.log(app.globalData); // 雪
// 修改
app.globalData.weather = "雨"
console.log(getApp().globalData); // 雨
引入vant
微信小程序,----------引入vant组件
- 安装vant组件库
npm i @vant/weapp -S --production
如果项目里没有package.json，手动下载npm init -y
-
修改项目中app.js
将 app.json 中的 “style”: “v2” 去除 -
需要手动在 project.config.json 内添加如下配置
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
-
点击小程序—详情-----本地设置----勾选使用npm模块
-
点击小程序工具-----构建npm
-
需要在app.json或index.json中配置 Button 对应的路径即可。
// 在app.json中引入
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}