小程序爬坑记录~

ThoughtZer
660 阅读4分钟

小程序的发展，从一开始的 template 到现在的组件化开发，以及 uni-app、Taro 等框架的兴起。也该去爬爬坑，爬坑的需求来源于之前的一次录音实时评测项目，用到了录音接口以及websocket能力。

框架选择

因为最近一直在用 React 做web开发，对于原生的微信小程序的 API，不是很喜欢回调函数式的写法，所以目标就瞄准了 Taro。下载、安装、初始化在文档中都描述的非常清晰~

使用的一些注意

由于不是使用的原生的微信提供的框架来写，所以有一些地方还是不太相同的。

  • class 与 hooks 写法的不同

在 Taro 的官方文档中，大多数的例子都是用的 class 语法。在 v1.3.0 版本之后支持了 hooks 写法，且基础的 hooks 和 react 保持使用上的相同，并且增加了小程序独有的一些 hooks。主要介绍传送门

  • 引入三方UI库

其实 Taro 官方有一个 Taro-UI 的 UI 组件库，但是通过 github 的 commit 记录看到已经很久没有更新了，所以希望引入别的三方 UI 组件库。比如: Vant Weapp、Lin UI。

由于使用过的是三方的 UI 库，在 Taro 的项目打包编译出来的代码里面是没有 package.json 这个 npm 构建需要的文件的，所以引入组件的方式需要变更，不能按照微信的原生引入三方组件的方式，需要自己单独下载一份组件代码，放到项目中引用。

// 在 components 文件夹中放置打包编译好的 UI 组件
|-- components
|--|-- vant-ui
|--|--|-- button
|--|--|-- card
|--|--|-- checkbox
|--|--|-- dialog
...

// 在组件或者页面中引入
const Page = () => {
  return (
    <vant-button>按钮</vant-button>
  );
}

Page.config = {
  usingComponents: {
    'vant-button': 'path/to/components/vant-ui/button'
  },
};

export default Page;
  • redux 的使用

在官方初始化的模板项目里面，有给到 redux 的使用方式，是通过装饰器 + class 来实现的。但是更换 hooks 之后，就不能使用了。所以需要更换为在 web 开发中 react-redux 的使用方式。

import { connect } from '@tarojs/redux';
import * as actionCreators from 'path/to/actionCreators';

const Page = ({
  stateKey,
}) => {
  return (
    // jsx
  );
}

const mapStateToProps = (state) => {
  return {
    stateKey: state.stateKey,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    dispatchHandler: (arguments) => {
      dispatch(actionCreators.actionFn(arguments));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Test);

当然，以上方式看上去比较繁琐，也可以使用官方提供的 redux-hooks 进行操作。详见

  • 微信小程序官方录音API的使用

录音的能力，在小程序中不需要显示的去获取用户的权限，只是会在用户首次触发了录音事件的时候，给用户提示是否允许获取麦克风的权限。

由于要实时的获取到用户的录音数据，所以需要调用 RecorderManager 录音管理器的 onFrameRecorded 方法，API 在录制到指定帧大小的时候触发。

但是在实际使用过程中，发现了在微信开发者工具中始终不会主动触发此事件，真机调试则可以触发。且谨记只有 MP3 格式设置了 frameSize 才可以触发。

  • websocket 的使用

在录音的过程中，实时触发onFrameRecorded并且传递给后端进行分析。所以使用了 websocket 进行出具传递。

然而在实际操作过程中，由于录音的onFrameRecorded方法必须使用真机调试模式才能查看，但是在真机调试过程中，发现真机调试模式network中，websocket 并不是一个 ws 请求，而是归类在 xhr 中，但是发出请求之后的状态码确实是 101 ，但是却无法查看每一次前后端通信的具体内容。其实在官方的社区论坛很早有开发者提出这个问题，但没有具体的回复答案，详见。

经过一系列的调试之后，发现这个情况只是一个展示上的错误，实际上请求与回复是存在的，但是由于笔者测试的时候 websocket 是用的本地的服务（ip + port）进行测试的，在开发者工具中是完好的，只要一打开真机调试模式就莫名其妙的接收不到消息，导致之后的操作代码都没有执行。

因为微信提供了 不校验合法域名...HTTPS证书 这个选项，在勾选上之后出现的以上问题，所以笔者就没有往 HTTPS 请求的问题上面考虑，但是事实确很残酷，在经历了多次debugger之后仍然不行，最终更换了 https + 域名 之后，以上的问题就不存在了...内心里面一万匹马奔腾而过...

综上: websocket 在真机调试的时候必须使用https + 域名的模式去连接，不然就会出现没有任何报错，但是却不接收消息。与安卓调试 websocket 的情况一致，应该是被拦截掉了。

总结

以上是本次在体验 Taro 开发小程序的过程中，目前所遇到的一些问题，做一个笔录。后续如果还有会继续更新~

avatar
文章
阅读
粉丝