C/C++转WebAssembly及微信小程序调用

上一篇文章讲了C/C++如何转WebAssembly,并测试了在Web端调用。本篇内容和上篇一样,介绍C/C++包转的.wasm包如何在小程序中调用。

说明

本篇是在上一篇步骤1-4的基础上,再做修改,供微信小程序端调用的方法和步骤。

本篇操作手册可以参考如下文档:

  • https://www.cijiyun.com/newsview?id=64139
  • https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm

前情提要

通过上篇文章我们知道,将编写好的C/C++代码打包成.wasm,会同时生成.html、.js文件(具体方法参考 C/C++转WebAssembly流程及Web端调用测试 这一篇中的步骤 1-4)。文件如下:

在这里插入图片描述

对于微信小程序,直接编译打包后的包无法直接调用,所以还需要进行一些代码修改。

注意:此处修改web_assembly_test.js文件,是在上一篇修改之后的基础上再做修改,所以,需要先对上一篇文章有所了解。

具体步骤如下:

第一步:新建文件及目录

在小程序文件夹中新建文件目录,包括:

  • pages/worker目录:用于进行打包文件的调用
  • workers目录:与pages平齐,创建workers目录,用于存放.wasm文件

目录结构如下:

在这里插入图片描述

说明:

  • workers目录中,只需要存放web_assembly_test.wasm即可,其它文件可以不需要。这样做的目的是:为了把.wasm打包进去,并且还可以分包打包
  • 在调用.wasm包的page中(pages/worker目录),只需要.js即可,这个文件包含了一些调用.wasm文件的方法。参考文档:https://www.cijiyun.com/newsview?id=64139

第二步:修改web_assembly_test.js文件

  1. web_assembly_test.js文件的最底部添加
module.exports = {Module: Module
}

如下:

在这里插入图片描述

  1. 注释scriptDirectory = self.location.href代码
// scriptDirectory = self.location.href
  1. 修改instantiateArrayBuffer函数

将该方法修改为如下:

function instantiateArrayBuffer(binaryFile, imports, receiver) {return WXWebAssembly.instantiate('/workers/web_assembly_test.wasm', imports).then(function(instance) {return instance;}).then(receiver, function(reason) {err('failed to asynchronously prepare wasm: ' + reason);// Warn on some common problems.if (isFileURI(wasmBinaryFile)) {err('warning: Loading from a file URI (' + wasmBinaryFile + ') is not supported in most browsers. See https://emscripten.org/docs/getting_started/FAQ.html#how-do-i-run-a-local-webserver-for-testing-why-does-my-program-stall-in-downloading-or-preparing');}abort(reason);})
}

说明:

  • 上面方法中的'/workers/web_assembly_test.wasm',是指.wasm文件的存放路径。最好不要存放在同一个目录,新建一个和pages平级的目录进行存放

修改如下:

  1. 将所有.js文件中的WebAssembly修改为WXWebAssembly

至此,.js文件的修改全部完成了,下面进行方法调用。

第三步:调用方法

参考前一篇文章中的定义,我们定义了两个方法:myFunctionmyMaxFunc。方法的调用位置在pages/worker/index.ts中。

  • 首先,引入文件
const web_assembly_test = require('./web_assembly_test')
  • 其次,使用方法
/*** 生命周期函数--监听页面初次渲染完成*/onReady() {const moudule = web_assembly_test.Modulemoudule.ccall('myMaxFunc', null, null, null)moudule.ccall('myFunction', null, null, null)},

说明:具体调用原理,参考上一篇。

  • 最后,进行结果验证

结合上文中的说明:这两个方法里并没有具体的方法执行,只写了输出。在控制台中查看:

在这里插入图片描述

可以看到,每个方法都在控制台中打印了该方法指定的输出结果。

在小程序中调用方法的功能全部实现。

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

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

相关文章

Vue - 实现文件导出文件保存下载

1 文件导出:使用XLSX插件 需求背景:纯前端导出,如 在前端页面勾选部分表格数据,点击"导出"按钮导出Excel文件。 实现思路: 1.通过XLSX插件的 XLSX.utils.book_new()方法,创建excel工作蒲对象wb…

云计算:OpenStack 配置云主机实例的存储挂载并实现外网互通

目录 一、实验 1. 环境 2.配置存储挂载 3.云主机实例连接外部网络(SNAT) 4.外部网络连接云主机实例(DNAT) 二、问题 1.云主机 ping 不通外部网络 2.nova list 查看云主机列表报错 3.nova list 与 virsh list --all有何区…

o2o生活通全开源尊享版+多城市切换+企业付款+交友IM+平台快报

搭建教程 1.把 pigo2ov282.sql 文件里面的网址 test.souho.net 全部批量替换为你的自己的 2.使用 phpmyadmin 导入 pigo2ov282.sql 到你的数据库(直接访问/phpmyadmin 即可) 3.修改数据库文件/conf/db.php 里的数据库连接信息(请勿使用记事本…

【51单片机系列】DS1302时钟模块扩展实验之与EEPROM结合使用只进行一次初始化工作

本文是关于时钟芯片DS1302的扩展实验。 文章目录 一、实验分析二、proteus仿真原理图三、软件设计及结果 本实验实现的目的:利用AT24C02掉电不丢失的功能,存储数据用来辨别DS1302时钟是否已经初始化,如果初始化就不执行DS1302初始化函数。 一…

无需翻墙|Stable Diffusion WebUI 安装|AI绘画

前言 最近终于有机会从围墙里往外看,了解到外面的世界已经有了天翻地覆的变化,感叹万千,笔者在本地mac,windows,linux,docker部署了不下20遍后,整理出来的linux极简避坑安装方案,供…

鸿鹄电子招投标系统:基于Spring Boot、Mybatis、Redis和Layui的企业电子招采平台源码与立项流程

在数字化时代,企业需要借助先进的数字化技术来提高工程管理效率和质量。招投标管理系统作为企业内部业务项目管理的重要应用平台,涵盖了门户管理、立项管理、采购项目管理、采购公告管理、考核管理、报表管理、评审管理、企业管理、采购管理和系统管理等…

Docker 入门 ------ 基本命令

1. 使用Docker镜像 1.1 获取镜像 主要命令: docker pull NAME[:TAG] NAME 为镜像名称,后跟:版本号,如果没有跟后面的版本号,默认拉取最新的稳定版本 例子: 上述命令相当于:docker.io/library/ubuntu:latest 1.2 查…

机器学习之K-means聚类

概念 K-means是一种常用的机器学习算法,用于聚类分析。聚类是一种无监督学习方法,它试图将数据集中的样本划分为具有相似特征的组(簇)。K-means算法的目标是将数据集划分为K个簇,其中每个样本属于与其最近的簇中心。 以下是K-means算法的基本步骤: 选择簇的数量(K值)…

彻底理解前端安全面试题(1)—— XSS 攻击,3种XSS攻击详解,建议收藏(含源码)

前言 前端关于网络安全看似高深莫测,其实来来回回就那么点东西,我总结一下就是 3 1 4,3个用字母描述的【分别是 XSS、CSRF、CORS】 一个中间人攻击。当然 CORS 同源策略是为了防止攻击的安全策略,其他的都是网络攻击。除了这…

Prometheus通过consul实现自动服务发现

环境,软件准备 本次演示环境,我是在虚拟机上安装 Linux 系统来执行操作,以下是安装的软件及版本: System: CentOS Linux release 7.6Docker: 24.0.5Prometheus: v2.37.6Consul: 1.6.1 注意:这里为了方便启动 Prometheus、Consul服…

RPC介绍

什么是RPC RPC是远程过程调用(Remote Procedure Call)的缩写形式。在学校学编程,我们写一个函数都是在本地调用就行了。但是在互联网公司,服务都是部署在不同服务器上的分布式系统。 SAP(System Applications and Products/企业管…

k8s的资源管理

命令行: kubectl命令行工具优点: 90%以上的场景都可以满足 对资源的增,删,查比较方便,对改不是很友好缺点:命令比较冗长,复杂难记 声明方式:k8s当中的yaml文件实现资源管理----声明式GUI:图形化工具的管理。 查看k8s的…

写在2023岁末:敏锐地审视量子计算的当下

本周,《IEEE Spectrum》刊登了一篇出色的文章,对量子计算(QC)的近期前景进行了深入探讨。 文章的目的并不是要给量子计算的前景泼冷水,而是要说明量子计算的前景还很遥远,并提醒读者量子计算的用例可能很窄…

昇腾910平台安装驱动、固件、CANN toolkit、pytorch

本文使用的昇腾910平台操作系统是openEuler,之前没了解过,不过暂时感觉用起来和centOS差不多。系统架构是ARM,安装包基本都是带aarch64字样,注意和x86_64区别开,别下错了。 安装依赖 cmake 通过yum安装的cmake版本较…

GLTF 编辑器实现逼真3D动物毛发效果

在线工具推荐: 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 要实现逼真的3D动物毛发效果,可以采用以下技术和方法&…

Vue2+element-ui 实现select选择器结合Tree树形控件实现下拉树效果

效果&#xff1a; DOM部分 &#xff1a; // 设置el-option隐藏的下拉选项&#xff0c;选项显示的是汉字label&#xff0c;值是value // 如果不设置一个下拉选项&#xff0c;下面的树形组件将无法正常使用 <el-form-item label"报警区域" prop"monitorId"…

【音视频 ffmpeg 学习】 跑示例程序 持续更新中

环境准备 在上一篇文章 把mux.c 拷贝到main.c 中 使用 attribute(unused) 消除警告 __attribute__(unused)/** Copyright (c) 2003 Fabrice Bellard** Permission is hereby granted, free of charge, to any person obtaining a copy* of this software and associated docu…

Ubuntu 安装MySQL以及基本使用

前言 MySQL是一个开源数据库管理系统&#xff0c;通常作为流行的LAMP&#xff08;Linux&#xff0c;Apache&#xff0c;MySQL&#xff0c;PHP / Python / Perl&#xff09;堆栈的一部分安装。它使用关系数据库和SQL&#xff08;结构化查询语言&#xff09;来管理其数据。 安装…

解析Web自动化测试工具能做什么?

随着互联网的蓬勃发展&#xff0c;Web应用程序在我们生活和工作中扮演着愈发重要的角色。为确保这些Web应用程序的质量、稳定性和安全性&#xff0c;Web自动化测试工具应运而生。本文将介绍Web自动化测试工具的多重功能&#xff0c;以及它们如何在软件开发生命周期中发挥关键作…

【React源码 - ReactDom.render发生了什么】

在React开发中&#xff0c;在入口文件我们都会执行ReactDom.render来讲整个应用挂载在主document中&#xff0c;那其中发生了什么&#xff0c;React是如何讲我们写的JSX代码&#xff0c;一步一步更新Fiber进而挂载渲染的呢。本文主要是基于react17.0.2的源码以及自己的理解来简…