微信小程序的api封装思路 和 电商项目的登录思路

一 、微信小程序的api封装思路

总体分为三大块

1. 环境地址的统一

//env.js
module.exports={
//开发环境
dev:{
baseUrl:'http://127.0.0.1:8080'
},
//生产环境
prod:{
baseUrl:'https://api.it120.cc'
},
//测试环境
test:{
baseUrl:'https://api.1909A.com'
}
}

1. 业务数据的请求的方法统一

//api.js
const { request }=require('./request.js');

//项目中用到的各种业务接口的封装

module.exports={
//商品分类接口
goodsCate:()=> {

return request('shop/goods/category/all','GET','',true)

},
//商品详情接口
getDetail:(id)=>{

return request('shop/goods/detail','GET',{id:id},true)
},
//其他接口....

}

1. 请求的封装

//request.js 针对wx.requeste的二次封装
const { baseUrl } = require('./env.js').prod
//封装ajax

const vipUrl = 'hjl'

module.exports = {

request: function (url, method = "GET", data = {}, isSubDomain = true) {

let fullUrl = `${baseUrl}/${isSubDomain ? vipUrl : ''}/${url}`;

wx.showLoading({
title: '玩命加载中',
})

return new Promise((resolve, reject) => {

wx.request({
url: fullUrl,
method,
data,
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
success(res) {
// console.log('res::',res)
if (res.statusCode === 200 && res.data.code === 0) {
resolve(res.data.data)

wx.hideLoading()
} else {
wx.showToast({
title: '接口有问题，请检查',
})
reject('接口有问题，请检查')
}
},
fail(error) {
wx.showToast({
title: '数据接口有问题',
})
reject('数据接口有问题')

}
})

})

}

}

二、电商项目登录思路

1. 由小程序的方法调用wx.login()获取code传到开发者服务器
2. 开发者将 appid appsecret code 等数据传到微信官方服务器
3. 官方服务器传回处理后数据 例如sessi_key openid 等数据
4. 关联数据后返回自定义登录态，到小程序
5. 再将自定义登录态存入storage（本地） 再用wx.request发起请求并携带自定义登录态
6. 请求到开发者服务器查询openid 和 session_key
7. 再返回数据到小程序