简单封装微信小程序
一、不同环境配置封装
新建config文件夹,根据自己有不同环境设置不同的js文件
具体js文件内容:
exports.config = {
requestHost: 'https://******.com.cn',
APPID:'*******',
Business: {
'jiaxiao': '1'
}
}
新建api.js文件(放哪里根据自己喜好),用json形式来储存接口地址:
exports.api = {
'do' : {
'login': '/merchant/do/login',
},
'payment' : {
'pay': '/V2/TokenPay/pay',
}
}
配置完成后在app.js中就可以调用了,
//app.js App({
onLaunch: function (options) {
let env = options.query.env ? options.query.env : "product";
var config = require("config/config." + env + ".js");
this.globalData = config.config;
//获取接口信息
var api = require('api.js');
}, })
在页面中调用接口时只要引入先引入
const app = getApp(); const setToken = token => {
return wx.setStorageSync('token', token);
} const getToken = () =>{
return wx.getStorageSync('token');
} const judge = () =>{
var host = app.globalData.requestHost;
// console.log(host + app.api.do.token)
wx.request({
url: host + app.api.do.token,
data: {
token: getToken() ? getToken(): ''
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
if (res.data.ret_code != 200) {
wx.navigateTo({
url: "/pages/login/index"
})
}
},
fail: function (error) {
wx.navigateTo({
url: "/pages/login/index"
})
}
})
//设置title
wx.setNavigationBarTitle({
title: wx.getStorageSync('merchantName') ? wx.getStorageSync('merchantName') : ''
})
} const get = (url, data, callback) => {
//判断是否登录、token是否过期
var host = app.globalData.requestHost;
judge(); if(data == false){
var data = {
token: wx.getStorageSync('token'),
business: app.globalData.Business.jiaxiao
}
}else{
data.token = wx.getStorageSync('token');
data.business = app.globalData.Business.jiaxiao;
}
wx.request({
url: host+url,
data: data,
header: {
'content-type': 'application/json'
},
success: res => {
callback(res);
},
})
} const post = (url, data, callback) => {
//判断是否登录、token是否过期
var host = app.globalData.requestHost;
judge();
//设置title // console.log(wx.getStorageSync('token'))
wx.setNavigationBarTitle({
title: wx.getStorageSync('merchantName') ? wx.getStorageSync('merchantName') : ''
}) if (data == false) {
var data = {
token: wx.getStorageSync('token'),
business: app.globalData.Business.jiaxiao
}
} else {
data.token = wx.getStorageSync('token');
}
// console.log(method)
wx.request({
url: host + url,
method: 'POST',
data: data,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: res => {
callback(res);
},
})
} module.exports = {
setToken: setToken,
getToken: getToken,
judge: judge,
get: get,
post: post
}
因为小程序接口都是对外的开放接口,所以会存在安全性问题,为了接口安全每次都要传一个‘token’来校验请求的安全性,上边封装的意义也在此处,不用每次都传递token了,调用也很简单:
//页面引入
var request = require('../../utils/request.js'); request.get(
app.api.pay.pay,
false, function (res) {
console.log(res)
});
//request.get(接口地址,是否有参数,结果回调)
简单封装微信小程序的更多相关文章
- 详解封装微信小程序组件及小程序坑(附带解决方案)
一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...
- [组件封装]微信小程序-图片批量上传照片墙
描述 批量上传图片, 可设置最大上传个数, 可删除, 可设置默认值. 效果 源码 pictures-wall.wxml <view class="picturesWall"& ...
- 【原创】1、简单理解微信小程序
先看下网站的运行方式: 而小程序是这样: what?就这样?是的,就这样.那小程序官方提供的Wafer,还有Wafer2...想太多了,抛弃它们吧.不应当为了解决一个简单的旧问题而去整一个复杂的新问题 ...
- 封装微信小程序支付
<?php /** * User: Eden * Date: 2019/3/21 * 共有内容 */ namespace Common\Service; use Think\Exception; ...
- 使用 async await 封装微信小程序HTTP请求
1. 编写将普通回调函数形式的方法转换为promise方法的promisic方法 // util.js const promisic = function (func) { return functi ...
- promise封装微信小程序的request
1.在utils下创建一个 request.js文件,然后将方法导出 const app = getApp(); //使用promise封装request请求 const POST = (url, p ...
- [组件封装]微信小程序-底部弹框
描述 模仿ios浏览器底部弹框效果. 遮罩层淡入淡出,弹框高度根据内容自适应. 效果 源码 popup-bottom.wxml <!-- popup-bottom.wxml --> < ...
- [组件封装]微信小程序-日历
描述 切换月份, 当天文案为今天, 日期背景变色, 日期红点标识, 点击选中日期. 效果 源码 calendar.wxml <view class="component"&g ...
- 详解微信小程序开发(项目从零开始)
一.序 微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍一下小程序开发.注意,这里只从项目代码上做解析,不涉及小程序如何申请.打包.发布的东西.(这些跟着微信官方文档的流程走就好). ...
随机推荐
- Springboot的Bean的Scope
这周在项目中遇到这样一个Bug,代码大致是这样的,有一个LogEntity日志类,里面有一个InnerLog负责存储每次请求的RPCInfo相关信息, 每次请求的时候会把RPC相关信息加入到Inner ...
- SpringBoot中@EnableAutoConfiguration注解用法收集
参考: http://blog.csdn.net/xiaoyu411502/article/details/52770723 https://docs.spring.io/spring-boot/do ...
- Maven的构建生命周期理解
以下引用官方的生命周期解释https://maven.apache.org/guides/introduction/introduction-to-the-lifecycle.html: 一.构建生命 ...
- 分布式缓存之Memcache
〇.为什么要用分布式缓存 1.软件从单机到分布式 走向分布式第一步就是解决:多台机器共享登录信息的问题. 例如:现在有三台机器组成了一个Web的应用集群,其中一台机器用户登录,然后其他另外两台机器共享 ...
- Android基础新手教程——3.7 AnsyncTask异步任务
Android基础新手教程--3.7 AnsyncTask异步任务 标签(空格分隔): Android基础新手教程 本节引言: 本节给大家带来的是Android给我们提供的一个轻量级的用于处理异步任务 ...
- Samp免流软件以及地铁跑酷的自校验分析
[文章标题]:Samp免流软件以及地铁跑酷的自校验分析 [文章作者]: Ericky [作者博客]: http://blog.csdn.net/hk9259 [下载地址]: 自行百度 [保护方式]: ...
- jsp网页在浏览器中不显示图片_eclipse环境下配置tomcat中jsp项目的虚拟路径
遇到的问题是这种,在jsp网页中嵌入了本地的图片,由于会用到上传到服务器的图片,所以没有放到项目里面,而是把全部图片单独放到一个文件夹里,然后打算使用绝对路径把要显示的图片显示出来.比方是放在了E盘的 ...
- 使用cacheBuilder时捕获内部指定异常
由于cacheBuilder是另起线程获取,对call方法中的抛出的异常进行了封装.所以我们在最外层捕获时是无法直接指定异常类型捕获的, 获取异常的原因判断实例类型 public static voi ...
- Eclipse 修改字符集
Eclipse 修改字符集 默认情况下 Eclipse 字符集为 GBK,但现在很多项目采用的是 UTF-8,这是我们就需要设置我们的 Eclipse 开发环境字符集为 UTF-8, 设置步骤如下: ...
- MySQL 查询某个列中同样值的数量统计
数据如今是这种,我想确定出type列中的news和image....甚至以后有其它值,他们分别有多少个. SELECT type, count(1) AS counts FROM material G ...