微信小程序 开发中的问题(simba_wx)

news2024/11/25 20:51:57

目录

  • 一、[将 proto 文件转成 json 文件](https://blog.csdn.net/wzxzRoad/article/details/129300513)
  • 二、[使用 test.json 文件](https://blog.csdn.net/wzxzRoad/article/details/129300513)
  • 三、[微信小程序插件网址](https://ext.dcloud.net.cn/)
  • 四、[vant-weapp网址](https://vant-contrib.gitee.io/vant-weapp/#/home)
  • 五、[文本读取文件](https://blog.csdn.net/a526001650a/article/details/128146156)
  • 六、[字符串内容转arraybuffer](https://blog.csdn.net/weixin_42577672/article/details/106401697)
  • 七、微信小程序页面跳转 的几种方式
          • wx.navigateTo(OBJECT)
          • wx.redirectTo(OBJECT)
          • wx.redirectTo(OBJECT)
          • wx.switchTab(OBJECT)
          • wx.reLaunch(OBJECT)

一、将 proto 文件转成 json 文件

需要先下载 protobufjs-cli 依赖

npm i -D protobufjs-cli

然后再当前目录下的终端,执行以下命令

npx pbjs -t json proto/test.proto > proto/test.json

proto/test.proto > proto/test.json :意思是找到当前目录的 proto 文件夹下的 test.proto 文件,将该文件转为 test.json 并将该文件放到 proto 文件夹下

二、使用 test.json 文件

npm i -S protobufjs

由于收到数据是二进制的,虽然拿到的 proto 文件的 json 结构,但这还是不能直接使用,还需要下转 protobufjs 依赖,将收到的二进制数据根据 test.json 文件转成对应的 json 结构

import protobuf from "protobufjs";
import protoJson from "./proto/test.json";// 使用 protobufjs 拿到 test.json 的 json 结构
const root = protobuf.Root.fromJSON(protoJson);
// 找到要翻译的包和字段
const protoData = root.lookupType("interface_message.GeneralDetectionMapData");// data是收到二进制数据,使用 decode 方法,将二进制数据根据【包和字段】转成 json 结构的数据,该过程简称:解密
const data = protoData.decode(data);// 当需要发送修改过后的 proto 数据发送给后端时,使用 encode 可将数据转成 proto 结构的数据,该过程简称:加密
const protoData = protoData.encode(data).finish()

例如:

const serverUrl = 'http://192.168.200.200:7081';

var protobuf = require('@/weichatPb/protobuf.js');
const awesomeConfig = require('@/proto/order.js');
var AwesomeRoot = protobuf.Root.fromJSON(awesomeConfig);

// 错误结果
var ErrorRequest = AwesomeRoot.lookupType("ErrorMessage");
// 结果sucess
var OperationGeneralResp = AwesomeRoot.lookupType("OperationGeneralResp");

// 获取验证码
var VerificationCodeResp = AwesomeRoot.lookupType("VerifyCodeMessage"); // 获取验证码结果

// 登录
var SignInRes = AwesomeRoot.lookupType("UserLogInRequest"); // 登录传值
var SignInResp = AwesomeRoot.lookupType("LoginResp"); // 登录结果

// 获取初始信息 --> 1:销售  2:商务
var AuthorInitRes = AwesomeRoot.lookupType("AuthorizationFileTicketInitReq"); // 传值
var AuthorInitResp = AwesomeRoot.lookupType("AuthorizationFileTicketInitResp"); // 结果

// 查询授权工单
var SearchAuthorRes = AwesomeRoot.lookupType("GetAuthorizationFileTicketReq"); // 传值
var SearchAuthorResp = AwesomeRoot.lookupType("SalesGetAuthorizationFileTicketResp"); // 结果

// 新建授权工单
var AddAuthorRes = AwesomeRoot.lookupType("AddAuthorizationFileTicketReq"); // 传值

// 关闭工单
var DelRes = AwesomeRoot.lookupType("CloseAuthorizationFileTicketReq"); // 传值

// 修改工单
var UpdateRes = AwesomeRoot.lookupType("EditAuthorizationFileTicketReq"); // 传值

// 审核工单
var ProcessRes = AwesomeRoot.lookupType("AuditAuthorizationFileTicketReq"); // 传值

// 下载附件
var AnnexRes = AwesomeRoot.lookupType("DeleteAuthFileAttachmentReq"); // 传值

// 上传附件
var UpAnnexRes = AwesomeRoot.lookupType("AddAuthFileAttachmentReq"); // 传值

const timeout = 15000;
export class Api {
	// 公共发送请求体
	static _request(url, requestBuffer, resMode) {
		var promise = new Promise((resolve, reject) => {
			var that = this;
			uni.request({
				url: serverUrl + url,
				method: "POST",
				dataType: 'protobuf',
				data: requestBuffer,
				responseType: "arraybuffer",
				timeout: timeout,
				header: {
					"X-Requested-With": "XMLHttpRequest",
					"Content-Type": "application/octet-stream",
				},
				success(res) {
					if (res.statusCode == 200) {
						var deMessage = resMode.decode(res.data);
					} else {
						var deMessage = ErrorRequest.decode(res.data);
					}
					resolve(deMessage);
				},
				error: function (e) {
					reject("网络出错");
					console.log("网络出错")
				}
			});
		});
		return promise;
	}
	// 序列化数据
	static getUnit8Data(Message, payload) {
		var message = Message.create(payload);
		var buffer = Message.encode(message).finish();
		var requestBuffer = new Uint8Array([...buffer]).buffer;
		return requestBuffer
	}

	// 获取初始信息
	static async getAuthInit(payload) {
		var url = "/AuthorizationFileTicketInit";
		var requestBuffer = Api.getUnit8Data(AuthorInitRes, payload)
		const res = await Api._request(url, requestBuffer, AuthorInitResp);
		console.log(res)
		return res;
	}

	// 新建授权工单
	static async setAuthData(payload) {
		var url = "/AddAuthorizationFileTicket";
		var requestBuffer = Api.getUnit8Data(AddAuthorRes, payload)
		const res = await Api._request(url, requestBuffer, OperationGeneralResp);
		console.log(res)
		return res;
	}

	// 查询授权工单
	static async getAuthData(payload) {
		var url = "/GetAuthorizationFileTicket";
		var requestBuffer = Api.getUnit8Data(SearchAuthorRes, payload)
		const res = await Api._request(url, requestBuffer, SearchAuthorResp);
		console.log(res)
		return res;
	}

	// 关闭工单
	static async getDel(payload) {
		var url = "/CloseAuthorizationFileTicket";
		var requestBuffer = Api.getUnit8Data(DelRes, payload)
		const res = await Api._request(url, requestBuffer, OperationGeneralResp);
		console.log(res)
		return res;
	}

	// 修改工单
	static async getUpdate(payload) {
		var url = "/EditAuthorizationFileTicket";
		var requestBuffer = Api.getUnit8Data(UpdateRes, payload)
		const res = await Api._request(url, requestBuffer, OperationGeneralResp);
		console.log(res)
		return res;
	}

	// 审核工单
	static async getProcess(payload) {
		var url = "/AuditAuthorizationFileTicket";
		var requestBuffer = Api.getUnit8Data(ProcessRes, payload)
		const res = await Api._request(url, requestBuffer, OperationGeneralResp);
		console.log(res)
		return res;
	}

	// 删除附件
	static async getAnnex(payload) {
		var url = "/DeleteAuthFileAttachment";
		var requestBuffer = Api.getUnit8Data(AnnexRes, payload)
		const res = await Api._request(url, requestBuffer, OperationGeneralResp);
		console.log(res)
		return res;
	}

	// 上传附件
	static async getUpAnnex(payload) {
		var url = "/AddAuthFileAttachment";
		var requestBuffer = Api.getUnit8Data(UpAnnexRes, payload)
		const res = await Api._request(url, requestBuffer, OperationGeneralResp);
		console.log(res)
		return res;
	}

	// 获取验证码
	static async getVerificationCode() {
		let payload = {}
		var url = "/GenerateVerificationCode";
		var requestBuffer = Api.getUnit8Data(AuthorInitRes, payload)
		const res = await Api._request(url, requestBuffer, VerificationCodeResp);
		return res;
	}

	// 登录
	static async getSignIn(payload) {
		var url = "/UserLogin";
		var requestBuffer = Api.getUnit8Data(SignInRes, payload)
		const res = await Api._request(url, requestBuffer, SignInResp);
		return res;
	}
}

三、微信小程序插件网址

四、vant-weapp网址

五、文本读取文件

在这里插入图片描述

// this.fileList3 格式如上图所示即可
if (this.fileList3 != 0) {
  for (let i = 0; i < this.fileList3.length; i++) {
    const fm = wx.getFileSystemManager(); // 获取文件管理器
    var arrayBuffer = new ArrayBuffer(`${this.fileList3[i].size}`);
    try {
      var fd = fm.openSync({
        filePath: this.fileList3[i].path,
      });
      fm.readSync({
        fd: fd,
        arrayBuffer: arrayBuffer, //数据写入的缓冲区
        length: this.fileList3[i].size, //读取的字节数,默认0
      }); // 读取文件内容
      // var enc = new TextDecoder("utf-8");
      // var fileContent = enc.decode(arrayBuffer); //将ArrayBuffer转为字符串

      filesAll.push({
        name: this.fileList3[i].name,
        file: new Uint8Array(arrayBuffer),
      });

      fm.closeSync({ fd: fd }); // 关闭文件
    } catch (exception) {
      console.log("onShow >> 读文件失败, 异常消息: ", exception);
    }
  }
}

六、字符串内容转arraybuffer

微信小程序 JS 字符串string与utf8编码的arraybuffer的相互转换

&#8194最近在做一个微信小程序,和后端用websocket连接,后端要求传输过去的信息是UTF8编码的二进制信息。JS并没有可以直接进行转换的库函数,因此必须自己写一个编码以及解析的函数。
    最开始采用了一个字符一个字符的charCodeAt,但是通过这种方式可以传输非中文的内容,有中文时则无法正确的转换。
    后来参考了网上的一些资料,通过先将字符串编码并转换为byte[],再转换为对应的arraybuffer(解析同理,先将arraybuffer转换为byte[],再进行解码)
    编码及解码的过程较复杂,不过这两个函数是可以直接使用的,同时支持中文和英文。
    
字符串内容转arraybuffer

stringToArrayBuffer(str) {
   var bytes = new Array();
   var len, c;
   len = str.length;
   for (var i = 0; i < len; i++) {
     c = str.charCodeAt(i);
     if (c >= 0x010000 && c <= 0x10ffff) {
       bytes.push(((c >> 18) & 0x07) | 0xf0);
       bytes.push(((c >> 12) & 0x3f) | 0x80);
       bytes.push(((c >> 6) & 0x3f) | 0x80);
       bytes.push((c & 0x3f) | 0x80);
     } else if (c >= 0x000800 && c <= 0x00ffff) {
       bytes.push(((c >> 12) & 0x0f) | 0xe0);
       bytes.push(((c >> 6) & 0x3f) | 0x80);
       bytes.push((c & 0x3f) | 0x80);
     } else if (c >= 0x000080 && c <= 0x0007ff) {
       bytes.push(((c >> 6) & 0x1f) | 0xc0);
       bytes.push((c & 0x3f) | 0x80);
     } else {
       bytes.push(c & 0xff);
     }
   }
   var array = new Int8Array(bytes.length);
   for (var i in bytes) {
     array[i] = bytes[i];
   }
   return array.buffer;
 },

arraybuffer转字符串内容

function arrayBufferToString(arr){
    if(typeof arr === 'string') {  
        return arr;  
    }  
    var dataview=new DataView(arr.data);
    var ints=new Uint8Array(arr.data.byteLength);
    for(var i=0;i<ints.length;i++){
      ints[i]=dataview.getUint8(i);
    }
    arr=ints;
    var str = '',  
        _arr = arr;  
    for(var i = 0; i < _arr.length; i++) {  
        var one = _arr[i].toString(2),  
            v = one.match(/^1+?(?=0)/);  
        if(v && one.length == 8) {  
            var bytesLength = v[0].length;  
            var store = _arr[i].toString(2).slice(7 - bytesLength);  
            for(var st = 1; st < bytesLength; st++) {  
                store += _arr[st + i].toString(2).slice(2);  
            }  
            str += String.fromCharCode(parseInt(store, 2));  
            i += bytesLength - 1;  
        } else {  
            str += String.fromCharCode(_arr[i]);  
        }  
    }  
    return str; 
}

七、微信小程序页面跳转 的几种方式

wx.navigateTo(OBJECT)

保留当前页面,跳转到应用内的某个页面, 小程序中左上角有一个返回箭头,可返回上一个页面,也可以通过方法 wx.navigateBack 返回原页面.

wx.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面, 左上角没有返回箭头,不能返回上一个页面

wx.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面, 左上角没有返回箭头,不能返回上一个页面

wx.switchTab(OBJECT)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面, wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面

wx.reLaunch(OBJECT)

关闭所有页面,打开到应用内的某个页面, 跟wx.redirectTo 一样左上角不会出现返回箭头,但两者却不完全相同

这里要提到小程序中的 getCurrentPages() 方法,在wx.navigateTo中,每跳转一个新的页面,其原始页面就会被加入堆栈,通过调用wx.navigateBack(OBJECT)可通过获取堆栈中保存的页面 返回上一级或多级页面

wx.redirectTo,方法则不会被加入堆栈,但仍可通过wx.navigateBack(OBJECT)方法返回之前堆栈中的页面

wx.reLaunch 方法则会清空当前的堆栈

例如: A跳转到B,B跳转到C,C navigateBack,将返回b页面

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})
// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})
// 在C页面内 navigateBack,将返回b页面
wx.navigateBack({
  delta: 1
})
// 此处是B页面
wx.redirectTo({
 url: 'C?id=1'
})
// 在C页面内 navigateBack,则会返回a页面 
wx.navigateBack({
 delta: 1
 })
// 此处是B页面
wx.reLaunch({
 url: 'C?id=1'
})
// 在C页面内 navigateBack,则无效

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

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

相关文章

为什么停更ROS2机器人课程-2023-

机器人工匠阿杰肺腑之言&#xff1a; 我放弃了ROS2课程 真正的危机不是同行竞争&#xff0c;比如教育从业者相互竞争不会催生ChatGPT…… 技术变革的突破式发展通常是新势力带来的而非传统行业的升级改革。 2013年也就是10年前在当时主流视频网站开启分享&#xff1a; 比如 …

电脑开机后出现哭脸错误无法启动解决方法

电脑开机后出现哭脸错误无法启动解决方法。有用户安装好电脑系统之后&#xff0c;遇到了哭脸错误的情况。出现这样的错误原因有很多。如果你无法找到问题的根源的话&#xff0c;其实都是可以通过U盘重装系统的方法来解决的&#xff1f;接下来我们一起来看看以下的操作教学吧。 …

BM39-序列化二叉树

题目 请实现两个函数&#xff0c;分别用来序列化和反序列化二叉树&#xff0c;不对序列化之后的字符串进行约束&#xff0c;但要求能够根据序列化之后的字符串重新构造出一棵与原二叉树相同的树。 二叉树的序列化(Serialize)是指&#xff1a;把一棵二叉树按照某种遍历方式的结…

flv怎么转换成mp4?这3种方法总有适合你的

flv怎么转换成mp4&#xff1f;首先我们得知道flv为什么转换成mp4&#xff1f;FLV和MP4都是常用的视频格式&#xff0c;其中FLV格式在以前的一些互联网应用中得到了广泛使用。但随着技术的发展和设备的普及&#xff0c;MP4格式逐渐成为了主流的视频格式。因此&#xff0c;将FLV格…

jQuery 在图片和文字中插入内容(多种情况考虑)

昨天接到一个新的需要&#xff0c;在后台文章编辑器中&#xff0c;每一个文章的正文前面&#xff0c;可以单独添加一个电头字段&#xff0c;但是如果在富文本编辑器中最上面就添加图片的话&#xff0c;图片就会把电头和正文中的文字给隔开。需要做的是获取到电头字段&#xff0…

一款纯Web化免费SQL工具,重新定义数据库管理

SQL Studio是一款由麦聪软件研发的多数据库管理工具&#xff0c;提供Windows、Linux 和 MacOS三种版本的软件包&#xff0c;支持中英文两种语言。SQL Studio是用Java编写的&#xff0c;默认使用 JDK 8进行编译。 下载看这里: [SQLStudio] (http://www.maicongs.com/#/home/web)…

shell脚本function传参的使用

这里直接上操作来说明function 的传参 新建一个脚本 vi 1.sh #!/bin/bash function check_a {echo $2echo $3echo "this is check_a" } function check_b {echo $2echo "this is check_b" } $1 #$1作为选择执行哪个function的参数 执行以下这个脚本传…

测试不够快?试试这招!让pytest多进程/多线程执行测试用例,轻松提升测试效率!

目录&#xff1a;导读 前言&#xff1a; 多进程执行用例之pytest-xdist pytest-xdist分布式测试的原理&#xff1a; pytest-xdist分布式测试的流程&#xff1a; 多线程执行用例之pytest-parallel 常用参数配置 pytest-parallel与pytest-xdist对比说明: 结语 前言&#…

vue修改当前页面query参数

最近在项目中手写分页器&#xff08;为什么手写&#xff0c;因为对分页器样式外观要求比较严苛&#xff09;&#xff0c;遇到一个需求&#xff0c;就是我们在点击分页的时候&#xff0c;再进入详情&#xff0c;之后回退希望能够回到之前的页码值。 解决这个需求&#xff0c;个…

研报精选230425

目录 【行业230425华金证券】电子行业动态分析&#xff1a;23Q1电子板块环比略微下降&#xff0c;半导体设备重仓持股显著上升 【行业230425中泰证券】电力设备与新能源行业周报&#xff1a;特斯拉一季度储能收入高增&#xff0c;宁德时代发布凝胶态电池 【行业230425长城国瑞证…

行业分析| 视频监控——AI自动巡检

随着视频监控的普及&#xff0c;现在很多社区、工地、车间、厂区、超市、商铺、酒店、餐馆等场所都安装了视频监控系统。当安装的视频监控出现故障时&#xff0c;我们该如何进行简单的视频故障识别呢&#xff1f;如果只依靠人工对视频故障识别排查&#xff0c;工作量是相当大的…

动态规划猜法中外部信息简化的相关问题(上)

文章目录 1、Leetcode 312.戳气球&#xff08;困难&#xff09;1.1 题目描述1.2 思路分析1.3 代码实现1.4 启示 2、Leetcode 546.移除盒子&#xff08;困难&#xff09;2.1 题目描述2.2 思路分析2.3 代码实现 3、消除字符3.1 题目描述3.2 思路分析3.3 代码实现 1、Leetcode 312…

ARM buildroot 的引入

一、X210 的 bsp 介绍 1、嵌入式 linux 产品的 bsp 介绍 (1) 大部分的 ARM 架构的 linux 平台的 bsp 的内容和结构都是相似的。 (2) bsp 一般是芯片厂家/板卡厂家提供的。 2、X210 的 linuxQT bsp 整体介绍 (1) tslib_x210_qtopia.tgz 是用来支持 QT 的触摸屏操作的应用层库。…

操作系统笔记——绪论

第一章绪论 1.1 操作系统的基本概念 1.1.1计算机硬件的基本组成 &#xff08;冯 ~诺伊曼模型&#xff09; &#xff0c;由运算器&#xff0c;存储器&#xff0c;控制器&#xff0c;输入设备&#xff0c;输出设备组成。 引入操作系统的目的&#xff1a;提供一个计算机用户与…

【2. 初学ROS,年轻人的第一个Node节点】

【2. 初学ROS&#xff0c;年轻人的第一个Node节点】 1. 工作空间设置2. 创建Package3. 回访依赖包4. 创建Node节点5. 源码编译6. 运行Node节点7. Node节点完善8. 总结 本教程是B站阿杰视频的笔记 视频地址&#xff1a;https://www.bilibili.com/video/BV1nG411V7HW 超声波传感器…

streamx平台部署

一. streamx介绍 StreamPark 总体组件栈架构如下&#xff0c; 由 streampark-core 和 streampark-console 两个大的部分组成 , streampark-console 是一个非常重要的模块, 定位是一个综合实时数据平台&#xff0c;流式数仓平台, 低代码 ( Low Code ), Flink & Spark 任务托…

【PWN刷题__ret2shellcode】[HNCTF 2022 Week1]ret2shellcode

本蒟蒻的ret2shellcode的开篇之作&#xff01; 第一次实战ret2shellcode&#xff0c;该类型的简单题但是也研究了很久! 目录 前言 一、checksec查看二进制文件​ 二、查找后门函数 三、IDA反汇编 bss段 mprotect()函数 四、GDB调试 GDB基本的一些用法 偏移量计算 五…

OpenSearch图搜图、文搜图向量检索最佳实践

一、向量检索介绍 1.1 多模态信息的典型特点-非结构化 信息可以被划分为两大类&#xff1a;当信息能够用数据或统一的结构加以表示&#xff0c;称之为结构化数据&#xff1b;当信息无法用数字或统一的结构表示&#xff0c;称之为非结构化数据。非结构数据与结构化数据相比较而…

Rockchip芯片单板适配OpenHarmony的方法

Rockchip芯片单板适配OpenHarmony的方法 1 整体思路 OpenHarmony是一个上层用户操作系统&#xff0c;在设计上希望兼容不同的底层系统。针对于L2的Linux标准设备&#xff0c;OpenHarmony对Linux、Uboot等底层系统没有太多的依赖&#xff0c;并且在驱动方面&#xff0c;HDF也兼…

蓝桥杯省一经验+考试流程+技巧分享

今年拿了省一&#xff0c;开心&#xff0c;我渡梦酒也可以拿奖奖啦。 我对整体参赛流程还是比较熟悉了&#xff0c;给大家留下一点值得参考的东西~。 这篇纯纯经验和技巧分享&#xff0c;请放心食用~ 目录 考试流程 考试代码怎么提交 考完结束需要做什么 做题小技巧&#xf…