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

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.rhkb.cn/news/244820.html

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

相关文章

利用tpu-mlir工具将深度学习算法模型转成算能科技平台.bmodel模型的方法步骤

目录 1 TPU-MLIR简介 2 开发环境搭建 2.1 下载镜像 2.2 下载SDK 2.3 创建容器 2.4 加载tpu-mlir 3 准备工作目录 4 onnx转mlir文件 5 mlir转INT8 模型 5.1 生成校准表 5.2 便以为INT8对称量化模型 参考文献&#xff1a; 之前是用nntc转算能科技的模型的&#xff0c…

网易有道BCEmbedding:双语检索与RAG的完美融合

前言 随着人工智能技术的飞速发展&#xff0c;语义表征和检索增强生成&#xff08;Retrieval Augmented Generation, RAG&#xff09;在各个领域的应用日益广泛。在这样的背景下&#xff0c;网易有道推出了划时代的BCEmbedding模型&#xff0c;这不仅是一次技术的革新&#xf…

如何自己实现一个Spring Boot Starter

现在很多开源的组件都会提供对应的 springboot-starter 包给我们去用&#xff0c;要做一个 starter 包并不难。参照Spring内置的实现就好了&#xff1a; 1、在工程里引入 starter 打包相关的依赖。 2、在我们工程内建 spring.factories 文件&#xff0c;编写我们配置类的全限类…

【芯片设计- RTL 数字逻辑设计入门 番外篇6 -- 术语 Tile 介绍】

文章目录 TILE 介绍Tile 的特点Tile 架构的应用Tile 基础架构示例 TILE 介绍 在系统级芯片&#xff08;System on Chip, SoC&#xff09;设计中&#xff0c;“tile” 是一个可以指代不同概念的术语&#xff0c;但通常它指的是芯片上的一个独立的功能单元或核心。一个 tile 可以…

【论文+App试玩+图像到视频】2311.Animate-anyone:上传1张图片为任何人制作动画(用于角色动画的一致且可控的图像到视频合成)(暂未开源)

项目主页&#xff1a;https://humanaigc.github.io/animate-anyone/ 论文: Animate Anyone: Consistent and Controllable Image-to-Video Synthesis for Character Animation 摩尔线程复现代码&#xff1a;https://github.com/MooreThreads/Moore-AnimateAnyone 原作者讲解&am…

【华为 ICT HCIA eNSP 习题汇总】——题目集6

1、IEEE 802.11g 标准支持的最大协商速率为&#xff08;&#xff09;。 A、300Mbps B、150Mbps C、54Mbps D、1200Mbps 考点&#xff1a;无线局域网 解析&#xff1a;&#xff08;C&#xff09; IEEE 802.11系列标准如下表&#xff1a; 标准数据传输速率主要技术IEEE 802.111M…

Wordpress seo优化该怎么做?

Wordpress作为开源管理系统&#xff0c;目前已然是世界上最流行的cms之一&#xff0c;这不仅仅因为他开源&#xff0c;对用户友好&#xff0c;让任何人都能轻而易举的制作网站&#xff0c;更是因为这套程序对于搜索引擎非常友好&#xff0c;是做谷歌seo的不二之选 Wordpress作为…

YOLOv5改进 | Conv篇 | 利用YOLO-MS的MSBlock轻量化网络结构(既轻量又长点)

一、本文介绍 本文给大家带来的改进机制是利用YOLO-MS提出的一种针对于实时目标检测的MSBlock模块(其其实不能算是Conv但是其应该是一整个模块),我们将其用于C2f中组合出一种新的结构,来替换我们网络中的模块可以达到一种轻量化的作用,我将其用于我的数据集上实验,包括多个…

app逆向-frida安装调试

文章目录 一、前言二、安装三、hook调试&#xff0c;hook java类 一、前言 frida是一款基于python javascript 的hook框架&#xff0c;可运行在android ios linux winosx等各平台&#xff0c;主要使用动态二进制插桩技术 官方网站&#xff1a;https://frida.re/docs/home/ a…

绝地求生:PUBG服务条款修订,是否因为PLAYERUNKNOWN礼包导致?

嗨&#xff0c;我是闲游盒~ PUBG全球的官网&#xff0c;刚刚更新了一条《PUBG: 绝地求生》。 通知内容大概如下 对所有平台的PUBG的服务条款进行修订&#xff0c;修订安排于2月7日后生效。 从修订的条款内容猜测&#xff0c;本次修订安排是因为PLAYERUNKNOWN礼包 记得预约荣…

C++ STL之list的使用及模拟实现

文章目录 1. 介绍2. list类的使用2.1 list类对象的构造函数2.2 list类对象的容量操作2.3 list类对象的修改操作2.4 list类对象的访问及遍历操作 3. list类的模拟实现 1. 介绍 英文解释&#xff1a; 也就是说&#xff1a; list是可以在常数范围内在任意位置进行插入和删除的序列…

单点登陆(SSO)基于CAS实现前后端分离的SSO系统开发「IDP发起」

关于其他前端常见登录实现单点登录方案&#xff0c;请见「前端常见登录实现方案 单点登录方案 」 前沿 单点登录&#xff08;SSO&#xff09;&#xff0c;英文全称为 Single Sign On。 SSO 是指在多个应用系统中&#xff0c;用户只需要登录一次&#xff0c;就可以访问所有相互…

macbookpro可以玩什么游戏

最近几年苹果在游戏领域的动作越来越频繁&#xff0c;在当地时间6月6日举行的的WWDC 2023上还请来了小岛秀夫和他的《死亡搁浅导演剪辑版》到现场为苹果电脑站台。事实上&#xff0c;在不久的将来&#xff0c;我们还真有机会看到越来越多Windows上的大作运行在搭载苹果M系列芯片…

旅游项目day14

其他模块数据初始化 搜索实现 请求一样&#xff0c;但是参数不一样&#xff0c;根据type划分。 后台需要提供一个搜索接口。 请求分发器&#xff1a; 全部搜索 目的地搜索 精确搜索、无高亮展示 攻略搜索 全文搜索、高亮显示、分页 游记搜搜 用户搜索 丝袜哥

小程序使用echarts图表-雷达图

本文介绍下小程序中如何使用echarts 如果是通过npm安装&#xff0c;这样是全部安装的&#xff0c;体积有点大 我这边是使用echarts中的一个组件来实现的&#xff0c;下边是具体流程&#xff0c;实际效果是没有外边的红色边框的&#xff0c;加红色边框的效果是这篇说明 1.echa…

什么是网络?

你是一台电脑&#xff0c;你的名字叫 A 很久很久之前&#xff0c;你不与任何其他电脑相连接&#xff0c;孤苦伶仃。 直到有一天&#xff0c;你希望与另一台电脑 B 建立通信&#xff0c;于是你们各开了一个网口&#xff0c;用一根网线连接了起来。 用一根网线连接起来怎么就能&…

【QT+QGIS跨平台编译】之七:【libjpeg+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

文章目录 一、libjpeg介绍二、文件下载三、文件分析四、pro文件五、编译实践一、libjpeg介绍 libjpeg是一个广泛使用的jpeg图像压缩和解压的函数库,采用 C 语言开发。 2013年1月,Independent JPEG Group发布了版本9,对新引入的无损编码模式进行了改进。2022年1月,发布了版…

html5实现好看的年会邀请函源码模板

文章目录 1.设计来源1.1 邀请函主界面1.2 诚挚邀请界面1.3 关于我们界面1.4 董事长致词界面1.5 公司合作方界面1.6 活动流程界面1.7 加盟支持界面1.8 加盟流程界面1.9 加盟申请界面1.10 活动信息界面 2.效果和源码2.1 动态效果2.2 源码目录结构 源码下载 作者&#xff1a;xcLei…

《PCI Express体系结构导读》随记 —— 第I篇 第3章 PCI总线的数据交换(1)

前言中曾提到&#xff1a;本章详细阐述了PCI总线的数据传送方式&#xff0c;与Cache相关的内容和预读机制是本章的重点。 PCI Agent设备之间、以及HOST处理器和PCI Agent设备之间可以使用存储器读写和I/O读写等总线事务进行数据传送。在大多数情况下&#xff0c;PCI桥不直接与P…

uniapp组件库Modal 模态框 的使用方法

目录 #平台差异说明 #基本使用 #传入富文本内容 #异步关闭 #点击遮罩关闭 #控制模态框宽度 #自定义样式 #缩放效果 #API #Props #Event #Method #Slots 弹出模态框&#xff0c;常用于消息提示、消息确认、在当前页面内完成特定的交互操作。 #平台差异说明 AppH5微…