目录
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当中
三、注意事项
- 目前仅支持内联使用。
- 不要直接引用大型类库，推荐通过动态创建 script 方式引用。
- 可以使用 vue 组件的生命周期不可以使用 App、Page 的生命周期
- 视图层和逻辑层通讯方式与 WXS 一致，另外可以通过 this.$ownerInstance 获取当前组件的 ComponentDescriptor 实例。
- 注意逻辑层给数据时最好一次性给到渲染层，而不是不停从逻辑层向渲染层发消息，那样还是会产生逻辑层和视图层的多次通信，还是会卡
- 观测更新的数据在视图层可以直接访问到。
- APP 端视图层的页面引用资源的路径相对于根目录计算，例如：./static/test.js。
- APP 端可以使用 dom、bom API，不可直接访问逻辑层数据，不可以使用 uni 相关接口（如：uni.request）
- H5 端逻辑层和视图层实际运行在同一个环境中，相当于使用 mixin 方式，可以直接访问逻辑层数据。