HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uni-app项目保存图片到相册

js uniapp

uni-app项目保存图片

github地址,喜欢的可以star下哦

插件预览图

功能介绍

1.长按保存图片
2.右下角图片点击保存图片
3.点击图片可以隐藏图片

使用教程

1.插件代码拷贝

  • 下载后把components目录下saveFile.vue文件拷贝到自己项目目录下

2.插件全局配置

  • 在项目里main.js中配置如下代码
import savefile from './components/saveFile.vue'  

Vue.component('savefile',savefile)  

3.插件使用

  • vue页面使用
<template>  
    <view>  
        <!-- 预览图片 -->  
        <savefile v-if="isShowPhoto" :url="qrUrl" @hide="hidePhoto"></savefile>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            qrUrl:'/static/img/img1.jpg',  
            isShowPhoto:true,  
        };  
    },  
    onLoad() {},  
    methods: {  
        hidePhoto(){  
            this.isShowPhoto = false;  
            uni.showToast({  
                title:'图片已隐藏',  
                icon:'none'  
            })  
        }  
    }  
};  
</script>  
兼容性

uni-app项目中使用都兼容 除了H5

继续阅读 »

uni-app项目保存图片

github地址,喜欢的可以star下哦

插件预览图

功能介绍

1.长按保存图片
2.右下角图片点击保存图片
3.点击图片可以隐藏图片

使用教程

1.插件代码拷贝

  • 下载后把components目录下saveFile.vue文件拷贝到自己项目目录下

2.插件全局配置

  • 在项目里main.js中配置如下代码
import savefile from './components/saveFile.vue'  

Vue.component('savefile',savefile)  

3.插件使用

  • vue页面使用
<template>  
    <view>  
        <!-- 预览图片 -->  
        <savefile v-if="isShowPhoto" :url="qrUrl" @hide="hidePhoto"></savefile>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            qrUrl:'/static/img/img1.jpg',  
            isShowPhoto:true,  
        };  
    },  
    onLoad() {},  
    methods: {  
        hidePhoto(){  
            this.isShowPhoto = false;  
            uni.showToast({  
                title:'图片已隐藏',  
                icon:'none'  
            })  
        }  
    }  
};  
</script>  
兼容性

uni-app项目中使用都兼容 除了H5

收起阅读 »

基于MUI制作的租房APP界面模板

mui

基于MUI制作的租房APP界面模板,房屋租赁,房屋中介类手机APP模板,带登录注册个人中心等18个模板
模板下载:https://www.sucaihuo.com/templates/3300.html

继续阅读 »

基于MUI制作的租房APP界面模板,房屋租赁,房屋中介类手机APP模板,带登录注册个人中心等18个模板
模板下载:https://www.sucaihuo.com/templates/3300.html

收起阅读 »

曾经遇到的那些坑(持续更新)+ 良好规范

规范

android原生+dcloud混合开发

规范

1.封装plus.android.invoke('com.xxx.yyy.Demo', 'demo');,判断com.xxx.yyy.Demo路径和demo()方法是否真实存在

静态资源引入

页面中引用的js必须是本地js,以下这种引入js的方式会造成无法加载此js

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
继续阅读 »

android原生+dcloud混合开发

规范

1.封装plus.android.invoke('com.xxx.yyy.Demo', 'demo');,判断com.xxx.yyy.Demo路径和demo()方法是否真实存在

静态资源引入

页面中引用的js必须是本地js,以下这种引入js的方式会造成无法加载此js

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
收起阅读 »

【全开源】可视化DIY微信/百度/支付宝小程序saas平台源码

百度小程序 支付宝小程序 微信小程序 小程序

多多客(doodooke)是一款支持微信、百度、支付宝小程序的第三方SaaS平台。

重要更新
1、开源diy可视化拖拉拽;
2、开源taro三端合一小程序;

3.0新特性
1、支持migrations,可以快速的创建和修改表;
2、支持rewrite,可以将请求转发到修改过的接口;
3、支持view逻辑钩子,可以扩展vue逻辑;
4、支持view视图钩子,可以扩展vue视图;
5、支持cluster,可以启动多个项目;
6、支持本地调试,可以将生产环境的请求转发或复制到本地;
7、支持bin命令,可以快速的处理migration等;

开源版下载:https://gitee.com/doodooke/doodoo
多多客演示:doodooke.com

继续阅读 »

多多客(doodooke)是一款支持微信、百度、支付宝小程序的第三方SaaS平台。

重要更新
1、开源diy可视化拖拉拽;
2、开源taro三端合一小程序;

3.0新特性
1、支持migrations,可以快速的创建和修改表;
2、支持rewrite,可以将请求转发到修改过的接口;
3、支持view逻辑钩子,可以扩展vue逻辑;
4、支持view视图钩子,可以扩展vue视图;
5、支持cluster,可以启动多个项目;
6、支持本地调试,可以将生产环境的请求转发或复制到本地;
7、支持bin命令,可以快速的处理migration等;

开源版下载:https://gitee.com/doodooke/doodoo
多多客演示:doodooke.com

收起阅读 »

【重构版教程】uni-app实战第一季:社区交友类app视频教程

入门教程 视频教程 uniapp 教程

适用人群

具备Html+Css+Javascript基础知识。

课程概述【已完结】【总共283课时】

本季度为uni-app实战项目第一季度,将实战开发社区交友类app,其中会包括发布到安卓端app,IOS端app、微信小程序和支付宝小程序。

重构版特色:

  1. 这次代码比之前少了不少,可维护性更强。
  2. 加入了vuex,过滤器等大多数用法。
  3. 大大减少view组件嵌套,提高了性能
  4. 加入更多过渡动画效果,操作更加顺畅

课程大纲见以下图!

课程学习链接入口:

uni-app实战社区交友类app开发视频教程

https://study.163.com/course/courseMain.htm?courseId=1209188809&share=2&shareId=480000001892585

或者进入网易云课堂,搜索uni-app即可看到

课程目录:(实际参考uni-app实战社区交友类app开发视频教程

继续阅读 »

适用人群

具备Html+Css+Javascript基础知识。

课程概述【已完结】【总共283课时】

本季度为uni-app实战项目第一季度,将实战开发社区交友类app,其中会包括发布到安卓端app,IOS端app、微信小程序和支付宝小程序。

重构版特色:

  1. 这次代码比之前少了不少,可维护性更强。
  2. 加入了vuex,过滤器等大多数用法。
  3. 大大减少view组件嵌套,提高了性能
  4. 加入更多过渡动画效果,操作更加顺畅

课程大纲见以下图!

课程学习链接入口:

uni-app实战社区交友类app开发视频教程

https://study.163.com/course/courseMain.htm?courseId=1209188809&share=2&shareId=480000001892585

或者进入网易云课堂,搜索uni-app即可看到

课程目录:(实际参考uni-app实战社区交友类app开发视频教程

收起阅读 »

阿萨德

work

work

dcloud.io首页滑动是否反人类?

DCloud

dcloud.io首页「他们这么说」点击左右箭头,内容滑动的方向是否反人类呢?

dcloud.io首页「他们这么说」点击左右箭头,内容滑动的方向是否反人类呢?

h5前端UDP发送经验分享,测试可用

mui.plusReady(function(){
testThread()
})
function testThread() {
var App = plus.android.runtimeMainActivity();
var Thread = plus.ios.importClass('java.lang.Thread');
var SocketChannel = plus.android.importClass('java.nio.channels.SocketChannel');
var Selector = plus.android.importClass('java.nio.channels.Selector');
var SelectionKey = plus.android.importClass('java.nio.channels.SelectionKey');
var InetSocketAddress = plus.android.importClass('java.net.InetSocketAddress');
var SocketAddress = plus.android.importClass('java.net.SocketAddress');
var ByteBuffer = plus.android.importClass('java.nio.ByteBuffer');
var Iterator = plus.android.importClass('java.util.Iterator');
var method = plus.android.importClass('java.lang.reflect.Method');
var OutputStreamWriter = plus.android.importClass('java.io.OutputStreamWriter');
//测试改良
var StrictMode = plus.android.importClass('android.os.StrictMode');
var Build = plus.android.importClass('android.os.Build');
if(Build.VERSION.SDK_INT > 9) {
var policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
StrictMode.setThreadPolicy(policy);
}
selectionKey = new SelectionKey();
var Runnable = plus.android.implements('java.lang.Runnable', {
"run": function() {
//选择一组键,其相应的通道已为 I/O 操作准备就绪。
//此方法执行处于阻塞模式的选择操作。
//返回此选择器的已选择键集。
var DatagramPacket = plus.android.importClass("java.net.DatagramPacket");
var DatagramSocket = plus.android.importClass("java.net.DatagramSocket");
var InetAddress = plus.android.importClass("java.net.InetAddress");
var intent = plus.android.newObject("android.content.Intent");
console.log(intent)
// InetAddress
var addr = "192.168.2.230",
port = 8080, // 60000
TTLTime = 5000;
var ia = new InetAddress();
var address = ia.getByName(addr);
console.log(address);
// socket
var socket = new DatagramSocket();
socket.setSoTimeout(TTLTime);
var data = [104, 101, 108, 108, 111];
var packet = new DatagramPacket(data, data.length, address, port);
// 发送数据
try {
socket.send(packet);
} catch(e) {
console.log(e);
}
console.log("Invoked Object’s wahaha: ");
//selectionKeys.clear();
}
});
//方式1启动线程
App.runOnUiThread(Runnable);

}

        你可以试下,我试过可以发送UDP给后台,后台能接收到信息
继续阅读 »

mui.plusReady(function(){
testThread()
})
function testThread() {
var App = plus.android.runtimeMainActivity();
var Thread = plus.ios.importClass('java.lang.Thread');
var SocketChannel = plus.android.importClass('java.nio.channels.SocketChannel');
var Selector = plus.android.importClass('java.nio.channels.Selector');
var SelectionKey = plus.android.importClass('java.nio.channels.SelectionKey');
var InetSocketAddress = plus.android.importClass('java.net.InetSocketAddress');
var SocketAddress = plus.android.importClass('java.net.SocketAddress');
var ByteBuffer = plus.android.importClass('java.nio.ByteBuffer');
var Iterator = plus.android.importClass('java.util.Iterator');
var method = plus.android.importClass('java.lang.reflect.Method');
var OutputStreamWriter = plus.android.importClass('java.io.OutputStreamWriter');
//测试改良
var StrictMode = plus.android.importClass('android.os.StrictMode');
var Build = plus.android.importClass('android.os.Build');
if(Build.VERSION.SDK_INT > 9) {
var policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
StrictMode.setThreadPolicy(policy);
}
selectionKey = new SelectionKey();
var Runnable = plus.android.implements('java.lang.Runnable', {
"run": function() {
//选择一组键,其相应的通道已为 I/O 操作准备就绪。
//此方法执行处于阻塞模式的选择操作。
//返回此选择器的已选择键集。
var DatagramPacket = plus.android.importClass("java.net.DatagramPacket");
var DatagramSocket = plus.android.importClass("java.net.DatagramSocket");
var InetAddress = plus.android.importClass("java.net.InetAddress");
var intent = plus.android.newObject("android.content.Intent");
console.log(intent)
// InetAddress
var addr = "192.168.2.230",
port = 8080, // 60000
TTLTime = 5000;
var ia = new InetAddress();
var address = ia.getByName(addr);
console.log(address);
// socket
var socket = new DatagramSocket();
socket.setSoTimeout(TTLTime);
var data = [104, 101, 108, 108, 111];
var packet = new DatagramPacket(data, data.length, address, port);
// 发送数据
try {
socket.send(packet);
} catch(e) {
console.log(e);
}
console.log("Invoked Object’s wahaha: ");
//selectionKeys.clear();
}
});
//方式1启动线程
App.runOnUiThread(Runnable);

}

        你可以试下,我试过可以发送UDP给后台,后台能接收到信息
收起阅读 »

UniApp Android 仿微信 短视频拍摄 与 拍照一体插件

Android 短视频 uniapp

Android 短视频拍摄 与 拍照一体插件

参数介绍

参数名称 参数说明 默认值 类型
setMaxduration 设置最大的可录制时间(单位/秒) 10 int
setFeatures 设置拍摄模式:1=>拍照模式,2=>拍摄模式,3=> 两者都可以 3 int
setTip 设置提示文字 轻按拍照,长按录影 string
setMediaQuality 设置制视频分辨率,越大越清晰,视频也会长大 16*100000 int
setFolder 设置存储的文件夹名称 JCameraVideo string

使用方法

把插件放在根目录 nativeplugins 文件夹下,如没有则创建一个 nativeplugins 文件夹,然后直接提交云打包即可.

在需要的页面引入插件

const camera=uni.requireNativePlugin('Html5app-Camera');

如何调起拍摄

camera.open({setMaxduration:20},result=>{

this.text=JSON.stringify(result);

});

成功返回结果

参数名称 参数说明
result 返回结果 成功 "success" / 取消 "cancel"
message 提示内容
image 图片路径:包括拍摄时返回视频第一帧视频截图
mp4 视频路径
type 视频"video"" / 拍照 "image"

Android 示例扫一扫下载体验

扫一扫下载体验

短视频拍摄

HTML5+混合APP开发社区: http://www.html5-app.com/show/117

继续阅读 »

Android 短视频拍摄 与 拍照一体插件

参数介绍

参数名称 参数说明 默认值 类型
setMaxduration 设置最大的可录制时间(单位/秒) 10 int
setFeatures 设置拍摄模式:1=>拍照模式,2=>拍摄模式,3=> 两者都可以 3 int
setTip 设置提示文字 轻按拍照,长按录影 string
setMediaQuality 设置制视频分辨率,越大越清晰,视频也会长大 16*100000 int
setFolder 设置存储的文件夹名称 JCameraVideo string

使用方法

把插件放在根目录 nativeplugins 文件夹下,如没有则创建一个 nativeplugins 文件夹,然后直接提交云打包即可.

在需要的页面引入插件

const camera=uni.requireNativePlugin('Html5app-Camera');

如何调起拍摄

camera.open({setMaxduration:20},result=>{

this.text=JSON.stringify(result);

});

成功返回结果

参数名称 参数说明
result 返回结果 成功 "success" / 取消 "cancel"
message 提示内容
image 图片路径:包括拍摄时返回视频第一帧视频截图
mp4 视频路径
type 视频"video"" / 拍照 "image"

Android 示例扫一扫下载体验

扫一扫下载体验

短视频拍摄

HTML5+混合APP开发社区: http://www.html5-app.com/show/117

收起阅读 »

【精确到秒】mui 日期时间选择器修改版

mui 选择器 时间 日期

1、业务需要,需要时间选择器精确到秒,因为native模式的时间控件也只能精确到分,所以就直接对mui的日期控件稍作修改;
2、为了偷懒,就直接在mui.picker.min.js上稍加修改,并在mui.picker.min.css添加了相应的css样式(css样式也可以另外放),新增的相关代码几乎是跟秒相关的(添加的js代码,分布区域比较散而且多,所以没添加备注,可自行对比;);
3、另外,我没有改变mui日期控件type的五种类型,另外新增了一种标准格式为"年月日时分秒"的"alltime"类型。之前默认的是datetime(年月日时分),现修改为alltime类型。
4、已上传附件,可供下载体验 。

继续阅读 »

1、业务需要,需要时间选择器精确到秒,因为native模式的时间控件也只能精确到分,所以就直接对mui的日期控件稍作修改;
2、为了偷懒,就直接在mui.picker.min.js上稍加修改,并在mui.picker.min.css添加了相应的css样式(css样式也可以另外放),新增的相关代码几乎是跟秒相关的(添加的js代码,分布区域比较散而且多,所以没添加备注,可自行对比;);
3、另外,我没有改变mui日期控件type的五种类型,另外新增了一种标准格式为"年月日时分秒"的"alltime"类型。之前默认的是datetime(年月日时分),现修改为alltime类型。
4、已上传附件,可供下载体验 。

收起阅读 »

收藏一则语音api代码【来自群友:仁寿吴彦祖】

文字转语音
var text = "测试"  

uni.getSystemInfo({  
                success: res => {  
                    console.log(JSON.stringify(res.platform));  
                    if (res.platform === 'android') {  
                        _this.AndriodSpeechToVoice(text);  
                    } else if (res.platform === 'ios') {  
                        _this.iosSpeechToVoice(text);  
                    }  
                }  
            });  

//安卓文字转语音  
        AndriodSpeechToVoice: function(text) {  
            var main = plus.android.runtimeMainActivity();  
            var SpeechUtility = plus.android.importClass('com.iflytek.cloud.SpeechUtility');  
            SpeechUtility.createUtility(main, 'appid=5c2c6d5f');  
            var SynthesizerPlayer = plus.android.importClass('com.iflytek.cloud.SpeechSynthesizer');  
            var play = SynthesizerPlayer.createSynthesizer(main, null);  
            play.startSpeaking(text, null);  
        },  
        //IOS文字转语音  
        iosSpeechToVoice: function(text) {  
            var AVSpeechSynthesizer = plus.ios.importClass('AVSpeechSynthesizer');  
            var AVSpeechUtterance = plus.ios.importClass('AVSpeechUtterance');  
            var AVSpeechSynthesisVoice = plus.ios.import('AVSpeechSynthesisVoice');  
            var sppech = new AVSpeechSynthesizer();  
            var voice = AVSpeechSynthesisVoice.voiceWithLanguage('zh-CN');  
            var utterance = AVSpeechUtterance.speechUtteranceWithString(text);  
            // utterance.plusSetAttribute("rate",30.1);  
            utterance.setVoice(voice);  
            sppech.speakUtterance(utterance);  
            //停止  
            sppech.stopSpeakingAtBoundary(0);  
            //暂停  
            sppech.pauseSpeakingAtBoundary(0);  
            //继续  
            sppech.continueSpeaking(0);  
            plus.ios.deleteObject(voice);  
            plus.ios.deleteObject(utterance);  
            plus.ios.deleteObject(sppech);  
        },  
继续阅读 »
var text = "测试"  

uni.getSystemInfo({  
                success: res => {  
                    console.log(JSON.stringify(res.platform));  
                    if (res.platform === 'android') {  
                        _this.AndriodSpeechToVoice(text);  
                    } else if (res.platform === 'ios') {  
                        _this.iosSpeechToVoice(text);  
                    }  
                }  
            });  

//安卓文字转语音  
        AndriodSpeechToVoice: function(text) {  
            var main = plus.android.runtimeMainActivity();  
            var SpeechUtility = plus.android.importClass('com.iflytek.cloud.SpeechUtility');  
            SpeechUtility.createUtility(main, 'appid=5c2c6d5f');  
            var SynthesizerPlayer = plus.android.importClass('com.iflytek.cloud.SpeechSynthesizer');  
            var play = SynthesizerPlayer.createSynthesizer(main, null);  
            play.startSpeaking(text, null);  
        },  
        //IOS文字转语音  
        iosSpeechToVoice: function(text) {  
            var AVSpeechSynthesizer = plus.ios.importClass('AVSpeechSynthesizer');  
            var AVSpeechUtterance = plus.ios.importClass('AVSpeechUtterance');  
            var AVSpeechSynthesisVoice = plus.ios.import('AVSpeechSynthesisVoice');  
            var sppech = new AVSpeechSynthesizer();  
            var voice = AVSpeechSynthesisVoice.voiceWithLanguage('zh-CN');  
            var utterance = AVSpeechUtterance.speechUtteranceWithString(text);  
            // utterance.plusSetAttribute("rate",30.1);  
            utterance.setVoice(voice);  
            sppech.speakUtterance(utterance);  
            //停止  
            sppech.stopSpeakingAtBoundary(0);  
            //暂停  
            sppech.pauseSpeakingAtBoundary(0);  
            //继续  
            sppech.continueSpeaking(0);  
            plus.ios.deleteObject(voice);  
            plus.ios.deleteObject(utterance);  
            plus.ios.deleteObject(sppech);  
        },  
收起阅读 »