uni-app在真机调试下兼容ethers的方法

news2024/11/21 0:39:18

一、安装ethers

二、renderjs

三、注意事项

uni-app开发跨平台应用程序，项目搭建主要前端框是Uni-app + Vue3 + TS +Vite，项目搭建参考文章Uni-app + Vue3 + TS +Vite 创建项目

Hbuilderx版本是3.6.17

一、安装ethers

yarn add ethers

如果像ethers文档中说的那样直接导入的话，在真机调试下会出现如下错误：

reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->Uncaught Error: unable to locate global object
at getGlobal (app-service.js:15721:11)
at (app-service.js:15723:21)
at (app-service.js:18190:3)

查看uni-app官方文档，根据官方文档中给出的echarts的案例，使用renderjs引入ethers。

二、renderjs

renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和web。

renderjs的主要作用有2个：

大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
在视图层操作dom，运行 for web 的 js库

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节跳动小程序、飞书小程序	QQ小程序
√(2.5.5+，仅支持vue)	√	x	x	x	x	x

nvue的视图层是原生的，无法运行js。但提供了bindingx技术来解决通信阻塞。详见
微信小程序下替代方案是wxs，这是微信提供的一个裁剪版renderjs。详见
web下不存在逻辑层和视图层的通信阻塞，也可以直接操作dom，所以在web端使用renderjs主要是为了跨端复用代码。如果只开发web端，没有必要使用renderjs。

具体代码如下：

<script module="ethers" lang="renderjs">
export default {
	mounted() {
		if (typeof window.ethers === 'function') {
			this.handleInitEthers()
		} else {
			// 动态引入较大类库避免影响页面展示
			const script = document.createElement('script')
			// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
			script.src = 'static/ethers/ethers.umd.min.js'
    //  script.type="text/plain"
			script.onload = this.handleInitEthers.bind(this)
			document.head.appendChild(script)
		}
	},
	methods: {
		handleInitEthers() {
      console.log("ethers=",ethers.version);
			const masterNode =  ethers.utils.HDNode.fromSeed(
   ethers.utils.mnemonicToSeed(
    'ritual camera snap elite clog ice shop brave hedgehog common suggest script'
  )
);
// const masterNode = utils.HDNode.fromMnemonic(seed);
const standardEthereum = masterNode.derivePath(`m/44'/60'/0'/0/${0}`);
const privateHex = standardEthereum.privateKey.replace('0x', '');
console.log(privateHex);
const privateKey = "d2c553d2db7f270a3a8c2c6b7dd908600b76c21468150a23061f10e8442c9799";
console.log(privateKey === privateHex)
		},
		updateEcharts(newValue, oldValue, ownerInstance, instance) {
			// 监听 service 层数据变更
			myChart.setOption(newValue)
		},
		onClick(event, ownerInstance) {
			// 调用 service 层的方法
			console.log(ownerInstance,"=====")
			ownerInstance.callMethod('onViewClick', {
				test: 'test'
			})
		}
	}
}
</script>
<template>
  <view>
    <view>Ethers</view>
  </view>
</template>

注释： ethers.umd.min.js在下载的node_modules安装包当中寻找，然后放到静态文件夹static当中