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

news2024/10/7 20:29:02

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…

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【动态规划】【数学】【C++算法】805 数组的均值分割

作者推荐 【动态规划】【数学】【C算法】18赛车 本文涉及知识点 动态规划 数学 805 数组的均值分割 给定你一个整数数组 nums 我们要将 nums 数组中的每个元素移动到 A 数组 或者 B 数组中&#xff0c;使得 A 数组和 B 数组不为空&#xff0c;并且 average(A) average(B)…

2788.按分隔符拆分字符串

前言 力扣还挺上道&#xff08;bushi&#xff09;&#xff0c;今天第一次写每日一题&#xff0c;给了个简单等级的数组题&#xff0c;我只能说&#xff0c;首战告捷&#xff08;小白的呐喊&#xff09;&#xff0c;看看这每日一题我能坚持一天写出来&#xff0c; ok&#xff…

Ubuntu安装mysql8详细步骤

1、拉取镜像 docker pull mysql:8.0.20 2、启动镜像 docker run -p 3307:3306 --name mysql8 -e MYSQL_ROOT_PASSWORD123456 -d mysql:8.0.20 检查是否启动成功 docker ps 3、配置挂载 创建挂载目录&#xff08;请检查保证创建成功&#xff09; mkdir -p /docker/mysql8.0.20/…

Java安全 CC链1分析

Java安全之CC链1分析 什么是CC链环境搭建jdk下载idea配置创建项目 前置知识Transformer接口ConstantTransformer类invokerTransformer类ChainedTransformer类 构造CC链1CC链1核心demo1demo1分析 寻找如何触发CC链1核心TransformedMap类AbstractInputCheckedMapDecorator类readO…

IDEA在重启springboot项目时没有自动重新build

IDEA在重启springboot项目时没有自动重新build 问题描述 当项目里面某些依赖或者插件更新了&#xff0c;target的class文件没有找到&#xff0c;导致不是我们需要的效果。 只能手动的清理target文件&#xff0c;麻烦得很 &#xff0c; 单体项目还好说&#xff0c;一次清理就…

Qt5.15.2中加入图片资源

系列文章目录 文章目录 系列文章目录前言一、加入图片资源二、代码 前言 以前用的Qt5.15.2之前的版本&#xff0c;QtCreator默认的工程文件是*.pro&#xff0c;现在用5.15.2创建工程默认的工程文件是CMameList.txt,当然在创建项目时&#xff0c;仍然可以使用pro工程文件用QtCr…

JRP Version 1.4.120

使用Flask学习制作网页一个月后&#xff1a; 借用HTML书籍学习&#xff0c;自己做的NAS管理系统终于是长得好看了一些&#xff1a; 使用模版继承&#xff0c;最开始是引用人家的库 from flask_bootstrap import Bootstrap&#xff0c; 效果&#xff1a; 我准备进一步管理但是发…

vivado 定义板文件板

定义板文件板 &#xff1c;board&#xff1e;标记是板文件的根。它包括识别基本信息的属性关于董事会。 <board schema_version"2.1" vendor"xilinx.com" name"kc705" display_name"Kintex-7 KC705 Evaluation Platform" url&qu…

python-基础篇-函数

文章目录 函数基础目标01. 函数的快速体验1.1 快速体验 02. 函数基本使用2.1 函数的定义2.2 函数调用2.3 第一个函数演练思考 2.4 PyCharm 的调试工具2.5 函数的文档注释 03. 函数的参数3.1 函数参数的使用3.2 参数的作用3.3 形参和实参 04. 函数的返回值05. 函数的嵌套调用函数…

Redis(四)

1、Redis的单/多线程 1.1、单线程 其实直接说Redis什么单线程或者是多线程&#xff0c;不太准确&#xff0c;在redis的4.0版主之前是单线程&#xff0c;然后在之后的版本中redis的渐渐改为多线程。 Redis是单线程主要是指Redis的网络IO和键值对读写是由一个线程来完成的&#…

C语言/c++指针详细讲解【超详细】【由浅入深】

指针用法简单介绍 指针&#xff0c;是内存单元的编号。 内存条分好多好多小单元&#xff0c;一个小单元有 8 位&#xff0c;可以存放 8 个 0 或 1&#xff1b;也就是说&#xff0c;内存的编号不是以位算的&#xff0c;而是以字节算的&#xff0c;不是一个 0 或 1 是一个编号&…

k3s x GitLab Runner Operator,GitLab CI 云原生构建新体验

GitLab CI 是非常常用的一款 CI/CD 工具&#xff0c;只需要在 .gitlab-ci.yml 文件中用 YAML 语法编写 CI/CD 流水线即可。而 GitLab CI 能够运行的关键组件是 GitLab Runner。GitLab Runner 是一个轻量级、高扩展的代理&#xff0c;主要用来执行 GitLab CI/CD 流水线中的 Job&…

1、中级机器学习课程简介

文章目录 1、课程简介2、先决条件 本课程所需数据集夸克网盘下载链接&#xff1a;https://pan.quark.cn/s/9b4e9a1246b2 提取码&#xff1a;uDzP 1、课程简介 欢迎来到机器学习中级课程&#xff01; 如果你对机器学习有一些基础&#xff0c;并且希望学习如何快速提高模型质量…

three.js从入门到精通系列教程026 - three.js通过SphereBufferGeometry创建用于投射阴影的球体

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>three.js从入门到精通系列教程026 - three.js通过SphereBufferGeometry创建用于投射阴影的球体</title><script src"ThreeJS/three.js"></script&…

立体视觉几何(一)

1.什么是立体视觉几何 立体视觉对应重建&#xff1a; • 对应&#xff1a;给定一幅图像中的点pl&#xff0c;找到另一幅图像中的对应点pr。 • 重建&#xff1a;给定对应关系(pl, pr)&#xff0c;计算空间中相应点的3D 坐标P。 立体视觉&#xff1a;从图像中的投影恢复场景中点…

vue2 点击按钮下载文件保存到本地(后台返回的zip压缩流)

// import ./mock/index.js; // 该项目所有请求使用mockjs模拟 去掉mock页面url下载 console.log(res, res)//token 是使页面不用去登录了if (res.file) {window.location.href Vue.prototype.$config.VUE_APP_BASE_IDSWAPI Vue.prototype.$config.VUE_APP_IDSW /service/mode…

【征服Redis12】redis的主从复制问题

从现在开始&#xff0c;我们来讨论redis集群的问题&#xff0c;在前面我们介绍了RDB和AOF两种同步机制&#xff0c;那你是否考虑过这两个机制有什么用呢&#xff1f;其中的一个重要作用就是为了集群同步设计的。 Redis是一个高性能的键值存储系统&#xff0c;广泛应用于Web应用…

如何本地部署虚VideoReTalking

环境&#xff1a; Win10专业版 VideoReTalking 问题描述&#xff1a; 如何本地部署虚VideoReTalking 解决方案&#xff1a; VideoReTalking是一个强大的开源AI对嘴型工具&#xff0c;它是我目前使用过的AI对嘴型工具中效果最好的一个&#xff01;它是由西安电子科技大学、…

71.工作中redis的常用场景总结

文章目录 一、简介二、统计访问次数三、缓存四、分布式锁五、限流六、排行榜七、作为Session的存储器&#xff0c;存用户登录状态八、位统计九、生成全局ID 一、简介 Redis作为一种优秀的基于key/value的缓存&#xff0c;有非常不错的性能和稳定性&#xff0c;无论是在工作中&…

Python武器库开发-武器库篇之Fofa-API使用(四十六)

Python武器库开发-武器库篇之Fofa-API使用(四十六) FOFA&#xff08;FOcus Observation of Futures Assets&#xff09;是一款专业的网络资产搜索引擎&#xff0c;旨在帮助企业发现和评估网络上的潜在安全风险。FOFA的基本原理是通过搜索引擎的方式&#xff0c;按照关键词对互…