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

2023-10-20 16:40

本文主要是介绍微信小程序 开发中的问题(simba_wx),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

  • 一、[将 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,则无效

这篇关于微信小程序 开发中的问题(simba_wx)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/248346

相关文章

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体(以SimHei为例)步骤

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

SpringSecurity整合redission序列化问题小结(最新整理)

《SpringSecurity整合redission序列化问题小结(最新整理)》文章详解SpringSecurity整合Redisson时的序列化问题,指出需排除官方Jackson依赖,通过自定义反序... 目录1. 前言2. Redission配置2.1 RedissonProperties2.2 Red

nginx 负载均衡配置及如何解决重复登录问题

《nginx负载均衡配置及如何解决重复登录问题》文章详解Nginx源码安装与Docker部署,介绍四层/七层代理区别及负载均衡策略,通过ip_hash解决重复登录问题,对nginx负载均衡配置及如何... 目录一:源码安装:1.配置编译参数2.编译3.编译安装 二,四层代理和七层代理区别1.二者混合使用举例

golang程序打包成脚本部署到Linux系统方式

《golang程序打包成脚本部署到Linux系统方式》Golang程序通过本地编译(设置GOOS为linux生成无后缀二进制文件),上传至Linux服务器后赋权执行,使用nohup命令实现后台运行,完... 目录本地编译golang程序上传Golang二进制文件到linux服务器总结本地编译Golang程序

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操

Redis出现中文乱码的问题及解决

《Redis出现中文乱码的问题及解决》:本文主要介绍Redis出现中文乱码的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 问题的产生2China编程. 问题的解决redihttp://www.chinasem.cns数据进制问题的解决中文乱码问题解决总结

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试