微信小程序接口
- 格式:pptx
- 大小:5.69 MB
- 文档页数:74
微信小程序的移动支付接口技术探究随着移动支付的普及和发展,微信小程序的移动支付接口技术也逐渐受到广大开发者和商家的青睐。
微信小程序作为一种轻量级、快速开发的应用形式,其移动支付接口技术在为用户提供便捷购物体验的同时,也给开发者提供了更多的商业机会。
本文将对微信小程序的移动支付接口技术进行深入探究,并讨论其在实际应用中的优势和不足。
首先,微信小程序的移动支付接口技术主要包括支付宝接口和微信支付接口。
支付宝接口主要用于用户通过支付宝进行购买和支付,而微信支付接口则实现了用户可以通过微信钱包进行购买和支付的功能。
因此,微信小程序的移动支付接口技术提供了多样化的支付方式,满足了用户的不同需求。
在实际应用中,微信小程序的移动支付接口技术具有多种优势。
首先,微信小程序作为微信平台的一部分,具有强大的用户基础和社交网络。
这使得微信小程序可以通过与其他微信功能的结合来提供更好的用户体验,例如在购物完成后自动分享到用户的朋友圈,进而带动更多的用户参与和购买。
此外,微信小程序的支付接口技术支持一键支付和快速支付的功能,提供了更加快捷和便利的购买体验,有效减少了用户购物的时间和操作成本。
其次,微信小程序的移动支付接口技术在安全性方面也具备一定的优势。
微信支付接口采用了多层次的安全认证和加密措施,确保用户的支付信息不被窃取和篡改。
同时,微信小程序也要求开发者进行严格的身份认证和资质审核,使得平台上的小程序更加安全可靠。
这些安全措施为用户提供了安心购物的环境,增加了用户对微信小程序的信任度。
另外,微信小程序的移动支付接口技术还支持多种支付方式的整合。
用户可以选择使用信用卡、储蓄卡、余额支付等不同的支付方式进行购物和支付。
这种多样化的支付方式使得用户更加灵活地选择自己喜欢和习惯的支付方式,提升了用户的满意度和购买的决策自由度。
同时,这也为商家提供了更多的支付选择,满足各类用户的需求。
然而,微信小程序的移动支付接口技术仍然存在一些不足之处。
微信小程序开发中的接口调用和数据交互随着智能手机的普及和移动互联网的快速发展,微信小程序逐渐成为人们生活中不可或缺的一部分。
微信小程序的开发涉及到接口调用和数据交互,这是实现小程序功能和用户体验的关键。
一、接口调用在微信小程序开发中,接口调用是指小程序与后台服务器进行数据交互的过程。
接口调用可以分为两种方式:一种是通过微信提供的API进行调用,另一种是通过自定义接口进行调用。
1. 微信提供的API调用微信提供了一系列API,开发者可以利用这些API实现小程序的各种功能。
例如,可以通过wx.request()方法向后台服务器发送HTTP请求获取数据,通过wx.showToast()方法实现消息提示,通过wx.navigateTo()方法实现页面跳转等。
这些API的调用方式相对简单,开发者只需按照微信提供的文档进行调用即可。
2. 自定义接口调用除了使用微信提供的API,开发者还可以自定义接口进行调用。
自定义接口可以根据具体需求进行设计和开发,实现更加灵活的功能。
例如,可以设计一个自定义接口用于用户登录验证,在用户登录时向后台服务器发送请求并验证用户信息。
自定义接口的调用需要开发者自行实现,但相对于微信提供的API,自定义接口的调用可能需要更多的开发工作。
二、数据交互在微信小程序开发中,数据交互是指小程序与后台服务器之间传输数据的过程。
数据交互可以分为前端数据传输和后台数据处理两个环节。
1. 前端数据传输前端数据传输是指小程序将用户的操作和输入数据发送给后台服务器的过程。
例如,用户在小程序中填写表单并点击提交按钮,小程序将用户输入的数据通过接口调用发送给后台服务器。
前端数据传输需要注意数据的安全性和有效性,开发者应该对用户输入的数据进行校验和过滤,避免恶意攻击和非法操作。
2. 后台数据处理后台数据处理是指后台服务器接收前端传输的数据,并进行相应的处理和响应的过程。
后台服务器可以对接收到的数据进行验证、存储、计算等操作,然后将处理结果返回给小程序。
微信⼩程序使⽤讯飞接⼝语⾳识别之前看过⽹上其他⼏位使⽤讯飞的接⼝来做微信⼩程序的。
在⾃⼰实际跟着别⼈的博客做的时候,却⼜会遇到⼀些问题。
所以在此对使⽤讯飞接⼝做⼀个总结。
这⾥我是⽤WebAPI来做。
1. 申请科⼤讯飞的接⼝进⼊官⽹之后,登陆账号(如果没有,可以注册使⽤)。
登陆之后,点击右上⾓的控制台。
进⼊控制中⼼,创建新应⽤填写好信息之后便可创建⼀个新的应⽤。
之后进⼊这个应⽤,并且会在左上⾓看到三个信息:APPIDAPISecretAPIKey这三个信息是我们的程序调⽤讯飞的接⼝时⽤来验证⾝份的。
这点通过它们的名称就可以猜出来。
2. 创建微信⼩程序微信⼩程序的开发⼯具的安装和开发账号的申请我就不⽤多说了;对于微信⼩程序的⼀些⽂件的解释在官⽅⽂档中也有讲解。
这⾥对于微信⼩程序开发的⼀些基础的内容不在多说。
(1)展⽰页⾯新创建⼀个微信⼩程序后,先来写前端展⽰的页⾯:app.wxss⽂件page {height: 100%;background-color: #ffffff;}.container {height: 100%;display: flex;flex-direction: column;}index.wxml⽂件<view class="container"><view class="showContent"><view>{{searchKey}}</view></view><view class="content"><button class="btn" bindtouchstart='start' bindtouchend="stop">点击按钮说话</button></view></view>在这⾥的bindtouchstart是当按下这个按钮不松开会执⾏指定的⽅法,相同bindtouchend则是松开后执⾏指定的⽅法。
springboot集成微信⽀付APIv3接⼝实现⼩程序和公众号⽀付前⾔:⽹上有很多⼤佬们集成的综合⽀付包,做相应配置也很⽅便,我这个是基于微信官⽅⽂档流程做的直连模式,实现公众号和⼩程序⽀付(需要代码中正确使⽤appid),不得不吐槽微信的⽂档还是⼀如既往的。
1.引⼊maven依赖<dependency><groupId>com.github.wechatpay-apiv3</groupId><artifactId>wechatpay-apache-httpclient</artifactId><version>0.3.0</version></dependency><dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId><version>4.5.5</version></dependency>2.yaml配置wx:pay:mchId: 16126xxxx #微信⽀付商户号mchSerialNo: 60B04XXXXXXXXX #证书序列号v3Secret: 5ovxxxxxxxxxxxxxxxx #密钥p12Path:/usr/local/apiclient_cert.p12 #证书绝对路径地址keyPass:16126xxxx #证书密码默认微信商户号privateKey: | #这个符号⼀定注意(回车键旁边) 是yaml中保持⽂本换⾏读取的写法防⽌证书读出来加载失败-----BEGIN PRIVATE KEY-----xxxx-----END PRIVATE KEY----- #私钥certificate: |-----BEGIN CERTIFICATE-----xxxx-----END CERTIFICATE----- #平台证书特别提⽰:3.读取yaml内容的Properties类@Data@Component@ConfigurationProperties(prefix = "wx.pay")public class WeChatPayProperties {/*** 商户id*/private String mchId;/*** 商户证书序列号*/private String mchSerialNo;/*** apiV3密钥*/private String v3Secret;/*** p12证书⽂件位置*/private String p12Path;/*** 证书密码*/private String keyPass;/*** 商户私钥*/private String privateKey;/*** 微信⽀付平台证书 jar包⽣产的*/private String certificate;}4.启动配置类@Configurationpublic class WxPayV3Config {@AutowiredWeChatPayProperties weChatPayProperties;@Beanpublic CloseableHttpClient wxV3Init() {PrivateKey merchantPrivateKey = PemUtil.loadPrivateKey(weChatPayProperties.getPrivateKey());X509Certificate wechatPayCertificate = PemUtil.loadCertificate(new ByteArrayInputStream(weChatPayProperties.getCertificate().getBytes(StandardCharsets.UTF_8)));ArrayList<X509Certificate> listCertificates = new ArrayList<>();listCertificates.add(wechatPayCertificate);return WechatPayHttpClientBuilder.create().withMerchant(weChatPayProperties.getMchId(), weChatPayProperties.getMchSerialNo(), merchantPrivateKey).withWechatPay(listCertificates).build();}}5.下单api@Slf4j@Componentpublic class WeChatPayApi {@AutowiredWeChatPayProperties weChatPayProperties;@AutowiredWeChatAppletProperties weChatAppletProperties;@AutowiredCloseableHttpClient httpClient;/*** 微信⼩程序下单的请求地址*/private static final String applet_req_url = "https:///v3/pay/transactions/jsapi";/*** 创建微信⼩程序订单** @param orderNo 订单号* @param amount 单位分* @param openid ⼩程序的openid* @param goodsName 订单名称* @param notify 通知地址* @throws IOException*/public String createWxAppletOrder(String orderNo, Integer amount, String openid, String goodsName, String notify) throws IOException {// 请求body参数 JSONObject paramObject = new JSONObject();JSONObject amountObject = new JSONObject();amountObject.put("total", amount);amountObject.put("currency", "CNY");paramObject.put("amount", amountObject);paramObject.put("mchid", weChatPayProperties.getMchId());paramObject.put("description", goodsName);paramObject.put("notify_url", notify);JSONObject payerObject = new JSONObject();payerObject.put("openid", openid);paramObject.put("payer", payerObject);paramObject.put("out_trade_no", orderNo);paramObject.put("appid", "⼩程序appid");HttpPost httpPost = new HttpPost(applet_req_url);httpPost.setHeader("Accept", "application/json");StringEntity entity = new StringEntity(paramObject.toJSONString(), "utf-8");entity.setContentType("application/json");("[微信下单请求参数列表]=" + paramObject);httpPost.setEntity(entity);//完成签名并执⾏请求CloseableHttpResponse response = httpClient.execute(httpPost);Map<String, Object> resMap = new HashMap<>();try {int statusCode = response.getStatusLine().getStatusCode();Assert.isTrue(statusCode == 200, "微信下单请求失败");JSONObject jsonObject = JSON.parseObject(EntityUtils.toString(response.getEntity()));String prepayId = jsonObject.getString("prepay_id");Assert.isTrue(StringUtils.isNotBlank(prepayId), "下单获取参数失败");String timeStamp = String.valueOf(System.currentTimeMillis() / 1000);String nonceStr = RandomUtil.randomString(32).toUpperCase();String packagep = "prepay_id=" + prepayId;SortedMap<Object, Object> params = new TreeMap<>();params.put("appId", weChatAppletProperties.getAppId());params.put("timeStamp", timeStamp);params.put("nonceStr", nonceStr);params.put("package", packagep);params.put("signType", "RSA");resMap.put("appId", "⼩程序appid");resMap.put("timeStamp", timeStamp);resMap.put("nonceStr", nonceStr);resMap.put("package", packagep);resMap.put("signType", "RSA");resMap.put("paySign", WechatPayUtils.createSign(params, weChatPayProperties.getP12Path(), weChatPayProperties.getKeyPass())); ("[微信⽀付] ⽀付参数:" + JSON.toJSONString(resMap));} catch (Exception e) {throw new BusinessException(e.getMessage());} finally {response.close();}return JSON.toJSONString(resMap);}6.微信paySign签名⽣成 WechatPayUtils类,KeyPairFactory类,WechatRSAUtils类public class WechatPayUtils {/*** sign签名** @param map* @return*/public static String createSign(SortedMap<Object, Object> map, String certPath, String keyPass) throws Exception {String signatureStr = Stream.of(String.valueOf(map.get("appId")), String.valueOf(map.get("timeStamp")), String.valueOf(map.get("nonceStr")), String.valueOf(map.get("package"))).collect(Collectors.joining("\n", "", "\n"));KeyPair keyPair = KeyPairFactory.createPKCS12(certPath, "Tenpay Certificate", keyPass);return WechatRSAUtils.payRequestSign(signatureStr, keyPair);}public class KeyPairFactory {private static KeyStore store;private static final Object lock = new Object();/*** 获取公私钥.** @param keyPath the key path* @param keyAlias the key alias* @param keyPass password* @return the key pair*/public static KeyPair createPKCS12(String keyPath, String keyAlias, String keyPass) throws Exception {// ClassPathResource resource = new ClassPathResource(keyPath); //喜欢⽤相对路径的同学使⽤这⼀⾏PathResource resource = new PathResource(keyPath);char[] pem = keyPass.toCharArray();synchronized (lock) {if (store == null) {synchronized (lock) {store = KeyStore.getInstance("PKCS12");store.load(resource.getInputStream(), pem);}}}X509Certificate certificate = (X509Certificate) store.getCertificate(keyAlias);certificate.checkValidity();// 证书的序列号也有⽤String serialNumber = certificate.getSerialNumber().toString(16).toUpperCase();// 证书的公钥PublicKey publicKey = certificate.getPublicKey();// 证书的私钥PrivateKey storeKey = (PrivateKey) store.getKey(keyAlias, pem);return new KeyPair(publicKey, storeKey);}}public class WechatRSAUtils {/*** ⽣成⽀付签名** @param signStr* @param keyPair* @return**/@SneakyThrowspublic static String payRequestSign(String signStr, KeyPair keyPair) {Signature sign = Signature.getInstance("SHA256withRSA");sign.initSign(keyPair.getPrivate());sign.update(signStr.getBytes(StandardCharsets.UTF_8));return Base64Utils.encodeToString(sign.sign());}}。
小程序搭建对接端口的方法
要搭建一个小程序对接端口的方法,可以按照以下步骤进行操作:
1. 确定对接的端口号:首先,你需要确定要对接的后端服务器的端口号。
通常使用的是常见的HTTP 端口号,如80 或443,或者自定义的端口号。
2. 修改小程序配置文件:在小程序的根目录下,找到并打开app.json 配置文件。
在其中添加一个字段:`"request: { "domain": " }`。
这里的`端口号` 就是你要对接的端口号。
修改完成后,保存文件。
3. 发起请求:在小程序的其他文件中,你可以使用内置的`wx.request()` 方法发起HTTP 请求。
通过设置`url` 参数指定要请求的接口地址,可以使用相对路径(如`/api/users`)或绝对路径(如` `method`、`data` 等。
4. 配置后端服务器:在后端服务器上进行相应的配置,以便能够与小程序进行通信。
具体的配置方式取决于你使用的后端技术和服务器环境。
一般来说,你需要设置相应的路由和接口,以便处理小程序发起的请求,并返回相应的数据。
需要注意的是,为了确保安全,小程序只能与支持HTTPS 的服务器进行通信。
如果你使用的是自签名证书或无有效证书的HTTPS,则需要在小程序的开发设置中,勾选“不校验合法域名、Web-view(业务域名)、TLS 版本以及HTTPS
证书”。
微信⼩程序开发之获取⽤户⼿机号码(php接⼝解密)后边要做⼀个微信⼩程序,并要能获取⽤户微信绑定的⼿机号码。
⽽⼩程序开发⽂档上边提供的获取⼿机号码的接⼝(getPhoneNumber())返回的是密⽂,需要服务器端进⾏解密,但是官⽅提供的开发⽂档⼀如既往的乱,如果没有对⼩程序开发⽂档有⼀个整体的了解,搞懂解密流程还是有点难的。
这⾥把⼩程序从请求⽤户授权获取⼿机号码直⾄获取到⼿机号码明⽂的整个流程串了起来,⽅便迅速了解,如下:⼀. 前端相关操作:1. 请求⽤户授权获取⼿机号码:因为需要⽤户主动触发才能发起获取⼿机号接⼝,所以该功能不由 API 来调⽤,需⽤<button>组件的点击来触发,如下:wxml:<button wx:if="{{!phone}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> 获取⼿机号码</button>js:Page({getPhoneNumber: function(e) { if(e.detail.errMsg == "getPhoneNumber:fail user deny") return; //⽤户允许授权 console.log("lv", e.detail.iv); //包括敏感数据在内的完整⽤户信息的加密数据,需要解密 console.log(e.detail.encryptedData); //加密算法的初始向量,解密需要⽤到 ......}})2. 访问⼩程序登录接⼝:⼩程序调⽤wx.login()获取临时登录凭证code,并传到开发者服务器。
Page({getPhoneNumber: function(e) {console.log(e.detail.errMsg)console.log(e.detail.iv) //包括敏感数据在内的完整⽤户信息的加密数据,需要解密console.log(e.detail.encryptedData) //加密算法的初始向量,解密需要⽤到wx.login({success: res => {if(res.code){console.log(res.code)}}})}})3. 访问腾讯服务器的登录凭证校验接⼝:注:官⽅推荐放到服务器端进⾏,这⾥为了⽅便,就放在前端请求了。
微信⼩程序授权登录以及⽤户信息相关接⼝调整导致授权框不弹出前⾔:4⽉8号升级了⼩程序业务后提交了版本并上线。
突然⼀个同事说体验版的点击“登录”按钮⽆效。
当时觉得应该不会呀,这⼏天⼀直⽤⼿机调试,每天也在不停的登录授权,弹框⼀直有的呀。
然后为了验证同事的效果,速将PC版的缓存全部清除,然后⼀脸懵逼,果然怎么点“登录”都⽆效果,然后继续⽤⼿机测试,也⽆效果了。
然后在微信⾥看正式版的⼩程序,发现暂⽆异常。
⼏个同事都第⼀反应:肯定是微信官⽅⼜改了啥。
要不然代码⼀直没动,咋突然这样呢。
果然,唉。
官⽅已发部了调整说明⽂档,⼤家可以参考没办法,⼈家是腾讯,我们只能⼀个字:改!在没看官⽅⽂档之前,⾃⼰在寻找授权不弹框原因,在调试的过程中,发现wx.getSetting()返回值有变,代码如下:1 wx.getSetting({2 success: function (res) {3if (res.authSetting['erInfo']) {4// 已经授权,可以直接调⽤ getUserInfo 获取头像昵称5 wx.getUserInfo({6 success: function (res) {}7 })8 }9 }10 })发现wx.getSetting的success返回结果如下,发现返回值中⽆“res.authSetting['erInfo']”,⽹上查了,2018年有说废弃了,但⼜说⼜能⽤,很懵。
既然这样,那我先跳过这⼀步,直接弹出授权,获取⽤户信息吧。
获取⽤户信息接⼝返回值如下:⽤户头像昵称都是默认头像和默认昵称然后根据官⽅的说明⽂档,简单的以demo形式展⽰⼀下⽅法⼀:直接⽤最新获取⽤户接⼝,就可以弹出授权,但开发者⼯具要升级,官⽅说)才⽀持,我的版本是1.05.2102010也是⽀持的注意⼀点:开发者⼯具的调试基础库⼀定要选2.16.0,否则还是调试不了,截图如下:整理的简单代码如下:<view class="userinfo"><block wx:if="{{!hasUserInfo}}"><button bindtap="getUserProfile">获取头像昵称</button></block><block wx:else><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view>Page({data: {userInfo: {},hasUserInfo: false,canIUseGetUserProfile: false,},getUserProfile(e) {// 推荐使⽤wx.getUserProfile获取⽤户信息,开发者每次通过该接⼝获取⽤户个⼈信息均需⽤户确认// 开发者妥善保管⽤户快速填写的头像昵称,避免重复弹窗wx.getUserProfile({//desc是必须要有的desc: '⽤于完善会员资料', // 声明获取⽤户个⼈信息后的⽤途,后续会展⽰在弹窗中,请谨慎填写success: (res) => {this.setData({userInfo: erInfo,hasUserInfo: true})}})},})以上要注意的就是wx.getUserProfile中的desc是必须要有的2.如果Pc微信没有升级不⽀持wx.getUserProfile,可以进⾏代码兼容,这样在⼿机端调试或者体验版中能看到效果的。
微信⼩程序客服消息新增临时素材接⼝java实现今天想在微信⼩程序的客服信息窗⼝⾥回复⽤户⼀个图⽚信息,发现还需要上传素材,但是微信⽂档的上传临时素材接⼝写的模模糊糊,⽆奈去百度,⽹上清⼀⾊的PHP实现⽅式,难道我穿越了?PHP已经把java给超越了?⾔归正传,终于还是找到了⼀篇博客的,java实现。
现摘录如下,做了⼩部分修改:1/**2 * 新增临时素材3 *4 * @param fileType5 * @param filePath6 * @return7 * @throws Exception8*/9public static JSONObject UploadMeida(String fileType, String filePath) throws Exception {10// 返回结果11 String result = null;12 File file = new File(filePath);13if (!file.exists() || !file.isFile()) {14 ("⽂件不存在");15throw new IOException("⽂件不存在");16 }17 String token = getToken();18if (token == null) {19 ("未获取到token");20throw new IOException("未获取到token");21 }22 String urlString = Constants.WX_APP_MEDIA_UPLOAD.replace("ACCESS_TOKEN", token).replace("TYPE", fileType);23 URL url = new URL(urlString);24 HttpsURLConnection conn = (HttpsURLConnection) url.openConnection();25 conn.setRequestMethod("POST");// 以POST⽅式提交表单26 conn.setDoInput(true);27 conn.setDoOutput(true);28 conn.setUseCaches(false);// POST⽅式不能使⽤缓存29// 设置请求头信息30 conn.setRequestProperty("Connection", "Keep-Alive");31 conn.setRequestProperty("Charset", "UTF-8");32// 设置边界33 String BOUNDARY = "----------" + System.currentTimeMillis();34 conn.setRequestProperty("Content-Type", "multipart/form-data; boundary=" + BOUNDARY);35// 请求正⽂信息36// 第⼀部分37 StringBuilder sb = new StringBuilder();38 sb.append("--");// 必须多两条道39 sb.append(BOUNDARY);40 sb.append("\r\n");41 sb.append("Content-Disposition: form-data;name=\"media\"; filename=\"" + file.getName() + "\"\r\n");42 sb.append("Content-Type:application/octet-stream\r\n\r\n");43 logger.debug("sb:" + sb);4445// 获得输出流46 OutputStream out = new DataOutputStream(conn.getOutputStream());47// 输出表头48 out.write(sb.toString().getBytes("UTF-8"));49// ⽂件正⽂部分50// 把⽂件以流的⽅式推送道URL中51 DataInputStream din = new DataInputStream(new FileInputStream(file));52int bytes = 0;53byte[] buffer = new byte[1024];54while ((bytes = din.read(buffer)) != -1) {55 out.write(buffer, 0, bytes);56 }57 din.close();58// 结尾部分59byte[] foot = ("\r\n--" + BOUNDARY + "--\r\n").getBytes("UTF-8");// 定义数据最后分割线60 out.write(foot);61 out.flush();62 out.close();63if (HttpsURLConnection.HTTP_OK == conn.getResponseCode()) {6465 StringBuffer strbuffer = null;66 BufferedReader reader = null;67try {68 strbuffer = new StringBuffer();69 reader = new BufferedReader(new InputStreamReader(conn.getInputStream()));70 String lineString = null;71while ((lineString = reader.readLine()) != null) {72 strbuffer.append(lineString);7374 }75if (result == null) {76 result = strbuffer.toString();77 ("result:" + result);78 }79 } catch (IOException e) {80 logger.error("发送POST请求出现异常!", e);81 e.printStackTrace();82 } finally {83if (reader != null) {84 reader.close();85 }86 }8788 }89 JSONObject jsonObject = JSONObject.parseObject(result);90return jsonObject;9192 }使⽤的时候直接本地执⾏⼀个main⽅法就OK的1/**2 * 上传素材,⽤于获取media_id3 * @param args4*/5public static void main(String[] args) {67 String fileType = "image";8 String filePath = "E:/testupload/123456.jpg";9try {10 JSONObject jsonObject = UploadMeida(fileType, filePath);11 System.err.println(jsonObject);12 } catch (Exception e) {13 e.printStackTrace();14 }15 }其实后来这个临时素材不满⾜需求的,因为⽹上说的这种临时素材好像3天就会过期,反正微信⽂档是啥也没说,只说这是临时素材,囧!我想找个微信⼩程序的永久素材接⼝,然⽽并没有找到。
微信⼩程序HTTP接⼝请求封装的实现最近在学习⼩程序的编写,需要调⽤后端接⼝,经常要⽤到wx.request⽅法,所以就⾃⼰封装了⼀下,简化⼀下代码,如果能给⼤家提供帮助更好,我的项⽬后端是使⽤的Java SSM框架,wx.request的URL就是后端提供的接⼝。
在封装的时候我在⽹上看了很多篇博客,90%以上的全都是直接在success回调函数中直接打印返回值console.log(res.data)这个当然是没有问题的,但是我们都知道微信⼩程序的数据是实现数据绑定的,这⼀点和Vue框架很像,⽽在Vue框架的JS⽂件中我们可以通过function loginSuccess(data){//成功回调函数//具体数据处理}这种⽅式定义回调⽅法,同时通过new的Vue名字.data参数名对data⾥⾯的参数值进⾏修改,正因为有了这种习惯后,所以我在⼩程序中使⽤这种⽅式刚开始⼀直报错,搞了好久才搞懂,现在来看⼀下我的⼩程序HTTP请求⽅法封装及使⽤:1.⽅法封装(新建⽂件夹util,⼯具⽂件,在⽂件夹下创建request.js⽂件,⽤于对⽅法封装)request.js:var app = getApp();//项⽬URL相同部分,减轻代码量,同时⽅便项⽬迁移//这⾥因为我是本地调试,所以host不规范,实际上应该是你备案的域名信息var host = 'http://localhost:8081/demo/';/*** POST请求,* URL:接⼝* postData:参数,json类型* doSuccess:成功的回调函数* doFail:失败的回调函数*/function request(url, postData, doSuccess, doFail) {wx.request({//项⽬的真正接⼝,通过字符串拼接⽅式实现url: host + url,header: {"content-type": "application/json;charset=UTF-8"},data: postData,method: 'POST',success: function (res) {//参数值为res.data,直接将返回的数据传⼊doSuccess(res.data);},fail: function () {doFail();},})}//GET请求,不需传参,直接URL调⽤,function getData(url, doSuccess, doFail) {wx.request({url: host + url,header: {"content-type": "application/json;charset=UTF-8"},method: 'GET',success: function (res) {doSuccess(res.data);},fail: function () {doFail();},})}/*** module.exports⽤来导出代码* js⽂件中通过var call = require("../util/request.js") 加载* 在引⼊引⼊⽂件的时候" "⾥⾯的内容通过../../../这种类型,⼩程序的编译器会⾃动提⽰,因为你可能* 项⽬⽬录不⽌⼀级,不同的js⽂件对应的⼯具类的位置不⼀样*/module.exports.request = request;module.exports.getData = getData;2.page⾥⾯随便⼀个创建⼀个⽂件夹,创建四种⽂件,在js⾥⾯加⼊//引⼊代码var call = require("../util/request.js")Page({data: {pictureList: [],},onLoad: function () {var that = this;//调⽤封装的⽅法,为了⽅便我直接在页⾯加载的时候执⾏这个⽅法call.getData('lunbo.do', this.shuffleSuc, this.fail);// ⽆⽤,前⾯忘记注释,抱歉// this.loadMsgData(that);},shuffleSuc: function (data) {var that = this;that.setData({pictureList: data.rows})//我后⾯测试了⼀下,直接this.setData也可以,但是因为我在没有使⽤封装⽅法的时候//this.setData报过错,不能直接⽤this,所以我在赋值的时候⼀般都会加上var that = this;//这句话算是⼀个不是习惯的习惯},fail: function () {console.log("失败")},})将回调函数写在page⾥⾯,在调⽤封装⽅法的时候通过this.⽅法名调⽤,这样就能确保that.setData⽅法有效,如果是写在外⾯的function⽅法⼩程序编译器不会报错,但是在wxml中bindtap⽆效,我也没深究,同时在call.getData⽅法中调⽤的时候虽然能够进⼊该⽅法,但是赋值是⽆效的,所以我不建议⽤这种⽅式:function shuffleSuc(data) {var that = this;that.setData({pictureList: data.rows})}当然,如果哪位有新的见解欢迎留⾔3. 运⾏之后通过⼩程序的控制台AppData可以打印data⾥⾯的值,同时也可以根据需要在页⾯中显⽰以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。