uni-app用uniapp导出微信小程序插件并用uniapp开发的小程序测试时报错

uni-app用uniapp导出微信小程序插件并用uniapp开发的小程序测试时报错

信息类别 详细信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 CPU: Apple M1;系统:macOS Ventura 13.4
第三方开发者工具版本号 Stable 1.06.2504060
基础库版本号 3.11.2
项目创建方式 CLI
CLI版本号 3.0.0-4080520251106001

示例代码:

小程序项目里不能有下边代码, 有就会报错,去掉@click就好了【开发者工具里运行正常,真机调试时会报错】。详见附件源码和构建后的可运行在开发者工具里的代码

<view [@click](/user/click)="toPluginPage">click me</view>

操作步骤:

插件项目

  1. 创建: npx degit dcloudio/uni-preset-vue#vite-ts test-mp-plugin-vue3
  2. 编写代码(见附件)【注意!!!需要按照帖子:https://ask.dcloud.net.cn/question/215671 修改node_modules里的代码,否则报错】
  3. 构建插件: pnpm run build:mp-weixin --plugin
  4. 把构建出来的plugin目录复制到 下边的“小程序项目”,并修改plugin/plugin.json里的main为"app.js"(附件"在微信开发者工具里的代.zip"已修改)

小程序项目

  1. 创建: npx degit dcloudio/uni-preset-vue#vite test-mp-app-vue3
  2. 编写代码(见附件)
  3. 构建小程序: pnpm run build:mp-weixin
  4. 用微信开发者导入构建后的目录/dist/build/mp-weixin
  5. 在微信开发者工具里修改project.config.json里的下边字段的值:
    • setting.es6 = false; //原来true要改成false,不然报错。
    • compileType = “plugin”
    • 增加: pluginRoot = “plugin” 注:附件"在微信开发者工具里的代.zip"已修改,可直接用

预期结果:

不报错。点击小程序首页的“click me ”能跳到一个不存在的页,路径是“plugin://xxx/page-index”

实际结果:

控制台报错,点击小程序的click me 无响应。

报错信息:

app-service.js:2385 TypeError: Cannot read properties of null (reading 'ctx')  
    at _i (app-service.js:2364)  
    at exports.o (app-service.js:2364)  
    at Proxy.<anonymous> (app-service.js:2419)  
    at Qs (app-service.js:2386)  
    at wn.n [as fn] (app-service.js:2386)  
    at wn.run (app-service.js:2385)  
    at e.update (app-service.js:2386)  
    at app-service.js:2386  
    at Js (app-service.js:2386)  
    at i (app-service.js:2386)

bug描述:

问题描述: 我在用uniapp“开发微信小程序插件”,插件完成以后。 又用uniapp开发了一个测试该插件的小程序,结果运行的时候报下边错误,经排查,只要小程序里有用“@click”就会报错,去掉它就恢复正常了。当然了。如果在开发者工具里不以‘plugin’测试也是正常的。

报错信息:

app-service.js:2385 TypeError: Cannot read properties of null (reading 'ctx')  
    at _i (app-service.js:2364)  
    at exports.o (app-service.js:2364)  
    at Proxy.<anonymous> (app-service.js:2419)  
    at Qs (app-service.js:2386)  
    at wn.n [as fn] (app-service.js:2386)  
    at wn.run (app-service.js:2385)  
    at e.update (app-service.js:2386)  
    at app-service.js:2386  
    at Js (app-service.js:2386)  
    at i (app-service.js:2386)

更多关于uni-app用uniapp导出微信小程序插件并用uniapp开发的小程序测试时报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

15 回复

这和你的测试结果一致吗?我能点进来

更多关于uni-app用uniapp导出微信小程序插件并用uniapp开发的小程序测试时报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


一致的! 如果出现这个就证明是预期内的结果 。 抱歉我忘说一句话了: 在开发者工具里是好的!! 在手机上“真机调试”才会报错!! 在手机上“真机调试”才会报错!! 在手机上“真机调试”才会报错!!

这个错误在开发者工具里正常!! 在手机上“真机调试”才会报错!! 在手机上“真机调试”才会报错!!在手机上“真机调试”才会报错!!

我需要修改什么?真机调试不了

appid我删除了~ 您那随便找个小程序的appid就行,要不也测不了

回复 bober: 我改了宿主appid为我自己的,也不行

开发者者工具可运行代码里的: project.config.json 和 app.json里 找到占位的“MY_APP_IDIDID”把它替换成真实微信小程序的appid就行。

另外 两份源码里的manifest里的appid我也删掉了,您复现的话,也需要补充下~

回复 DCloud_UNI_JBB: 开发者工具可运行的代码里要修改appid的话,涉及两个文件,三处。 占位都是“ MY_APP_IDIDID”全局替换就行~

回复 bober: 我这边测试logo没有显示,title没显示,只显示了一个click me,目前暂不确定这个是微信小程序的bug还是uniapp的bug

回复 DCloud_UNI_JBB: 这说明您那边复现这个问题了~ 但是,您这边暂时也处理不了是吧?尴尬了~~

回复 bober: 我不太确定这个是谁的bug

回复 DCloud_UNI_JBB: 请问下uniapp-x是支持生成“微信小程序插件”吗?

回复 bober: 支持

这个错误是由于在插件模式下,微信小程序基础库对事件处理机制的限制导致的。在插件环境中,事件绑定需要通过特定的插件上下文来访问组件实例,而直接使用 @click 绑定事件时,基础库无法正确获取到当前组件的 ctx 对象。

解决方案:

  1. 使用 [@tap](/user/tap) 替代 @click: 在小程序插件环境中,推荐使用 [@tap](/user/tap) 来处理点击事件,因为这是小程序原生的事件绑定方式,兼容性更好。

    <view [@tap](/user/tap)="toPluginPage">click me</view>
回到顶部