HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

给项目增加摄像头拍照功能。

<body>
<button onclick="captureImage()">拍照</button>
</body>
<script type="text/javascript">
mui.init();
//扩展api加载完毕后调用onPlusReady回掉函数
document.addEventListener("plusready",onPlusReady,false);
//扩展api加载完毕,现在可以正常调用扩展api
function onPlusReady(){
//
console.log("plusready");
}
//拍照
function captureImage(){
var cmr=plus.camera.getCamera();
var res=cmr.supportedImageResolutions[0];
var fmt=cmr.supportedImageFormats[0];
console.log("Resolution:"+res+",Format:"+fmt);
cmr.captureImage(function(path){
alert("Capture image success:"+path);
},
function(error){
alert("Capture image failed:"+error.message);
},
{resolution:res,format:fmt}
);
}
</script>
(ps:摄像头可以调用也可以拍照 只是需要添加存储路径 看个人.)
(还要加新功能要类似于支付宝的那种身份证识别系统那个怎么拍照界面怎么做的,求大神的链接)

继续阅读 »

<body>
<button onclick="captureImage()">拍照</button>
</body>
<script type="text/javascript">
mui.init();
//扩展api加载完毕后调用onPlusReady回掉函数
document.addEventListener("plusready",onPlusReady,false);
//扩展api加载完毕,现在可以正常调用扩展api
function onPlusReady(){
//
console.log("plusready");
}
//拍照
function captureImage(){
var cmr=plus.camera.getCamera();
var res=cmr.supportedImageResolutions[0];
var fmt=cmr.supportedImageFormats[0];
console.log("Resolution:"+res+",Format:"+fmt);
cmr.captureImage(function(path){
alert("Capture image success:"+path);
},
function(error){
alert("Capture image failed:"+error.message);
},
{resolution:res,format:fmt}
);
}
</script>
(ps:摄像头可以调用也可以拍照 只是需要添加存储路径 看个人.)
(还要加新功能要类似于支付宝的那种身份证识别系统那个怎么拍照界面怎么做的,求大神的链接)

收起阅读 »

建议新增es6的let和箭头函数语法提示或者识别

在使用let或者箭头函数时候预览会出现提示报错,只有在浏览器中运行才可以正常显示。

在使用let或者箭头函数时候预览会出现提示报错,只有在浏览器中运行才可以正常显示。

dcloud的开源实例怎么这么少,能不能搭建个好点的开源实例库大家上传实例

dcloud的开源实例怎么这么少,能不能搭建个好点的开源实例库大家上传实例

dcloud的开源实例怎么这么少,能不能搭建个好点的开源实例库大家上传实例

安卓离线打包配置 url scheme

UrlSchemes 离线打包

打开 AndroidManifest.xml
找到 io.dcloud.application.DCloudApplication
原配置

<activity  
            android:name="io.dcloud.PandoraEntry"  
            android:configChanges="orientation|keyboardHidden|keyboard|navigation"  
            android:label="@string/app_name"  
            android:launchMode="singleTask"  
            android:hardwareAccelerated="true"  
            android:theme="@style/TranslucentTheme"  
            android:screenOrientation="user"  
            android:windowSoftInputMode="adjustResize" >  
            <intent-filter>  
                <action android:name="android.intent.action.MAIN" />  

                <category android:name="android.intent.category.LAUNCHER" />  
        </activity>

增加后

<activity  
            android:name="io.dcloud.PandoraEntry"  
            android:configChanges="orientation|keyboardHidden|keyboard|navigation"  
            android:label="@string/app_name"  
            android:launchMode="singleTask"  
            android:hardwareAccelerated="true"  
            android:theme="@style/TranslucentTheme"  
            android:screenOrientation="user"  
            android:windowSoftInputMode="adjustResize" >  
            <intent-filter>  
                <action android:name="android.intent.action.MAIN" />  

                <category android:name="android.intent.category.LAUNCHER" />  
            </intent-filter>  
            <intent-filter>  
                <action android:name="android.intent.action.VIEW"/>  
                <category android:name="android.intent.category.DEFAULT" />  
                <category android:name="android.intent.category.BROWSABLE" />  
                <data android:scheme="myapp"/>  
            </intent-filter>  
        </activity>
继续阅读 »

打开 AndroidManifest.xml
找到 io.dcloud.application.DCloudApplication
原配置

<activity  
            android:name="io.dcloud.PandoraEntry"  
            android:configChanges="orientation|keyboardHidden|keyboard|navigation"  
            android:label="@string/app_name"  
            android:launchMode="singleTask"  
            android:hardwareAccelerated="true"  
            android:theme="@style/TranslucentTheme"  
            android:screenOrientation="user"  
            android:windowSoftInputMode="adjustResize" >  
            <intent-filter>  
                <action android:name="android.intent.action.MAIN" />  

                <category android:name="android.intent.category.LAUNCHER" />  
        </activity>

增加后

<activity  
            android:name="io.dcloud.PandoraEntry"  
            android:configChanges="orientation|keyboardHidden|keyboard|navigation"  
            android:label="@string/app_name"  
            android:launchMode="singleTask"  
            android:hardwareAccelerated="true"  
            android:theme="@style/TranslucentTheme"  
            android:screenOrientation="user"  
            android:windowSoftInputMode="adjustResize" >  
            <intent-filter>  
                <action android:name="android.intent.action.MAIN" />  

                <category android:name="android.intent.category.LAUNCHER" />  
            </intent-filter>  
            <intent-filter>  
                <action android:name="android.intent.action.VIEW"/>  
                <category android:name="android.intent.category.DEFAULT" />  
                <category android:name="android.intent.category.BROWSABLE" />  
                <data android:scheme="myapp"/>  
            </intent-filter>  
        </activity>
收起阅读 »

IOS离线打包SDK开屏广告配置方法

开屏广告 SDK iOS

首先下载最新版的5+SDK ,下载地址请点击http://ask.dcloud.net.cn/article/103
1 复制HBuilder-Hello工程的AppDelegate.m文件中的如下代码到工程APPDelegate文件的对应方法中。也可以直接复制AppDelegate.m文件到打包工程下替换原文件

2 复制HBuilder-Hello工程的DCSplashAdObserver.h文件和DCSplashAdObserver.m文件并添加到打包工程中。

离线打包使用开屏广告需要注意以下几点:

  1. 当有开屏广告内容时[DCSplashAdObserver splashAdViewController]方法会返回一个UIViewController对象,这个ViewController必须使用UINavigationController对象的pushViewController的方法显示。
    1. 5+的开屏广告会在默认可关闭的时候发送一个kDCSplashScreenCloseEvent消息,监听到这个消息后推出5+广告的ViewController即可关闭开屏广告。
    2. 5+开屏广告暂不支持Webview集成或WebApp集成方式使用。
继续阅读 »

首先下载最新版的5+SDK ,下载地址请点击http://ask.dcloud.net.cn/article/103
1 复制HBuilder-Hello工程的AppDelegate.m文件中的如下代码到工程APPDelegate文件的对应方法中。也可以直接复制AppDelegate.m文件到打包工程下替换原文件

2 复制HBuilder-Hello工程的DCSplashAdObserver.h文件和DCSplashAdObserver.m文件并添加到打包工程中。

离线打包使用开屏广告需要注意以下几点:

  1. 当有开屏广告内容时[DCSplashAdObserver splashAdViewController]方法会返回一个UIViewController对象,这个ViewController必须使用UINavigationController对象的pushViewController的方法显示。
    1. 5+的开屏广告会在默认可关闭的时候发送一个kDCSplashScreenCloseEvent消息,监听到这个消息后推出5+广告的ViewController即可关闭开屏广告。
    2. 5+开屏广告暂不支持Webview集成或WebApp集成方式使用。
收起阅读 »

如何拿到manifest.json里配置的信息

mui 统计 manifest.json配置 经验分享

今天上司给了个任务,在app注册的时候,拿到manifest.json里配置的umeng的channel,然后跟着登录的接口一块传给后台,自己的服务器上再做一次统计

问题来了,怎么拿呢?

在dcloud问答里搜了一下,就找到一个 plus.push.getClientInfo() 这个是拿到推送的信息的,然后照葫芦画瓢把push换成了statistic,但它没有getClientInfo()方法

然后找到文档 http://www.html5plus.org/doc/zh_cn/statistic.html 确实没有 getClientInfo() 方法

最后问了官方大大 @五块钱的果汁 ,给了个办法

mui.getJSON('http://localhost:13131/_www/manifest.json', function (e) {});

这样直接在回调里取就可以了 e.plus.distribute.plugins.statics.umeng.channelid_android 完美

感谢官方大大的帮助,在这分享给大家

继续阅读 »

今天上司给了个任务,在app注册的时候,拿到manifest.json里配置的umeng的channel,然后跟着登录的接口一块传给后台,自己的服务器上再做一次统计

问题来了,怎么拿呢?

在dcloud问答里搜了一下,就找到一个 plus.push.getClientInfo() 这个是拿到推送的信息的,然后照葫芦画瓢把push换成了statistic,但它没有getClientInfo()方法

然后找到文档 http://www.html5plus.org/doc/zh_cn/statistic.html 确实没有 getClientInfo() 方法

最后问了官方大大 @五块钱的果汁 ,给了个办法

mui.getJSON('http://localhost:13131/_www/manifest.json', function (e) {});

这样直接在回调里取就可以了 e.plus.distribute.plugins.statics.umeng.channelid_android 完美

感谢官方大大的帮助,在这分享给大家

收起阅读 »

使用requirejs时,解决pullRefresh下拉报错的问题

requirejs

使用requirejs后,下拉可能会报错如下:
Uncaught (in promise) TypeError: mui(...).pullRefresh(...).endPulldownToRefresh is not a function

解决方案:
修改mui.js v3.7.2 5467行

//override h5 pullRefresh  
        $.fn.pullRefresh_native = function(options) {  
            var self;  
            if (this.length === 0) {  
                self = document.createElement('div');  
                self.className = 'mui-content';  
                document.body.appendChild(self);  
            } else {  
                self = this[0];  
                //解决方案:使用requirejs时,这里的this可能有缓存,需要重新获取  
                if (typeof define === 'function' && define.amd) {  
                    self = document.getElementById(self.getAttribute("id"));  
                }  
            }  
            。。。

改完后不报错了,请官方确认此问题并及时修改

继续阅读 »

使用requirejs后,下拉可能会报错如下:
Uncaught (in promise) TypeError: mui(...).pullRefresh(...).endPulldownToRefresh is not a function

解决方案:
修改mui.js v3.7.2 5467行

//override h5 pullRefresh  
        $.fn.pullRefresh_native = function(options) {  
            var self;  
            if (this.length === 0) {  
                self = document.createElement('div');  
                self.className = 'mui-content';  
                document.body.appendChild(self);  
            } else {  
                self = this[0];  
                //解决方案:使用requirejs时,这里的this可能有缓存,需要重新获取  
                if (typeof define === 'function' && define.amd) {  
                    self = document.getElementById(self.getAttribute("id"));  
                }  
            }  
            。。。

改完后不报错了,请官方确认此问题并及时修改

收起阅读 »

周报(20180309):你加入广告联盟了么?

广告 话题 mask iOS 5 SDK 周报

热门话题

iOS 权限提示语

iOS 应用权限提示语不符合规范,导致无法上架 AppStore 的问题,依旧困扰了许多小伙伴。相关配置方法,请参考 iOS云打包修改权限提示语

举例

依旧以出现频率最高的定位权限为例,简要说明下这个配置的填写。就拿外卖应用来说,获取定位信息是为了向用户展示附近的美食信息。因此,提示语应当是类似“获取定位信息用于为用户提供附近的美食信息”这样的,而不是“获取用户位置信息”这样的简(fei)语(hua)。

广告联盟

DCloud 上线了广告联盟平台,意在为更多开发者提供流量变现的渠道。详细的公告信息,看这里

更新

本周广告平台的更新主要有两项:

广告问题

上架被拒

目前存在的问题,主要是开通广告后,上架 AppStore 以及其它应用市场时,会被驳回。http://ask.dcloud.net.cn/question/53077

临时的解决办法是,开发者提供应用 manifest.json 中分配的 appid,先行关闭广告。后续在广告管理平台上,会尽快更新此功能的开关控制。

莫名出现广告

还有一位小伙伴,在关闭了广告功能后依旧在应用内出现了广告。http://ask.dcloud.net.cn/question/53065

根据反馈信息,出现的广告并不是 DCloud 广告平台的内容,极大可能是运营商的流量被劫持插入的。

输入框导致应用崩溃

部分 vivo 和华为手机,输入框输入内容时,应用崩溃。http://ask.dcloud.net.cn/question/53121
该问题之前修复了,但是只更新了 Alpha 版。现在,已经更新到正式版了。升级 HBuilder,卸载原有的 HBuilder 手机基座即可测试。

突发问题

iOS 支付模块失效

本周四,使用 HBuilder Alpha 版打包的 iOS 应用,出现了“打包时未添加 Payment 模块”的问题。http://ask.dcloud.net.cn/question/53083

该问题已于周四晚上修复,重新打包应用即可。

其它问题

可配置权限变少

许多小伙伴发现,manifest.josn 文件的模块权限配置中少了许多权限。http://ask.dcloud.net.cn/question/53093

这是因为一些常用的必须的权限,会在云打包时添加,因此不要惊慌这显示的是正确的。

wap2app 引导页

想要给自己的 wap2app 应用添加引导页的小伙伴,请参考wap2app引导页的简单制作

原生APP通过webview加载mui开发的功能

额,这位小伙伴应该是没有表述清楚自己的需求,同时也没有理清楚 DCloud 各产品的定位以及关系。http://ask.dcloud.net.cn/question/53100

正如问题中 @回梦無痕 的回复那样,MUI 是个 UI 框架,只要是浏览器环境都可以使用(当然,涉及到 5+API 的部分依赖 5+Runtime)。如果想要在原生应用中使用 5+Runtime 的扩展 API,需要将 5+SDK 集成到自己的原生应用中。

mui.toast()和plus.nativeUI.toast()有什么区别啊

http://ask.dcloud.net.cn/question/53081

MUI 的文档中,有这样一段描述:mui会根据ua判断,弹出原生对话框还是h5绘制的对话框,在基座中默认会弹出原生对话框,可以配置type属性,使得弹出h5模式对话框。

“原生”就是指的调用 5+API 使用系统的对话框,“h5”就是用 div 模拟的对话框。因为不同的系统或 ROM,系统的对话框会存在差异。如果希望统一样式的话,可以在调用 mui.toast() 时,传入 type: 'div' 来指定使用 h5 模式的对话框。

不只是 mui.toast() 如此,mui 的 dialog 部分,都是如此。如果希望修改样式,可以在浏览器中预览,调整相关节点的 css 即可。

最后

本周的报告就是这些,希望能对大家有所帮助。同时,也希望更多的小伙伴在社区分享自己的经验心得,交流学习。

祝大家周末愉快。

继续阅读 »

热门话题

iOS 权限提示语

iOS 应用权限提示语不符合规范,导致无法上架 AppStore 的问题,依旧困扰了许多小伙伴。相关配置方法,请参考 iOS云打包修改权限提示语

举例

依旧以出现频率最高的定位权限为例,简要说明下这个配置的填写。就拿外卖应用来说,获取定位信息是为了向用户展示附近的美食信息。因此,提示语应当是类似“获取定位信息用于为用户提供附近的美食信息”这样的,而不是“获取用户位置信息”这样的简(fei)语(hua)。

广告联盟

DCloud 上线了广告联盟平台,意在为更多开发者提供流量变现的渠道。详细的公告信息,看这里

更新

本周广告平台的更新主要有两项:

广告问题

上架被拒

目前存在的问题,主要是开通广告后,上架 AppStore 以及其它应用市场时,会被驳回。http://ask.dcloud.net.cn/question/53077

临时的解决办法是,开发者提供应用 manifest.json 中分配的 appid,先行关闭广告。后续在广告管理平台上,会尽快更新此功能的开关控制。

莫名出现广告

还有一位小伙伴,在关闭了广告功能后依旧在应用内出现了广告。http://ask.dcloud.net.cn/question/53065

根据反馈信息,出现的广告并不是 DCloud 广告平台的内容,极大可能是运营商的流量被劫持插入的。

输入框导致应用崩溃

部分 vivo 和华为手机,输入框输入内容时,应用崩溃。http://ask.dcloud.net.cn/question/53121
该问题之前修复了,但是只更新了 Alpha 版。现在,已经更新到正式版了。升级 HBuilder,卸载原有的 HBuilder 手机基座即可测试。

突发问题

iOS 支付模块失效

本周四,使用 HBuilder Alpha 版打包的 iOS 应用,出现了“打包时未添加 Payment 模块”的问题。http://ask.dcloud.net.cn/question/53083

该问题已于周四晚上修复,重新打包应用即可。

其它问题

可配置权限变少

许多小伙伴发现,manifest.josn 文件的模块权限配置中少了许多权限。http://ask.dcloud.net.cn/question/53093

这是因为一些常用的必须的权限,会在云打包时添加,因此不要惊慌这显示的是正确的。

wap2app 引导页

想要给自己的 wap2app 应用添加引导页的小伙伴,请参考wap2app引导页的简单制作

原生APP通过webview加载mui开发的功能

额,这位小伙伴应该是没有表述清楚自己的需求,同时也没有理清楚 DCloud 各产品的定位以及关系。http://ask.dcloud.net.cn/question/53100

正如问题中 @回梦無痕 的回复那样,MUI 是个 UI 框架,只要是浏览器环境都可以使用(当然,涉及到 5+API 的部分依赖 5+Runtime)。如果想要在原生应用中使用 5+Runtime 的扩展 API,需要将 5+SDK 集成到自己的原生应用中。

mui.toast()和plus.nativeUI.toast()有什么区别啊

http://ask.dcloud.net.cn/question/53081

MUI 的文档中,有这样一段描述:mui会根据ua判断,弹出原生对话框还是h5绘制的对话框,在基座中默认会弹出原生对话框,可以配置type属性,使得弹出h5模式对话框。

“原生”就是指的调用 5+API 使用系统的对话框,“h5”就是用 div 模拟的对话框。因为不同的系统或 ROM,系统的对话框会存在差异。如果希望统一样式的话,可以在调用 mui.toast() 时,传入 type: 'div' 来指定使用 h5 模式的对话框。

不只是 mui.toast() 如此,mui 的 dialog 部分,都是如此。如果希望修改样式,可以在浏览器中预览,调整相关节点的 css 即可。

最后

本周的报告就是这些,希望能对大家有所帮助。同时,也希望更多的小伙伴在社区分享自己的经验心得,交流学习。

祝大家周末愉快。

收起阅读 »

h5+、mui、app开发实战教程都在这了 ^_^

5+App开发 mui


《JavaScript 快速提高视频教程》 js基础快速提高课程 【免费】
http://www.hcoder.net/course/info_229.html

《MUI 视频教程》【免费】
http://www.hcoder.net/course/info_211.html

《h.js 视频教程》【免费】
http://www.hcoder.net/tutorials/info_147.html

《HTML 5 开发教程》【免费】
http://www.hcoder.net/course/info_212.html

《APP开发实例教程 - 窗口切换 》【免费】
http://www.hcoder.net/course/info_218.html

《HBuilder 8.0.1 APP开发 - 新功能全接触》【免费】
http://www.hcoder.net/course/info_227.html

--------- 实战收费教程 ------------------------
《仿腾讯新闻客户端》- MUI+VUE.JS H5+ APP 实战教程
http://www.hcoder.net/course/info_240.html

MUI、H5 APP 实战教程 - 仿《有道词典》
https://ke.qq.com/course/194834

H5 跨平台APP开发电商项目实战教程 -《仿京东优选商城》
https://ke.qq.com/course/225830

更多课程中心
http://www.hcoder.net/course

继续阅读 »


《JavaScript 快速提高视频教程》 js基础快速提高课程 【免费】
http://www.hcoder.net/course/info_229.html

《MUI 视频教程》【免费】
http://www.hcoder.net/course/info_211.html

《h.js 视频教程》【免费】
http://www.hcoder.net/tutorials/info_147.html

《HTML 5 开发教程》【免费】
http://www.hcoder.net/course/info_212.html

《APP开发实例教程 - 窗口切换 》【免费】
http://www.hcoder.net/course/info_218.html

《HBuilder 8.0.1 APP开发 - 新功能全接触》【免费】
http://www.hcoder.net/course/info_227.html

--------- 实战收费教程 ------------------------
《仿腾讯新闻客户端》- MUI+VUE.JS H5+ APP 实战教程
http://www.hcoder.net/course/info_240.html

MUI、H5 APP 实战教程 - 仿《有道词典》
https://ke.qq.com/course/194834

H5 跨平台APP开发电商项目实战教程 -《仿京东优选商城》
https://ke.qq.com/course/225830

更多课程中心
http://www.hcoder.net/course

收起阅读 »

Android Studio离线打包基础模块配置

离线

集成步骤

一 引用库文件

将"SDK\libs"目录下lib.5plus.base-release.aar文件拷贝至自己项目的libs对应目录。

二 配置gradle文件

build.gradle文件中添加如下节点到根目录(即与dependencies节点同级)

repositories {  
    flatDir {  
        dirs 'libs' //自己项目的libs对应目录  
    }  
}

然后在dependencies节点中添加aar文件依赖如下:

compile(name:'lib.5plus.base-release', ext:'aar')

之后执行Rebuild Project命令。

三 在assets文件夹中配置5+应用资源

将"SDK\assets"目录下的data文件夹拷贝到自己项目的assets目录下,并新建名为“apps”的文件夹,然后在data文件夹中新建名为5+App对应appid(如"HelloH5")的文件夹,最后在已创建的appid(如"HelloH5")的文件夹中,创建名为www的文件夹并将5+应用资源拷贝至该目录。如下图所示:


最后打开assets文件夹中的data目录下的dcloud_control.xml文件,修改其中的appid对应节点值为自己5+app的对应appid值如下图所示。(请注意保证assets--->apps中appid的文件夹名称和dcloud_control.xml的appid对应节点值以及manifest.json中的appid值,三者的值是一致的)

<msc version="1.9.9.42094">  
    <apps>  
        <app appid="HelloH5" appver=""/>  
    </apps>  
</msc>
继续阅读 »

集成步骤

一 引用库文件

将"SDK\libs"目录下lib.5plus.base-release.aar文件拷贝至自己项目的libs对应目录。

二 配置gradle文件

build.gradle文件中添加如下节点到根目录(即与dependencies节点同级)

repositories {  
    flatDir {  
        dirs 'libs' //自己项目的libs对应目录  
    }  
}

然后在dependencies节点中添加aar文件依赖如下:

compile(name:'lib.5plus.base-release', ext:'aar')

之后执行Rebuild Project命令。

三 在assets文件夹中配置5+应用资源

将"SDK\assets"目录下的data文件夹拷贝到自己项目的assets目录下,并新建名为“apps”的文件夹,然后在data文件夹中新建名为5+App对应appid(如"HelloH5")的文件夹,最后在已创建的appid(如"HelloH5")的文件夹中,创建名为www的文件夹并将5+应用资源拷贝至该目录。如下图所示:


最后打开assets文件夹中的data目录下的dcloud_control.xml文件,修改其中的appid对应节点值为自己5+app的对应appid值如下图所示。(请注意保证assets--->apps中appid的文件夹名称和dcloud_control.xml的appid对应节点值以及manifest.json中的appid值,三者的值是一致的)

<msc version="1.9.9.42094">  
    <apps>  
        <app appid="HelloH5" appver=""/>  
    </apps>  
</msc>
收起阅读 »

mui选项卡切换,有echart页面显示空白

遇到这个问题时候,通过排查发现;tab创建的页面除了第一个都隐藏了,导致了echart的无法初始化;
折腾了好久终于找到一个解决方案;
在tab选项卡切换时候加一个自定义事件,然后在echart那个页面监听;
window.addEventListener('send', function(event) {
//获得事件参数
mui.plusReady(function() { //这个是关键,不加这个也不显示
..//调用图表初始化方法
})
});
有些道理也无法说明,填坑多一个是一个;还希望官方继续完善下去;

继续阅读 »

遇到这个问题时候,通过排查发现;tab创建的页面除了第一个都隐藏了,导致了echart的无法初始化;
折腾了好久终于找到一个解决方案;
在tab选项卡切换时候加一个自定义事件,然后在echart那个页面监听;
window.addEventListener('send', function(event) {
//获得事件参数
mui.plusReady(function() { //这个是关键,不加这个也不显示
..//调用图表初始化方法
})
});
有些道理也无法说明,填坑多一个是一个;还希望官方继续完善下去;

收起阅读 »