支付宝小程序开发踩坑笔记(支付宝、学习强国小程序)

1、接口请求安卓端回调 success,IOS 端回调 fail

原因:dataType 设置不对,默认是 json 格式,对返回数据会进行 json 解析,如果解析失败,就会回调 fail 。加密传输一般是 text 格式。

在这里插入图片描述

2、input 禁止输入空格

inputtextarea 组件默认不会双向绑定,需要借助 setData 进行中转。

  <textarea value="{{valueTextarea}}" onInput="handleTextarea" ></textarea>
  <input value="{{valueInput}}" onInput="handleInput" />
  Page({
  data: {
    valueTextarea: '',
    valueInput: ''
  },
  // textarea
  handleTextarea: function(e) {
    this.setData({
      valueTextarea: e.detail.value,
    });
  },
  // input
  handleInput: function(e) {
    this.setData({
      valueInput: e.detail.value,
    });
  },
});

如果仅是这样,只能实现双向绑定,无法达到禁止输入空格的预期,所以需要对数据进行处理。

this.setData({
  value: e.detail.value.replace(/\s+/g, ''),
});

输入时对输入的值进行替换,将空格过滤掉。可惜这样也只能实现一半,与预期还是有出入,因为虽然 data 中的值没有空格了,但是页面展示中依然会有空格。神奇的是,打印出来的结果也是没有空格的。所以还需要更进一步处理,其实这一点官方文档中是有提到的,只需将下面的属性改为 true 即可。

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/d7ad2254b95f4e178bf5e88dffc182bf.png

3、点击 tabBar 页面不更新

需要注意页面栈深度。正常使用 my.switchTab 跳转时可以触发页面更新的。

在这里插入图片描述
但是如果点击底部按钮切换,不会触发更新,不过官方提供了一个 API onTabItemTap ,这是小程序自带的事件处理函数,可以监听到 tabBar 被点击事件。

官方文档-页面运行机制

在这里插入图片描述

4、加密算法

官方提供了一个API my.rsa,不过能力很弱,仅支持 RSA 加解密能力,如需更多加解密的能力,建议使用 crypto-js

使用方法如下:

# 安装
npm install crypto-js

示例 AES 加密:

const CryptoJS = require("crypto-js")

/**
 * @description 加密
 * @param word 加密内容
 * @param key 密钥
 */
export function encrypt(word, key) {
  const keyStr = CryptoJS.enc.Utf8.parse(key);
  const srcs = CryptoJS.enc.Utf8.parse(word);
  const encrypted = CryptoJS.AES.encrypt(srcs, keyStr, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7,
  });
  return encrypted.toString();
}

/**
 * @description 解密
 * @param word 解密内容
 * @param key 密钥
*/
export function decrypt(word, key) {
  const keyStr = CryptoJS.enc.Utf8.parse(key);
  const base64 = CryptoJS.enc.Base64.parse(word);
  const src = CryptoJS.enc.Base64.stringify(base64);
  const decrypt = CryptoJS.AES.decrypt(src, keyStr, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7,
  });
  return decrypt.toString(CryptoJS.enc.Utf8);
}

官方文档-my.rsa

5、网络请求封装

小程序因为要用自带的API my.request,请求的格式需要按照要求去写。

my.request({
  url: 'https://httpbin.org/post',
  method: 'POST',
  data: {
    from: '支付宝',
    production: 'AlipayJSAPI',
  },
  headers: {
    'content-type': 'application/json', //默认值
  },
  dataType: 'json',
  success: function (res) {
    my.alert({ content: 'success' });
  },
  fail: function (error) {
    console.error('fail: ', JSON.stringify(error));
  },
  complete: function (res) {
    my.hideLoading();
    my.alert({ content: 'complete' });
  },
});

如果每次请求都要完整的写一遍上面的内容,那真的很令人绝望,尤其是需要改变服务器地址时,每次都全局替换,也绝对不是一个好的方式。

以下为请求封装示例(仅供参考,实际场景要比示例复杂很多):

/**
  * @description 接口封装
  * @param url 接口路径
  * @param params 接口数据
  * @param method 请求类型 GET、POST...
  * @param type content-type,默认application/json
*/
export function request(url, params, method, type = 'application/json') {
	return new Promise((resolve, reject) => {
		my.request({
		  url: `https://****{url}`,
		  headers: {
		    'content-type': type
		  },
		  method: method,
		  dataType: 'text',
		  data: params,
		  success: (res) => resolve(res.data),
		  fail: (err) => resolve(err),
		});
	}
}

6、base64编解码

小程序不是浏览器,btoa()atob() 这样的写法在低版本中未必支持,且即使不支持,小程序也不会提示,因此在遇到不支持的语法时,很难定位问题。

百度可以搜索到自己写的 base64 编解码函数,不幸的是,与 btoa()atob() 对某些字符的编码未必一致,所以未必可用。幸运的是,小程序提供了 base64 编解码的API,但也有其限制,仅支持 ArrayBufferbase64 之间编解码。

基础库 2.7.3 或更高版本支持

// 将 Base64 字符串转成 ArrayBuffer 对象
my.base64ToArrayBuffer()

// 将 ArrayBuffer 对象转成 Base64 字符串
my.arrayBufferToBase64()

遇到再更,如有不同看法或需要作者补充,欢迎在评论区留言,看到会及时补充。

WAIT…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/336867.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Qt5项目拆解第一集解决:中文乱码| 全局字体|注册表|QSS/CSS

# 一、乱码解决代码片段 QTextCodec是Qt中用于处理文本编码和字符集转换的类。它提供了一系列静态函数来实现不同编码的文本转换,包括编码转换、字符集检测和转换、以及数据流中的文本编码处理。QTextCodec类使得Qt可以在不同的编码和字符集之间进行无缝转换,从而方便地处理…

代码随想录算法训练营第三天 | 链表理论基础 203.移除链表元素 707.设计链表 206.反转链表

链表理论基础 链表是一种通过指针串连在一起的线性结构&#xff0c;每一个节点由两部分组成&#xff0c;一个是数据域&#xff0c;一个是指针域&#xff08;存放指向下一个节点的指针&#xff09;。最后一个节点的指针指向 null。链表的存储方式&#xff1a;数组在内存中是连续…

深度强化学习Task2:策略梯度算法

本篇博客是本人参加Datawhale组队学习第二次任务的笔记 【教程地址】 文章目录 基于价值算法和基于策略算法的比较策略梯度算法策略梯度算法的直观理解策略梯度算法REINFORCE算法基于平稳分布的策略梯度算法REINFORCE算法实现策略函数设计模型设计更新函数设计 练习总结 基于价…

注解实现校验接口传参是否超出取值范围

文章目录 1、定义注解2、使用注解3、其余校验实现思路2.04、其余校验实现思路3.0 写接口&#xff0c;Dto里很多字段要检验传参范围&#xff0c;自定义个注解来校验。 1、定义注解 注解定义代码&#xff1a; import javax.validation.Constraint; import javax.validation.Con…

2023年12月 电子学会 青少年软件编程等级考试Scratch三级真题

202312 青少年软件编程等级考试Scratch三级真题 一、单项题 第 1 题 运行左图程序&#xff0c;想得到右图中的效果&#xff0c;红色框应填写的数值是&#xff1f;&#xff08; &#xff09; A&#xff1a;12 B&#xff1a;11 C&#xff1a;10 D&#xff1a;9 第 2 题 下列…

网站转小程序系统,任意网址打包成小程序

源码介绍 将任意网站打包成小程序&#xff0c;只需简单修改域名&#xff0c;即可轻松实现&#xff01;这一创新技术让您的网站内容在小程序平台上焕发新生。通过智能转换工具&#xff0c;您可以将任意网站迅速转化为小程序&#xff0c;无需繁琐的编码和开发工作。只需简单修改…

小程序学习-19

Vant Weapp - 轻量、可靠的小程序 UI 组件库 ​​​​​ Vant Weapp - 轻量、可靠的小程序 UI 组件库 安装出现问题&#xff1a;rollbackFailedOptional: verb npm-session 53699a8e64f465b9 解决办法&#xff1a;http://t.csdnimg.cn/rGUbe Vant Weapp - 轻量、可靠的小程序…

微服务不死 — 共享变量在策略引擎项目的落地详解

01 背景 1、共享变量的提出 前段时间&#xff0c;来自亚马逊 Prime Video 团队的一个案例研究在开发者社区中掀起了轩然大波。大体是这样一件事&#xff0c;作为一个流媒体平台&#xff0c;Prime Video每天都会向客户提供成千上万的直播流。为了确保客户无缝接收内容&#xff0…

多人在线聊天交友工具,匿名聊天室网站源码,附带搭建教程

源码介绍 匿名聊天室&#xff08;nodejs vue&#xff09; 多人在线聊天交友工具&#xff0c;无需注册即可畅所欲言&#xff01;你也可以放心讲述自己的故事&#xff0c;说出自己的秘密&#xff0c;因为谁也不知道对方是谁。 运行说明 安装依赖项&#xff1a;npm install 启动…

SpringBoot整合Dubbo和Zookeeper分布式服务框架使用的入门项目实例

文章目录 SpringBoot整合Dubbo和Zookeeper分布式服务框架使用的入门项目实例Dubbo定义其核心部分包含: 工作原理为什么要用dubbo各个节点角色说明&#xff1a;调用关系说明&#xff1a; dubbo为什么需要和zookeeper结合使用&#xff0c;zookeeper在dubbo体系中起到什么作用&…

Chatgpt+Comfyui绘图源码说明及本地部署文档

其他文档地址&#xff1a; ChatgptComfyui绘图源码运营文档 ChatgptComfyui绘图源码线上部署文档 一、源码说明 1、源码目录说明 app_home&#xff1a;app官网源码chatgpt-java&#xff1a;管理后台服务端源码、用户端的服务端源码chatgpt-pc&#xff1a;电脑网页前端源码cha…

论文阅读笔记AI篇 —— Transformer模型理论+实战 (四)

论文阅读笔记AI篇 —— Transformer模型理论实战 &#xff08;四&#xff09; 一、理论1.1 理论研读1.2 什么是AI Agent? 二、实战2.1 先导知识2.1.1 tensor的创建与使用2.1.2 PyTorch的模块2.1.2.1 torch.nn.Module类的继承与使用2.1.2.2 torch.nn.Linear类 2.2 Transformer代…

YOLOv5改进 | 主干篇 | 华为GhostnetV1一种移动端的专用特征提取网络

一、本文介绍 本文给大家带来的改进机制是华为移动端模型Ghostnetv1,华为GhostnetV1一种移动端的专用特征提取网络,旨在在计算资源有限的嵌入式设备上实现高性能的图像分类。GhostNet的关键思想在于通过引入Ghost模块,以较低的计算成本增加了特征图的数量,从而提高了模型的…

一、用户管理中心——前端初始化

一、Ant Design Pro初始化 1.创建空文件夹 2.打开Ant Design Pro官网 3.打开终端进行初始化 在终端输入npm i ant-design/pro-cli -g 在终端输入pro create myapp 选择umi3 选择simple 项目创建成功后&#xff0c;在文件夹中出现myapp 4.安装依赖 使用vscode打开项目 …

Java学习笔记(八)——Lambda表达式

文章目录 Lambda表达式Lambda表达式的省略写法Lambda练习练习1练习2 算法题算法题1 斐波那契数列算法题2 猴子吃桃子算法题3 爬楼梯 Lambda表达式 Lambda表达式是JDK8开始的一种新语法形式。 基本作用&#xff1a;简化函数式接口的匿名内部类的写法。 注意&#xff1a; Lam…

lambda

文章目录 lambda 概述lambda的演变过程lambda 表达式的基本格式案例&#xff1a;调用接口里面的方法几种方式 lambda省略写法案例一&#xff1a;抽象方法一个参数抽象方法两个参数 啦么大 使用的注意事项啦么大 与 匿名内部类 lambda 概述 函数式编程思想 面向对象思想在乎的是…

Java 面向对象02 封装 (黑马)

人画圆&#xff1a;画圆这个方法应该定义在园这个类里面。 人关门&#xff1a;是人给了门一个作用力&#xff0c;然后门自己关上了门&#xff0c;所以关门的方法是在门的类里面 封装对象的好处&#xff1a; 调用Java自带的方法举例实现&#xff1a; 在测试类中&#xff0c;对其…

PDshell16逆向PostgreSQL 工程显示字段comment备注

现状&#xff1a;当刚逆向成功的表结构是没有原来表结构中的&#xff0c;comment备注如下 然后pd逆向工程的sql已经返回了这个备注的含义 解决方案&#xff1a; 1、设置显示注释列 tools——Display Preferences…如下 勾选-按照下面得方式勾选这三个 复制这里的VBS脚本&a…

触摸屏监控双速电动机-确定地址分配

I/O地址分配 当选择了PLC之后&#xff0c;首先需要确定的是系统中各I/O点的绝对地址。在某些PLC 中1/O绝对地址的分配方式共有固定地址型、自动分配型、用户定义型3种。实际所使用的方式取决于所采用的PLC的CPU型号、编程软件、软件版本、编程人员的选择等因素。 本任务输入信…

51单片机原理及应用张毅刚版课后习题以及答案

AT89S51单片机内部集成了哪些外围功能部件 ①8位微处理器CPU ②数据存储器 128B RAM ③程序存储器 ④4个8位可编程并行I/O口 ⑤1个全双工的异步串行口 ⑥2个可编程的16位定时器/计数器 ⑦1个看门狗定时器WDT ⑧中断系统具有五个中断源 五个中断向量 ⑨特殊功能寄存器SFR 26个…