047. uniapp疑难杂症.md

HBuilderXs

01. 格式化处理

问题描述：HBuilderX自带格式化，只要识别到花括号就换行，如何解决？

解决方案：修改编辑器格式化的配置文件

• 快捷键 CMD + , 进入偏好设置 → 插件配置 → jsbeautifyrc.js
• 将 brace_style 值设为 preserve-inline

Technologies

01. 小程序与H5通信

问题描述：开发微信小程序时使用webview加载H5页面，如何通信？

• 参考指南 >>

• 微信小程序相关文档 >>

👉小程序传递数据至H5

目前微信小程序官方不支持小程序传参至H5，不过我们可以通过URI-query传递数据。

👉H5传递数据至小程序

1. 引入JS-SDK

   <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2. 下载 uni.webview.js >> 至本地H5目录，然后格式化，修改代码：

   // -- 修改前
   ((e = e || self).uni = n())
   // -- 修改后
   ((e = e || self).webUni = n())

   **提示：**此举是为了避免命名冲突，将 uni 修改为 webUni。

3. 在 main.ts 文件中引入

   import './libs/uni.webview.1.5.4';
   
   document.addEventListener('UniAppJSBridgeReady', function () {
     console.log('__UniAppJSBridgeReady__');
   });

4. 在需要交互的地方通过 postMessage 发送消息：

   window.webUni.postMessage({
     data: {
       action: '传递的数据',
     }
   });

5. 在uniapp中，绑定 @message 事件监听：

   <web-view :src="APP_H5_URI" @message='getMessage'></web-view>
   
   <script>
     const getMessage = ({ detail: { data } }) => {
   		console.log(data[0]);
   	}
   </script>

   提示：

   • 向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的 message 事件。
   • 返回的数据是一个列表