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

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: ''},// textareahandleTextarea: function(e) {this.setData({valueTextarea: e.detail.value,});},// inputhandleInput: 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.mzph.cn/news/638184.shtml

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

相关文章

【Docker】未来已来 | Docker技术在云计算、边缘计算领域的应用前景

欢迎来到英杰社区&#xff1a; https://bbs.csdn.net/topics/617804998 欢迎来到阿Q社区&#xff1a; https://bbs.csdn.net/topics/617897397 &#x1f4d5;作者简介&#xff1a;热爱跑步的恒川&#xff0c;致力于C/C、Java、Python等多编程语言&#xff0c;热爱跑步&#xff…

【轮式平衡机器人】——角度/速度/方向控制分析软件控制框架

轮式平衡机器人具有自不稳定性&#xff0c;可类比一级倒立摆系统的控制方法&#xff0c;常见有反馈线性化方法、非线性PID控制、自适应控制、自抗扰控制&#xff0c;还有改进的传统缺乏对外界干扰和参数改变鲁棒性的滑模变结构控制。我们采用较为简单的双闭环PID控制实现平衡模…

解锁黑匣子:Chain-of-Note如何为(RAG)带来透明度

英文原文地址&#xff1a;https://ai.plainenglish.io/unlocking-the-black-box-how-chain-of-note-brings-transparency-to-retrieval-augmented-models-rag-ae1ebb007876 论文地址&#xff1a;https://arxiv.org/pdf/2311.09210.pdf 2023 年 11 月 16 日 介绍 检索增强语…

HTML CSS 发光字头特效

效果展示&#xff1a; 代码&#xff1a; <html><head> </head><style>*{margin: 0;padding: 0;}body {text-align: center;}h1{/* border: 3px solid rgb(201, 201, 201); */margin-bottom: 20px;}.hcqFont {position: relative;letter-spacing: 0.07…

构建高可用消息队列系统 01

构建高可用消息队列系统 01 引言1. RabbitMQ简介介绍1.1 什么是RabbitMQ1.2 RabbitMQ的核心特性1.3 RabbitMQ与AMQP 2.安装RabbitMQ3.消息队列实践总结 引言 在当今互联网时代&#xff0c;消息队列系统扮演着至关重要的角色&#xff0c;它们被广泛应用于分布式系统、微服务架构…

REVIT二次开发根据类别选择元素

步骤1 选择高亮选择的元素 步骤2 高亮显示 using System; using System.Collections.Generic; using System.Linq; using System.Text;

JVM(上)

目录 一、JVM概述 一、JVM作用 二、JVM整体组成部分 二、JVM结构-类加载 一、类加载子系统概述 二、类加载过程 1.加载 2.链接 3.初始化&#xff08;类加载过程中的初始化&#xff09; 三、类加载器分类 大致分两类&#xff1a; 细致分类&#xff1a; 四、双亲委派机制 五、打…

Oracle篇—参数文件在11gRAC或12cRAC的启动位置介绍

☘️博主介绍☘️&#xff1a; ✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ ✌✌️擅长Oracle、MySQL、SQLserver、Linux&#xff0c;也在积极的扩展IT方向的其他知识面✌✌️ ❣️❣️❣️大佬们都喜欢静静的看文章&#xff0c;并且也会默默的点赞收藏加关注❣…

LeetCode.2788. 按分隔符拆分字符串

题目 题目链接 分析 题目的意思是给我们一个字符串数组和一个分隔符&#xff0c;让我们按照分隔符把字符串数组分割成新的字符串数组。 看到这个描述&#xff0c;这不就是直接就是利用 按照分隔符分割字符串的系统库函数split()&#xff0c;这个函数的意思就是 把一个字符串…

ISA Server2006部署RuoYi无法登录的问题

ISA Server2006部署RuoYi无法正常登录。每次登录都会报错如下&#xff1a; 无效的会话&#xff0c;或者会话已过期&#xff0c;请重新登录。 原因分析 在nginx中部署没有问题&#xff0c;在ISA Server就会报这个错。根据登录的原理&#xff0c;我猜测可能是headr中的Author…

思迅商旗-loaddata-信息泄露-未公开Day漏洞复现

0x01阅读须知 本文章仅供参考&#xff0c;此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考。本文章仅用于信息安全防御技术分享&#xff0c;因用于其他用途而产生不良后果,作者不承担任何法律责任&#…

浅析智能家居企业面临的组网问题及解决方案

在这个快速发展的时代&#xff0c;组网对于企业的发展来说是一个至关重要的环节。 案例背景&#xff1a; 案例企业是一家智能家居制造企业&#xff0c;在不同城市分布有分公司、店铺、工厂&#xff0c;这些点原本都是各自采购网络&#xff0c;与总部进行日常沟通、访问。 现在…

采集B站up主视频信息

一、网页信息&#xff08;示例网址&#xff1a;https://space.bilibili.com/3493110839511225/video&#xff09; 二、查看响应数据 三、查看数据包内容 四、相关代码&#xff08;代码内容未进行翻页爬取&#xff09; # Time: 2024/1/19 16:42 # Author: 马龙强 # File: 采集B…

【征服redis14】认真理解一致性Hash与Redis的三种集群

前面我们介绍了主从复制的方式和sentinel方式&#xff0c;这里我们看第三种模式-Cluster方式。 目录 1.前两种集群模式的特征与不足 2.Cluster模式 2.1 Cluster模式原理 2.2 数据分片与槽位 2.3 Cluster模式配置和实现 3.一致性Hash 3.1 哈希后取模 3.2 一致性Hash算法…

幻兽帕鲁开服教程——游戏

幻兽帕鲁开服教程——游戏 1. 安装服务器2. 服务器配置调整3. 运行环境Microsoft Visual C Runtime4. 加入服务器 这是研究开服时顺手写的笔记&#xff0c;也方便后来者。 如果你熟悉你所使用的操作系统的话&#xff0c;windows和linux应该区别不大。 1. 安装服务器 1.安装ste…

HarmonyOS应用开发的工程目录结构

在介绍鸿蒙应用开发的细节&#xff0c;我们来了解工程目录结构&#xff0c;这样我们才知道我们能做什么。 我们现在来一一介绍这些目录都是用来做什么的。 AppScope > app.json5 应用级的配置信息 AppScope > resources 这个目录下的base>element用于存放全局使用的…

跑分方面,这款 JavaScript 库在全球框架榜单中的表现比 React 要好得多

最初的动机 2021 年 11 月 左右&#xff0c;Strve 第一个版本发布&#xff0c;社区的反馈大部分是支持&#xff0c;也有少部分小伙伴提出了质疑&#xff0c;这都正常。你只要在社区发布一些作品&#xff0c;就必须接受其他人对你的作品的评价。 当初&#xff0c;开发 Strve 的…

循序渐进学 JavaScript <二>

续 <一> 九、JavaScript常见内置类 9.1 原始类型的包装类 基本数据类型也可以调用属性 在理论上来说它们是没有办法获取属性或者调用方法的 原始类型是简单的值&#xff0c;默认并不能调用属性和方法js 为了可以使其获取属性和调用方法&#xff0c;对其封装了对应的包装…

CTFhub-bak文件

CTFhub-Web-信息泄露-备份文件下载-bak文件 题目信息 解题过程 看到提示说和index.php有关&#xff0c;在url后面加index.php.bak&#xff0c;跳转到http://challenge-7a4da2076cfabae6.sandbox.ctfhub.com:10800/index.php.bak网址&#xff0c;即&#xff1a; 跳转到下载页…

清理docker 无用数据

df -h 查看 overlay 使用88% docker ps 我只要跑一个 把没有用的删除了去 让chatgpt 帮搞一搞 删除未使用的 Docker 镜像、容器、卷和网络&#xff0c;您可以按照以下步骤操作。请注意&#xff0c;在进行这些操作之前&#xff0c;确保您不再需要这些资源&#xff0c;因为删…