小程序音视频等API调用的简单封装教程

今天春哥团队虎子给大家讲讲小程序音视频等API调用的简单封装教程。



本文主要在Taro中使用。
在小程序中引入异步

1. // 1、下载 yarn add @tarojs/async-await
2. // 2、引入 app.tsx
3. import "@tarojs/async-await";

1、API封装

1. // eslint-disable-next-line jsx-closing-bracket-location
2. const WxActions = {
3. async fnSaveVideo(src, content = "要保存视频到本地相册吗") {
4. await this.fnWxSetting("scope.writePhotosAlbum");
5. await this.fnShowModal(content, "提示");
6. const res = await this.fnDownFile(src);
7. this.fnSaveFile(res);
8. },
9. /** 保存文件 */
10. fnSaveFile(res) {
11. const that = this;
12. return new Promise((resolve, reject) => {
13. wx.showLoading({
14. title: "加载中",
15. });
16. wx.saveVideoToPhotosAlbum({
17. filePath: res.tempFilePath,
18. success(o) {
19. console.log(o.errMsg);
20. wx.hideLoading();
21. that.fnShowToast("保存视频成功", "none", 1500);
22. resolve();
23. },
24. fail(err) {
25. wx.hideLoading();
26. console.log(err);
27. that.fnShowToast("保存视频失败", "none", 3000);
28. reject();
29. },
30. });
31. });
32. },
33. /** 下载文件 */
34. fnDownFile(src) {
35. const that = this;
36. return new Promise((resolve, reject) => {
37. wx.showLoading({
38. title: "加载中",
39. });
40. wx.downloadFile({
41. url: src,
42. success(res) {
43. console.log(res);
44. // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
45. if (res.statusCode === 200) {
46. wx.hideLoading();
47. resolve(res);
48. } else {
49. wx.hideLoading();
50. that.fnShowToast("下载视频失败", "none", 3000);
51. reject();
52. }
53. },
54. fail(err) {
55. wx.hideLoading();
56. console.log(err);
57. that.fnShowToast("下载视频失败", "none", 3000);
58. reject();
59. },
60. });
61. });
62. },
63. /** 授权检测 */
64. fnWxSetting(scope) {
65. const that = this;
66. return new Promise((resolve, reject) => {
67. wx.getSetting({
68. success(res) {
69. console.log(res);
70. if (!res.authSetting[scope]) {
71. wx.authorize({
72. scope: scope,
73. success() {
74. that.fnShowToast("授权成功", "none", 1500);
75. that.fnWxSetting(scope);
76. },
77. fail(err) {
78. console.log(err);
79. that.fnShowToast("授权失败", "none", 1500);
80. reject();
81. },
82. });
83. } else {
84. resolve();
85. }
86. },
87. });
88. });
89. },
90. /** toast提示 */
91. fnShowToast(title = "成功", icon = "success", duration = 2000) {
92. wx.showToast({
93. title,
94. icon,
95. duration,
96. });
97. },
98. /** dialog弹窗 */
99. fnShowModal(content, title = "提示") {
100. const that = this;
101. return new Promise((resolve, reject) => {
102. wx.showModal({
103. title,
104. content,
105. success(res) {
106. if (res.confirm) {
107. console.log("用户点击确定");
108. resolve();
109. } else if (res.cancel) {
110. console.log("用户点击取消");
111. that.fnShowToast("取消", "none", 1500);
112. reject();
113. }
114. },
115. });
116. });
117. },
118. };
119. export default WxActions;

2、使用

1. // 1、引入WxActions
2. // 2、调用
3. /** 保存视频到本地 */
4. saveVideo() {
5. console.log(this.state.videoSrc);
6. WxActions.fnSaveVideo(this.state.videoSrc);