HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

Monokai Dimmed ——Hbuilder X主题

主题 json

1、设置主题为雅兰,配置设置代码、保存后,重启Huilder X


"workbench.colorCustomizations" : {  
        "[Atom One Dark]" : {  
            "ab.unfocusedHoverBackground" : "#272727",  
            "button.background" : "#0381ff",  
            "button.foreground" : "#CCCCCC",  
            "button.hoverBackground" : "#0381ff",  
            "console.background" : "#252525",  
            "crollbarSlider.hoverBackground" : "#8c8c8c",  
            "debug.foreground" : "#CCCCCC",  
            "editor.background" : "#252525",  
            "editor.foreground" : "#CCCCCC",  
            "editorGroupHeader.tabsBackground" : "#282828",  
            "editorSuggestWidget.background" : "#252525",  
            "editorSuggestWidget.border" : "#444444",  
            "editorSuggestWidget.link" : "#0381ff",  
            "editorSuggestWidget.selectedBackground" : "#707070",  
            "extensionButton.border" : "#454545",  
            "extensionButton.checkColor" : "#CCCCCC",  
            "extensionButton.prominentBackground" : "#454545",  
            "extensionButton.prominentForeground" : "#CCCCCC",  
            "extensionButton.prominentHoverBackground" : "#454545",  
            "focusBorder" : "#CCCCCC",  
            "input.background" : "#454545",  
            "input.border" : "#CCCCCC",  
            "input.foreground" : "#CCCCCC",  
            "inputList.border" : "#505050",  
            "inputList.foreground" : "#a49f9f",  
            "inputList.hoverBackground" : "#707070",  
            "inputList.titleColor" : "#CCCCCC",  
            "inputOption.activeBorder" : "#505050",  
            "inputValidation.infoBackground" : "#505050",  
            "list.activeSelectionBackground" : "#505050",  
            "list.activeSelectionForeground" : "#CCCCCC",  
            "list.foreground" : "#CCCCCC",  
            "list.highlightForeground" : "#CCCCCC",  
            "list.hoverBackground" : "#414040",  
            "list.inactiveSelectionBackground" : "#272727",  
            "list.inactiveSelectionForeground" : "#CCCCCC",  
            "minimap.handle.background" : "#707070",  
            "notification.buttonBackground" : "#252525",  
            "notification.buttonBorder" : "#707070",  
            "notification.buttonForeground" : "#707070",  
            "notification.buttonPressedBackground" : "#707070",  
            "notification.buttonPressedForeground" : "#252525",  
            "notificationLink.foreground" : "#707070",  
            "notifications.background" : "#252525",  
            "notifications.border" : "#707070",  
            "notifications.foreground" : "#CCCCCC",  
            "outlineBackground" : "#252525",  
            "panelTitle.activeForeground" : "#CCCCCC",  
            "scrollbarSlider.background" : "#424242",  
            "settings.dropdownBackground" : "#1e1e1e",  
            "settings.dropdownBorder" : "#707070",  
            "settings.dropdownListBorder" : "#1e1e1e",  
            "settings.textInputBackground" : "#1e1e1e",  
            "settings.textInputBorder" : "#1e1e1e",  
            "settings.textInputDisableBackground" : "#252525",  
            "sideBar.background" : "#272727",  
            "sideBar.border" : "#272727",  
            "statusBar.background" : "#505050",  
            "statusBar.foreground" : "#CCCCCC",  
            "tab.activeBackground" : "#1e1e1e",  
            "tab.activeBorder" : "#1e1e1e",  
            "tab.activeForeground" : "#CCCCCC",  
            "tab.border" : "#282828",  
            "tab.hoverBackground" : "#1e1e1e",  
            "tab.inactiveBackground" : "#404040",  
            "tab.inactiveForeground" : "#CCCCCC",  
            "tab.unfocusedActiveForeground" : "#CCCCCC",  
            "tab.unfocusedInactiveForeground" : "#CCCCCC",  
            "terminal.background" : "#252525",  
            "titleBar.activeBackground" : "#641f22",  
            "titleBar.activeForeground" : "#CCCCCC",  
            "toolBar.background" : "#454545",  
            "toolBar.border" : "#454545",  
            "toolBar.hoverBackground" : "#454545"  
        }  
    }

2、效果如图

继续阅读 »

1、设置主题为雅兰,配置设置代码、保存后,重启Huilder X


"workbench.colorCustomizations" : {  
        "[Atom One Dark]" : {  
            "ab.unfocusedHoverBackground" : "#272727",  
            "button.background" : "#0381ff",  
            "button.foreground" : "#CCCCCC",  
            "button.hoverBackground" : "#0381ff",  
            "console.background" : "#252525",  
            "crollbarSlider.hoverBackground" : "#8c8c8c",  
            "debug.foreground" : "#CCCCCC",  
            "editor.background" : "#252525",  
            "editor.foreground" : "#CCCCCC",  
            "editorGroupHeader.tabsBackground" : "#282828",  
            "editorSuggestWidget.background" : "#252525",  
            "editorSuggestWidget.border" : "#444444",  
            "editorSuggestWidget.link" : "#0381ff",  
            "editorSuggestWidget.selectedBackground" : "#707070",  
            "extensionButton.border" : "#454545",  
            "extensionButton.checkColor" : "#CCCCCC",  
            "extensionButton.prominentBackground" : "#454545",  
            "extensionButton.prominentForeground" : "#CCCCCC",  
            "extensionButton.prominentHoverBackground" : "#454545",  
            "focusBorder" : "#CCCCCC",  
            "input.background" : "#454545",  
            "input.border" : "#CCCCCC",  
            "input.foreground" : "#CCCCCC",  
            "inputList.border" : "#505050",  
            "inputList.foreground" : "#a49f9f",  
            "inputList.hoverBackground" : "#707070",  
            "inputList.titleColor" : "#CCCCCC",  
            "inputOption.activeBorder" : "#505050",  
            "inputValidation.infoBackground" : "#505050",  
            "list.activeSelectionBackground" : "#505050",  
            "list.activeSelectionForeground" : "#CCCCCC",  
            "list.foreground" : "#CCCCCC",  
            "list.highlightForeground" : "#CCCCCC",  
            "list.hoverBackground" : "#414040",  
            "list.inactiveSelectionBackground" : "#272727",  
            "list.inactiveSelectionForeground" : "#CCCCCC",  
            "minimap.handle.background" : "#707070",  
            "notification.buttonBackground" : "#252525",  
            "notification.buttonBorder" : "#707070",  
            "notification.buttonForeground" : "#707070",  
            "notification.buttonPressedBackground" : "#707070",  
            "notification.buttonPressedForeground" : "#252525",  
            "notificationLink.foreground" : "#707070",  
            "notifications.background" : "#252525",  
            "notifications.border" : "#707070",  
            "notifications.foreground" : "#CCCCCC",  
            "outlineBackground" : "#252525",  
            "panelTitle.activeForeground" : "#CCCCCC",  
            "scrollbarSlider.background" : "#424242",  
            "settings.dropdownBackground" : "#1e1e1e",  
            "settings.dropdownBorder" : "#707070",  
            "settings.dropdownListBorder" : "#1e1e1e",  
            "settings.textInputBackground" : "#1e1e1e",  
            "settings.textInputBorder" : "#1e1e1e",  
            "settings.textInputDisableBackground" : "#252525",  
            "sideBar.background" : "#272727",  
            "sideBar.border" : "#272727",  
            "statusBar.background" : "#505050",  
            "statusBar.foreground" : "#CCCCCC",  
            "tab.activeBackground" : "#1e1e1e",  
            "tab.activeBorder" : "#1e1e1e",  
            "tab.activeForeground" : "#CCCCCC",  
            "tab.border" : "#282828",  
            "tab.hoverBackground" : "#1e1e1e",  
            "tab.inactiveBackground" : "#404040",  
            "tab.inactiveForeground" : "#CCCCCC",  
            "tab.unfocusedActiveForeground" : "#CCCCCC",  
            "tab.unfocusedInactiveForeground" : "#CCCCCC",  
            "terminal.background" : "#252525",  
            "titleBar.activeBackground" : "#641f22",  
            "titleBar.activeForeground" : "#CCCCCC",  
            "toolBar.background" : "#454545",  
            "toolBar.border" : "#454545",  
            "toolBar.hoverBackground" : "#454545"  
        }  
    }

2、效果如图

收起阅读 »

share 分享遇到的坑

系统分享 Share uniapp

注意type值, qq仅支持音频分享 type值必须为3

注意type值, qq仅支持音频分享 type值必须为3

iOS平台打包提交AppStore报WARNING ITMS-90703错误的解决方法

Appstore iOS

部分开发者反馈提交AppStore可能会报以下错误:

WARNING ITMS-90703: "Deprecated Xcode Build. Due to resolved app archives issues, we have deprecated Xcode 11.2 on November 5, 2019. Download Xcode 11.2.1 or newer, rebuild your app and resubmit."  

ERROR ITMS-90534: "Invalid Toolchain. Your app was built with an unsupported SDK or version of Xcode. If you plan to submit this build to the App Store, make sure you are using the versions listed in https://help.apple.com/xcode/mac/current/#/devf16aefe3b or later."

这是由于使用XCode11.2版本打包生成ipa导致的问题,苹果已紧急发布了XCode11.2.1,需要更新XCode版本

HBuilderX云端打包

2019年11月17日至2019年11月18日,HBuilderX(alpha)版本对应的云端打包机使用XCode版本为11.2,此时间段云端打包提交AppStore会报上述问题。
2019年11月19日开始,HBuilderX(alpha)版对应的云端已更新XCode为11.2.1。
使用HBuilderX(alpha)的开发者请更新到最新版本(2.4.2),重新提交云端打包即可。

使用HBuilderX正式版提交云端打包生成的ipa不受影响

本地离线打包

更新XCode到11.2.1版本重新打包,再提交AppStore。

继续阅读 »

部分开发者反馈提交AppStore可能会报以下错误:

WARNING ITMS-90703: "Deprecated Xcode Build. Due to resolved app archives issues, we have deprecated Xcode 11.2 on November 5, 2019. Download Xcode 11.2.1 or newer, rebuild your app and resubmit."  

ERROR ITMS-90534: "Invalid Toolchain. Your app was built with an unsupported SDK or version of Xcode. If you plan to submit this build to the App Store, make sure you are using the versions listed in https://help.apple.com/xcode/mac/current/#/devf16aefe3b or later."

这是由于使用XCode11.2版本打包生成ipa导致的问题,苹果已紧急发布了XCode11.2.1,需要更新XCode版本

HBuilderX云端打包

2019年11月17日至2019年11月18日,HBuilderX(alpha)版本对应的云端打包机使用XCode版本为11.2,此时间段云端打包提交AppStore会报上述问题。
2019年11月19日开始,HBuilderX(alpha)版对应的云端已更新XCode为11.2.1。
使用HBuilderX(alpha)的开发者请更新到最新版本(2.4.2),重新提交云端打包即可。

使用HBuilderX正式版提交云端打包生成的ipa不受影响

本地离线打包

更新XCode到11.2.1版本重新打包,再提交AppStore。

收起阅读 »

文件误删,所有恢复软件全部尝试过了,结果恢复的都是乱码,这时想起了HBuilder 历史记录,恢复了!!!

HBuilder X不要太厉害,
一直习惯使用这个编辑器,包括后端,
今天一个误操作,导致半个多月开发的文件全部被删除,
用了很多恢复软件没有一个能恢复出来,全乱码,
病急乱投医,最后连文件都找不到了,
把乱码文件恢复到原来目录,
编辑器中右键点击了一个历史记录,,
每一次保存的文件全出来了,,,,
本来还挺烦历史记录这个功能偶尔弹出,,,还找过在哪里关闭,,,感谢官方

继续阅读 »

HBuilder X不要太厉害,
一直习惯使用这个编辑器,包括后端,
今天一个误操作,导致半个多月开发的文件全部被删除,
用了很多恢复软件没有一个能恢复出来,全乱码,
病急乱投医,最后连文件都找不到了,
把乱码文件恢复到原来目录,
编辑器中右键点击了一个历史记录,,
每一次保存的文件全出来了,,,,
本来还挺烦历史记录这个功能偶尔弹出,,,还找过在哪里关闭,,,感谢官方

收起阅读 »

HBuildeX完美的一次升级!Dcloud太给力了!!!!!

更新 升级

哈哈哈哈哈

2.4.1.20191114

  • 新增 迷你地图(右侧缩略图,可在滚动条右键菜单开启关闭,快捷键 win: Alt+o;mac: Ctrl+o)
  • 新增 鼠标悬停在滚动条或迷你地图的非当前页区域时,小窗预览指示文档
  • 新增 JSON文件 支持文档结构图。包括uni-app的pages.json的文档结构图(快捷键 win: Alt+w;mac: Ctrl+w)
  • 新增 编辑器标签卡超出一屏时,支持鼠标滚轮横向滚动标签卡
  • 新增 底部状态栏新增文档结构图、终端两个快捷按钮

本次更新完美的不要不要的!尤其是滚轮和悬停小窗预览文档,啊啊啊!Dcloud永远支持!这才是真正的代码编辑器啊

继续阅读 »

哈哈哈哈哈

2.4.1.20191114

  • 新增 迷你地图(右侧缩略图,可在滚动条右键菜单开启关闭,快捷键 win: Alt+o;mac: Ctrl+o)
  • 新增 鼠标悬停在滚动条或迷你地图的非当前页区域时,小窗预览指示文档
  • 新增 JSON文件 支持文档结构图。包括uni-app的pages.json的文档结构图(快捷键 win: Alt+w;mac: Ctrl+w)
  • 新增 编辑器标签卡超出一屏时,支持鼠标滚轮横向滚动标签卡
  • 新增 底部状态栏新增文档结构图、终端两个快捷按钮

本次更新完美的不要不要的!尤其是滚轮和悬停小窗预览文档,啊啊啊!Dcloud永远支持!这才是真正的代码编辑器啊

收起阅读 »

iOS证书类型介绍及快速申请介绍

iOS打包 iOS

iOS证书有多种类型,在开发iOS APP中一定要清楚了解各种iOS证书的作用。

下面介绍iOS常用的几种证书的作用和申请方法。

1、iOS开发证书

iOS开发证书是用于测试APP,在开发过程中安装到苹果手机真机测试APP的运行情况。

iOS开发证书申请教程

2、iOS发布证书

当APP开发测试好后上线就需要用到iOS发布证书,用iOS发布证书打包的ipa才能上传到App Store审核。

iOS发布证书申请教程

3、iOS推送证书

iOS推送证书是用于推送通知的,平时我们在手机的系统栏下拉看到的那些消息就是推送通知,如果要做这个功能就需要配置推送证书。

常用的就是以上这三种iOS证书,当你需要什么功能的时候就知道用哪个类型的iOS证书。

iOS推送证书申请教程

继续阅读 »

iOS证书有多种类型,在开发iOS APP中一定要清楚了解各种iOS证书的作用。

下面介绍iOS常用的几种证书的作用和申请方法。

1、iOS开发证书

iOS开发证书是用于测试APP,在开发过程中安装到苹果手机真机测试APP的运行情况。

iOS开发证书申请教程

2、iOS发布证书

当APP开发测试好后上线就需要用到iOS发布证书,用iOS发布证书打包的ipa才能上传到App Store审核。

iOS发布证书申请教程

3、iOS推送证书

iOS推送证书是用于推送通知的,平时我们在手机的系统栏下拉看到的那些消息就是推送通知,如果要做这个功能就需要配置推送证书。

常用的就是以上这三种iOS证书,当你需要什么功能的时候就知道用哪个类型的iOS证书。

iOS推送证书申请教程

收起阅读 »

mui框架是不是死了,不维护了就早说坑人啊

mui框架是不是死了,不维护了就早说坑人啊,github上多久没有更新代码了,一堆bug不修复,文档不全。要是不维护就赶紧发个公告别坑人了好吗。

mui框架是不是死了,不维护了就早说坑人啊,github上多久没有更新代码了,一堆bug不修复,文档不全。要是不维护就赶紧发个公告别坑人了好吗。

手势解锁 新搞的插件 有兴趣可以体验下

插件 手势解锁

https://ext.dcloud.net.cn/plugin?id=952 原生手势解锁 搞了一个 有需要的可以支持下,感谢

https://ext.dcloud.net.cn/plugin?id=952 原生手势解锁 搞了一个 有需要的可以支持下,感谢

uni-app中设置radio和switch的大小

css uniapp

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

由于radio和switch组件不支持width和height属性设置,所以使用transform属性可解决大小问题

<radio style="transform: scale(0.7)" />  

<switch style="transform: scale(0.7,0.7)" />  
继续阅读 »

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

由于radio和switch组件不支持width和height属性设置,所以使用transform属性可解决大小问题

<radio style="transform: scale(0.7)" />  

<switch style="transform: scale(0.7,0.7)" />  
收起阅读 »

模拟电池充电

css uniapp

模拟电池充电

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

插件预览图

使用教程

1.插件代码拷贝

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

2.插件全局配置

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

Vue.component('battery',battery)  

3.插件使用

  • vue页面使用
<template>  
    <view>  
        <battery class="battery"/>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            }  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  
.battery{  
    margin: auto;  
}  
</style>  
兼容性

uni-app项目中使用都兼容

继续阅读 »

模拟电池充电

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

插件预览图

使用教程

1.插件代码拷贝

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

2.插件全局配置

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

Vue.component('battery',battery)  

3.插件使用

  • vue页面使用
<template>  
    <view>  
        <battery class="battery"/>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            }  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  
.battery{  
    margin: auto;  
}  
</style>  
兼容性

uni-app项目中使用都兼容

收起阅读 »

v-bing image 总是不能成功?请大神

uniapp

我在uploadfile 成功回调中改变 image控件src值,想显示刚刚上传的图片,总是不能成功,我如果直接换成图像地址字符串("http://xxx.xxx.xxx.xxx/abc.jpg")可以正常显示,但我换成uploadfileres.data就不能显示,控制台打印出来uploadFileRes.data也是正确的,不知道这里要怎么弄才可以正常显示我刚刚上传的图片?请大神指导

    success: (uploadFileRes) => {  
                                    this.imageSrc=uploadFileRes.data;  
                                    console.log(uploadFileRes);  
                                },
继续阅读 »

我在uploadfile 成功回调中改变 image控件src值,想显示刚刚上传的图片,总是不能成功,我如果直接换成图像地址字符串("http://xxx.xxx.xxx.xxx/abc.jpg")可以正常显示,但我换成uploadfileres.data就不能显示,控制台打印出来uploadFileRes.data也是正确的,不知道这里要怎么弄才可以正常显示我刚刚上传的图片?请大神指导

    success: (uploadFileRes) => {  
                                    this.imageSrc=uploadFileRes.data;  
                                    console.log(uploadFileRes);  
                                },
收起阅读 »

全局webSocket.js

socket

1、根目录创建socket.js文件:

var websocket = weex.requireModule('webSocket')  
var connect = function() {  
    websocket.WebSocket('ws://192.168.31.250:8081/ws', '');  
    websocket.onopen(function(e) {  
        console.log('websocket已经打开');  
    });  
    websocket.onmessage(function(e) {  
        uni.$emit("onMsg"+e.data.status,e)  
    });  
    websocket.onerror(function(e) {  
        console.log("异常:" + JSON.stringify(e.data));  
        // console.log(e.data);    
    });  
    websocket.onclose(function(e) {  
        // console.log(  '');     
        console.log('连接已经关闭');  
        // console.log(  e.code);      
    });  
}  
function cls(){  
    websocket.close();  
}  
export default {  
    cls,  
    connect  
}

2.1、App.vue中引入:

import sockect from "socket.js"

2.2:onShow中调用:

sockect.connect()

2.3:onHide中删除:

sockect.cls()

3:各个页面中:
index.vue中:

uni.$on('onMsg1', function(data) {  
                console.log('监听到事件来自 update ,携带参数 msg 为:' + JSON.stringify(data));  
            })

user.vue中:

uni.$on('onMsg2', function(data) {  
                console.log('监听到事件来自 update ,携带参数 msg 为:' + JSON.stringify(data));  
            })

每个页面都监测一个不同的方法,方法名只是最后一个数字变了,让后台传数据时再传个状态值指明调用哪个方法的末尾值,这样就达到了全局的效果

继续阅读 »

1、根目录创建socket.js文件:

var websocket = weex.requireModule('webSocket')  
var connect = function() {  
    websocket.WebSocket('ws://192.168.31.250:8081/ws', '');  
    websocket.onopen(function(e) {  
        console.log('websocket已经打开');  
    });  
    websocket.onmessage(function(e) {  
        uni.$emit("onMsg"+e.data.status,e)  
    });  
    websocket.onerror(function(e) {  
        console.log("异常:" + JSON.stringify(e.data));  
        // console.log(e.data);    
    });  
    websocket.onclose(function(e) {  
        // console.log(  '');     
        console.log('连接已经关闭');  
        // console.log(  e.code);      
    });  
}  
function cls(){  
    websocket.close();  
}  
export default {  
    cls,  
    connect  
}

2.1、App.vue中引入:

import sockect from "socket.js"

2.2:onShow中调用:

sockect.connect()

2.3:onHide中删除:

sockect.cls()

3:各个页面中:
index.vue中:

uni.$on('onMsg1', function(data) {  
                console.log('监听到事件来自 update ,携带参数 msg 为:' + JSON.stringify(data));  
            })

user.vue中:

uni.$on('onMsg2', function(data) {  
                console.log('监听到事件来自 update ,携带参数 msg 为:' + JSON.stringify(data));  
            })

每个页面都监测一个不同的方法,方法名只是最后一个数字变了,让后台传数据时再传个状态值指明调用哪个方法的末尾值,这样就达到了全局的效果

收起阅读 »