HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

还没有: 输入框输入为空提示

输入框

还没有: 输入框输入为空提示

还没有: 输入框输入为空提示

HbuilderX更新后打包un-appi项目报错:Unexpected token s in JSON at position 116...读取app.json失败...

移动APP bug反馈 打包 uniapp HBuilderX

没人会吗???项目本来没有问题,真机测试打包测试都正常,项目放置几天没动,期间更新了一次hbuilderX,再次打包和测试都报错,不知道是什么原因,求指教。

[HBuilder] 18:03:54.894 SyntaxError: Unexpected token s in JSON at position 116
[HBuilder] 18:03:54.895 at JSON.parse ()
[HBuilder] 18:03:54.895 at parseConfig (D:\GCY-program\HBuilderX\plugins\weapp-tools\lib\index.js:1:5457)
[HBuilder] 18:03:54.896 at index (D:\GCY-program\HBuilderX\plugins\weapp-tools\lib\index.js:1:15980)
[HBuilder] 18:03:54.896 at Promise (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-hbuilderx\packages\webpack-app-plus-plugin\index.js:103:13)
[HBuilder] 18:03:54.897 at new Promise ()
[HBuilder] 18:03:54.897 at compiler.hooks.done.tapPromise.compilation (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-hbuilderx\packages\webpack-app-plus-plugin\index.js:81:16)
[HBuilder] 18:03:54.898 at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\tapable\lib\HookCodeFactory.js:32:10), :17:17)
[HBuilder] 18:03:54.899 at AsyncSeriesHook.lazyCompileHook (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\tapable\lib\Hook.js:154:20)
[HBuilder] 18:03:54.900 at emitRecords.err (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\webpack\lib\Compiler.js:261:22)
[HBuilder] 18:03:54.900 at Compiler.emitRecords (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\webpack\lib\Compiler.js:375:39)
[HBuilder] 18:03:54.901 at emitAssets.err (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\webpack\lib\Compiler.js:255:10)
[HBuilder] 18:03:54.902 at hooks.afterEmit.callAsync.err (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\webpack\lib\Compiler.js:361:14)
[HBuilder] 18:03:54.903 at _err0 (eval at create (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\tapable\lib\HookCodeFactory.js:32:10), :20:1)
[HBuilder] 18:03:54.905 at callback (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\copy-webpack-plugin\dist\index.js:126:17)
[HBuilder] 18:03:54.906 at afterEmit (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\copy-webpack-plugin\dist\index.js:220:13)
[HBuilder] 18:03:54.907 at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\tapable\lib\HookCodeFactory.js:32:10), :7:1)
[HBuilder] 18:03:54.908 [ERROR] 读取app.json失败...

继续阅读 »

没人会吗???项目本来没有问题,真机测试打包测试都正常,项目放置几天没动,期间更新了一次hbuilderX,再次打包和测试都报错,不知道是什么原因,求指教。

[HBuilder] 18:03:54.894 SyntaxError: Unexpected token s in JSON at position 116
[HBuilder] 18:03:54.895 at JSON.parse ()
[HBuilder] 18:03:54.895 at parseConfig (D:\GCY-program\HBuilderX\plugins\weapp-tools\lib\index.js:1:5457)
[HBuilder] 18:03:54.896 at index (D:\GCY-program\HBuilderX\plugins\weapp-tools\lib\index.js:1:15980)
[HBuilder] 18:03:54.896 at Promise (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-hbuilderx\packages\webpack-app-plus-plugin\index.js:103:13)
[HBuilder] 18:03:54.897 at new Promise ()
[HBuilder] 18:03:54.897 at compiler.hooks.done.tapPromise.compilation (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-hbuilderx\packages\webpack-app-plus-plugin\index.js:81:16)
[HBuilder] 18:03:54.898 at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\tapable\lib\HookCodeFactory.js:32:10), :17:17)
[HBuilder] 18:03:54.899 at AsyncSeriesHook.lazyCompileHook (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\tapable\lib\Hook.js:154:20)
[HBuilder] 18:03:54.900 at emitRecords.err (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\webpack\lib\Compiler.js:261:22)
[HBuilder] 18:03:54.900 at Compiler.emitRecords (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\webpack\lib\Compiler.js:375:39)
[HBuilder] 18:03:54.901 at emitAssets.err (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\webpack\lib\Compiler.js:255:10)
[HBuilder] 18:03:54.902 at hooks.afterEmit.callAsync.err (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\webpack\lib\Compiler.js:361:14)
[HBuilder] 18:03:54.903 at _err0 (eval at create (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\tapable\lib\HookCodeFactory.js:32:10), :20:1)
[HBuilder] 18:03:54.905 at callback (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\copy-webpack-plugin\dist\index.js:126:17)
[HBuilder] 18:03:54.906 at afterEmit (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\copy-webpack-plugin\dist\index.js:220:13)
[HBuilder] 18:03:54.907 at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\GCY-program\HBuilderX\plugins\uniapp-cli\node_modules\tapable\lib\HookCodeFactory.js:32:10), :7:1)
[HBuilder] 18:03:54.908 [ERROR] 读取app.json失败...

收起阅读 »

uni canvas画图函数drawImage的一些注意事项

文档

drawImage绘制图片资源无法再包含网络资源,需要事先downloadFile,微信文档已更新,但是uni还未作表注。

drawImage绘制图片资源无法再包含网络资源,需要事先downloadFile,微信文档已更新,但是uni还未作表注。

Android平台使用高德地图(AMAP)被GooglePlay下架的解决方法

AMAP 高德地图 GooglePlay下架 Android

最近有开发者反馈使用HBuilderX开发的应用在GooglePlay应用商店因为使用高德地图(AMAP)被下架,提示如下信息:

Hi Developers,  

After a recent review, has been removed from Google Play due to a policy violation. This app won’t be available to users until you submit a compliant update.  

Issue: Violation of Malicious Behavior policy  

An app distributed via Google Play may not modify, replace, or update itself using any method other than Google Play's update mechanism. Likewise, an app may not download executable code (e.g. dex, JAR, .so files) from a source other than Google Play.  

We found that your app is using a non-compliant version of the AMAP SDK which contains code to download executable code (e.g. dex, JAR, .so files) from a source other than Google Play. If necessary, you can consult your SDK provider(s) for further information.

此问题已于2019年12月11号22:00时更新云端打包机使用高德地图GooglePlay专用版SDK解决。
请更新到HBuilderX2.4.6+版本,云端打包时选择“Google Play”渠道:

打包后重新提交GooglePlay应用商店

本地离线打包

请更新到2019年12月11日发布HBuilderX2.4.6对应的5+SDK版本
使用amap-gp-libs-release.aar替换amap-libs-release.aar
注意:amap-gp-libs-release.aar与amap-libs-release.aar互斥,二者使用时只能选其一。

如果上线还存在问题请及时反馈

继续阅读 »

最近有开发者反馈使用HBuilderX开发的应用在GooglePlay应用商店因为使用高德地图(AMAP)被下架,提示如下信息:

Hi Developers,  

After a recent review, has been removed from Google Play due to a policy violation. This app won’t be available to users until you submit a compliant update.  

Issue: Violation of Malicious Behavior policy  

An app distributed via Google Play may not modify, replace, or update itself using any method other than Google Play's update mechanism. Likewise, an app may not download executable code (e.g. dex, JAR, .so files) from a source other than Google Play.  

We found that your app is using a non-compliant version of the AMAP SDK which contains code to download executable code (e.g. dex, JAR, .so files) from a source other than Google Play. If necessary, you can consult your SDK provider(s) for further information.

此问题已于2019年12月11号22:00时更新云端打包机使用高德地图GooglePlay专用版SDK解决。
请更新到HBuilderX2.4.6+版本,云端打包时选择“Google Play”渠道:

打包后重新提交GooglePlay应用商店

本地离线打包

请更新到2019年12月11日发布HBuilderX2.4.6对应的5+SDK版本
使用amap-gp-libs-release.aar替换amap-libs-release.aar
注意:amap-gp-libs-release.aar与amap-libs-release.aar互斥,二者使用时只能选其一。

如果上线还存在问题请及时反馈

收起阅读 »

uni-app 中配置 navigateToMiniProgramAppIdList 报错

我也是找了很久的解决方案才发现,不是在page.json中配置,是在manifest.json的源码视图中添加,如图

我也是找了很久的解决方案才发现,不是在page.json中配置,是在manifest.json的源码视图中添加,如图

rich-text渲染富文本 图片在APP上显示溢出问题

rich_text

this.$http.httpTokenRequest(url,data).then(res=>{
if(res.data.success){
res.data.result.content=res.data.result.content.replace(/<img/g,"<img style='width:100%'")
this.info=res.data.result;
}
})

继续阅读 »

this.$http.httpTokenRequest(url,data).then(res=>{
if(res.data.success){
res.data.result.content=res.data.result.content.replace(/<img/g,"<img style='width:100%'")
this.info=res.data.result;
}
})

收起阅读 »

原生Android制作精简打包SDK项目(Android Studio-V3.5)

因为之前已经开发了原生的Android项目,所以现在要集成uniapp开发的应用到原生里面,为了方便处理,只能自己制作一个可打包的SDK项目(语言表达不好,见谅哈)
我这边的Android Studio版本是3.5的,我用的是MacMini电脑,所以Android模拟器用的是网页MuMu。

1、按照正常的流程,我们新建一个基于Java语言开发的Android原生项目(可以正常运行起来的项目);

2、从uniapp官网下载最新的Android官方SDK项目
https://ask.dcloud.net.cn/article/103

3、然后我们打开官方SDK项目压缩包,项目列表如下:

4、我们打开SDK,里面的资源库和文件全在这里面,所以从这里面找文件即可;

5、我们把SDK->libs下面的lib.5plus.base-release.aar和uniapp-release.aar拖进我们Android原生项目的libs路径下

6、然后我们配置Android原生项目下的build.gradle(我这里直接是copy官方SDK->HBuilder-Integrate-AS项目下的build.gradle)

7、在build.gradle加入需要的一些第三方库
implementation 'com.android.support:appcompat-v7:29.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
/uniapp所需库-----------------------开始/
implementation 'com.android.support:recyclerview-v7:29.1.0'
implementation 'com.alibaba.android:bindingx-core:1.0.3'
implementation 'com.alibaba.android:bindingx_weex_plugin:1.0.3'
implementation 'com.facebook.fresco:fresco:1.13.0'
implementation "com.facebook.fresco:animated-gif:1.13.0"
/uniapp所需库-----------------------结束/
// 基座需要,必须添加
implementation 'com.github.bumptech.glide:glide:4.9.0'
implementation 'com.alibaba:fastjson:1.1.46.android'

8、接来下就是配置AndroidManifest.xml文件了;我们不需要添加什么特殊的东西,只要记住application的name要设置成android:name="io.dcloud.application.DCloudApplication"

9、然后设置启动页面就可以了

10、接下来就是重点了,把自己的uniapp导入到项目中;
(1)在原生Android项目的main下面创建assets文件夹,里面添加apps(注意是apps,不是app)和data两个子文件夹
(2)去官网的SDK项目中把data下面的全部文件copy到自己项目下的data文件夹下
(3)把uniapp生成的本地包项目导入到apps下面
(4)切记,一定要把data下面的dcloud_control.xml的appid改成项目id。否则是启动不了项目的

11、按照官方文档的提示,在drawable下面添加好icon、push和splash三张图片

12、运行项目就可以正常运行起来了。

因为我这里用的模板不是很多,所以添加的第三方库没有,这个按自己的需求去添加,我这边只是告诉如何自己创建SDK打包项目。
写的不算很好,高手勿喷。

继续阅读 »

因为之前已经开发了原生的Android项目,所以现在要集成uniapp开发的应用到原生里面,为了方便处理,只能自己制作一个可打包的SDK项目(语言表达不好,见谅哈)
我这边的Android Studio版本是3.5的,我用的是MacMini电脑,所以Android模拟器用的是网页MuMu。

1、按照正常的流程,我们新建一个基于Java语言开发的Android原生项目(可以正常运行起来的项目);

2、从uniapp官网下载最新的Android官方SDK项目
https://ask.dcloud.net.cn/article/103

3、然后我们打开官方SDK项目压缩包,项目列表如下:

4、我们打开SDK,里面的资源库和文件全在这里面,所以从这里面找文件即可;

5、我们把SDK->libs下面的lib.5plus.base-release.aar和uniapp-release.aar拖进我们Android原生项目的libs路径下

6、然后我们配置Android原生项目下的build.gradle(我这里直接是copy官方SDK->HBuilder-Integrate-AS项目下的build.gradle)

7、在build.gradle加入需要的一些第三方库
implementation 'com.android.support:appcompat-v7:29.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
/uniapp所需库-----------------------开始/
implementation 'com.android.support:recyclerview-v7:29.1.0'
implementation 'com.alibaba.android:bindingx-core:1.0.3'
implementation 'com.alibaba.android:bindingx_weex_plugin:1.0.3'
implementation 'com.facebook.fresco:fresco:1.13.0'
implementation "com.facebook.fresco:animated-gif:1.13.0"
/uniapp所需库-----------------------结束/
// 基座需要,必须添加
implementation 'com.github.bumptech.glide:glide:4.9.0'
implementation 'com.alibaba:fastjson:1.1.46.android'

8、接来下就是配置AndroidManifest.xml文件了;我们不需要添加什么特殊的东西,只要记住application的name要设置成android:name="io.dcloud.application.DCloudApplication"

9、然后设置启动页面就可以了

10、接下来就是重点了,把自己的uniapp导入到项目中;
(1)在原生Android项目的main下面创建assets文件夹,里面添加apps(注意是apps,不是app)和data两个子文件夹
(2)去官网的SDK项目中把data下面的全部文件copy到自己项目下的data文件夹下
(3)把uniapp生成的本地包项目导入到apps下面
(4)切记,一定要把data下面的dcloud_control.xml的appid改成项目id。否则是启动不了项目的

11、按照官方文档的提示,在drawable下面添加好icon、push和splash三张图片

12、运行项目就可以正常运行起来了。

因为我这里用的模板不是很多,所以添加的第三方库没有,这个按自己的需求去添加,我这边只是告诉如何自己创建SDK打包项目。
写的不算很好,高手勿喷。

收起阅读 »

android中NJS方式使用原生录制视频

安卓 原生 视频 NJS

我们公司有业务要需要做限制拍摄时间的视频录制功能,官方提供的API太坑 太坑 太坑 太坑,压根不能用

感谢这位同行分享的代码:
https://ask.dcloud.net.cn/question/25816?item_id=108332&rf=false

我基于该分享的代码进行改进,成功在本地存储了mp4文件,望对大家有帮助

var Camera = plus.android.importClass('android.hardware.Camera')
,MediaRecorder = plus.android.importClass('android.media.MediaRecorder')
,SurfaceView = plus.android.importClass('android.view.SurfaceView')
,LinearLayout = plus.android.importClass('android.widget.LinearLayout')
,MediaRecorder = plus.android.importClass('android.media.MediaRecorder')
,SurfaceHolder = plus.android.implements('android.view.SurfaceHolder');

var mainActivity = plus.android.runtimeMainActivity()
,cameraView = new LinearLayout(mainActivity)
,surfaceView = new SurfaceView(mainActivity)
,cameraCount = Camera.getNumberOfCameras()
,cameraInfo = new Camera.CameraInfo()
,mediaRecorder = new MediaRecorder()
,cameraId = null
,camera = null
,surfaceHolder = null
,videoFilePath = plus.io.convertLocalFileSystemURL('_downloads/') + Date.now() + '.mp4';

//查询可用摄像头
for (var i = 0;i < cameraCount;i++) {
Camera.getCameraInfo(i, cameraInfo);

if(plus.android.getAttribute(cameraInfo, 'facing') !== cameraInfo.CAMERA_FACING_BACK) continue;  
cameraId = i;  
break;  

}

if(cameraId === null) throw Error('无后置摄像头');

cameraView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
cameraView.addView(surfaceView, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
mainActivity.setContentView(cameraView);

camera = Camera.open(cameraId);
camera.setDisplayOrientation(90);
camera.unlock();
surfaceHolder = surfaceView.getHolder();
mediaRecorder.setCamera(camera);
mediaRecorder.setVideoSource(MediaRecorder.VideoSource.CAMERA);
mediaRecorder.setOutputFormat(MediaRecorder.OutputFormat.MPEG_4);
mediaRecorder.setVideoEncoder(MediaRecorder.VideoEncoder.H264);
mediaRecorder.setVideoSize(1280, 720);
mediaRecorder.setVideoFrameRate(20);
mediaRecorder.setPreviewDisplay(plus.android.invoke(surfaceHolder, 'getSurface'));
mediaRecorder.setOutputFile(videoFilePath);
mediaRecorder.prepare();
mediaRecorder.start();
//camera.release();
setTimeout(function(){
mediaRecorder.stop();
camera.release();
}, 3e3);

继续阅读 »

我们公司有业务要需要做限制拍摄时间的视频录制功能,官方提供的API太坑 太坑 太坑 太坑,压根不能用

感谢这位同行分享的代码:
https://ask.dcloud.net.cn/question/25816?item_id=108332&rf=false

我基于该分享的代码进行改进,成功在本地存储了mp4文件,望对大家有帮助

var Camera = plus.android.importClass('android.hardware.Camera')
,MediaRecorder = plus.android.importClass('android.media.MediaRecorder')
,SurfaceView = plus.android.importClass('android.view.SurfaceView')
,LinearLayout = plus.android.importClass('android.widget.LinearLayout')
,MediaRecorder = plus.android.importClass('android.media.MediaRecorder')
,SurfaceHolder = plus.android.implements('android.view.SurfaceHolder');

var mainActivity = plus.android.runtimeMainActivity()
,cameraView = new LinearLayout(mainActivity)
,surfaceView = new SurfaceView(mainActivity)
,cameraCount = Camera.getNumberOfCameras()
,cameraInfo = new Camera.CameraInfo()
,mediaRecorder = new MediaRecorder()
,cameraId = null
,camera = null
,surfaceHolder = null
,videoFilePath = plus.io.convertLocalFileSystemURL('_downloads/') + Date.now() + '.mp4';

//查询可用摄像头
for (var i = 0;i < cameraCount;i++) {
Camera.getCameraInfo(i, cameraInfo);

if(plus.android.getAttribute(cameraInfo, 'facing') !== cameraInfo.CAMERA_FACING_BACK) continue;  
cameraId = i;  
break;  

}

if(cameraId === null) throw Error('无后置摄像头');

cameraView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
cameraView.addView(surfaceView, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
mainActivity.setContentView(cameraView);

camera = Camera.open(cameraId);
camera.setDisplayOrientation(90);
camera.unlock();
surfaceHolder = surfaceView.getHolder();
mediaRecorder.setCamera(camera);
mediaRecorder.setVideoSource(MediaRecorder.VideoSource.CAMERA);
mediaRecorder.setOutputFormat(MediaRecorder.OutputFormat.MPEG_4);
mediaRecorder.setVideoEncoder(MediaRecorder.VideoEncoder.H264);
mediaRecorder.setVideoSize(1280, 720);
mediaRecorder.setVideoFrameRate(20);
mediaRecorder.setPreviewDisplay(plus.android.invoke(surfaceHolder, 'getSurface'));
mediaRecorder.setOutputFile(videoFilePath);
mediaRecorder.prepare();
mediaRecorder.start();
//camera.release();
setTimeout(function(){
mediaRecorder.stop();
camera.release();
}, 3e3);

收起阅读 »

rich-text在h5下丢失样式解决办法

richtext uniapp

跟vue的v-html丢失样式解决办法一样,在css中用 .xxx >>> .xxx 解决 (样式穿透),在less中用 .xxx /deep/ .xxxx

跟vue的v-html丢失样式解决办法一样,在css中用 .xxx >>> .xxx 解决 (样式穿透),在less中用 .xxx /deep/ .xxxx

uniapp开发小程序,全局应用websocket

微信小程序 WEBSOCKET

以前写vue页面的时候写过聊天室,这次用uniapp开发小程序,用到了websocket,记录下心得体会

前言:
后台使用了nodejs的express-ws模块,分享一篇介绍express-ws非常好的帖子https://www.jianshu.com/p/136da96d3d48
对于前端人员,不用管后台socket如何实现的,用的什么模块,因为socket只是个协议
在uniapp中,也不用纠结用框架自带的websocket的api,还是引入socket.io.js。
既然框架已经给我们集成这个功能了,直接用就对了,非常方便

首先在app.vue中建立连接
注:在任意组件下建立socket连接均可,框架提供的api是全局的

        onShow: function() {  
            console.log('App Show')  
            uni.connectSocket({  
                url: 'wss://localhost', //仅为示例,并非真实接口地址。  
                success: () => {  
                    console.log('socket success');  
                },  
                fail: (err) => {  
                    console.log(err)  
                },  
                complete: () => {}  
            });  
        },  
        onHide: function() {  
            console.log('App Hide')  
            uni.closeSocket({  
                code:1000,  
                reason:'App Hide'  
            })  
        }

建立连接后,在任意组件中调用相关api即可,实在是简单得不能简单了

以下是测试结果

ps:也可以用uni.connectSocket() 接口创建SocketTask 对象,在main.js中全局注册,优点是使用更方便,缺点是关闭连接后,需在代码中实现重新打开连接!

继续阅读 »

以前写vue页面的时候写过聊天室,这次用uniapp开发小程序,用到了websocket,记录下心得体会

前言:
后台使用了nodejs的express-ws模块,分享一篇介绍express-ws非常好的帖子https://www.jianshu.com/p/136da96d3d48
对于前端人员,不用管后台socket如何实现的,用的什么模块,因为socket只是个协议
在uniapp中,也不用纠结用框架自带的websocket的api,还是引入socket.io.js。
既然框架已经给我们集成这个功能了,直接用就对了,非常方便

首先在app.vue中建立连接
注:在任意组件下建立socket连接均可,框架提供的api是全局的

        onShow: function() {  
            console.log('App Show')  
            uni.connectSocket({  
                url: 'wss://localhost', //仅为示例,并非真实接口地址。  
                success: () => {  
                    console.log('socket success');  
                },  
                fail: (err) => {  
                    console.log(err)  
                },  
                complete: () => {}  
            });  
        },  
        onHide: function() {  
            console.log('App Hide')  
            uni.closeSocket({  
                code:1000,  
                reason:'App Hide'  
            })  
        }

建立连接后,在任意组件中调用相关api即可,实在是简单得不能简单了

以下是测试结果

ps:也可以用uni.connectSocket() 接口创建SocketTask 对象,在main.js中全局注册,优点是使用更方便,缺点是关闭连接后,需在代码中实现重新打开连接!

收起阅读 »