APICloud开发者进阶之路 | 超级实用技巧

金秋9月,脑海还是北京的“中非合作蓝”!今天按照惯例,柚子君还是要督促大家充充电的!

本周《30天,App开发从0到1》将要给大家分享第十章超级实用技巧,我们精选了其中的一个章节--地图模块的实用扩展:在地图上添加自定义按钮,一起来学习吧。

主要内容
本章将向读者介绍一些开发中常用的功能和技巧 , 这些技巧涉及应用开发的方方面面。

示例 1 讲解了屏幕动态适配的方法,是开发 App 必须具备要掌握的技能之一;
示例 2、示例 7、示例 9 ~示例 11 具体讲解了一些常见的业务需求的实现方法,重点理解其功能实现时的相关逻辑处理;
示例 3 讲解了打开 Web 页面的处理;
示例 4 介绍了 App 的换皮肤功能、示例 5 讲解了如何实现语言国际化、示例 6 介绍如何唤起其他 App,这些示例都是很实用的实战功能技巧,在App 开发中会经常用到;
示例 8 讲解了 APICloud 运行原理方面的相关知识,了解并掌握这些知识会对优化 App 功能体验有很大帮助。

学习目标

(1)页面动态适配有虚拟按键栏的 Android 手机。
(2)实现获取手机验证码的功能。
(3)打开一个外部链接作为新页面,并设置样式以及事件监听。
(4)实现 App 的皮肤样式切换功能。
(5)实现App多语言版本切换功能。
(6)调用任意 App。
(7)快速开发数据表格。
(8)apiready 与 window.onload 的平衡使用。
(9)在地图上添加自定义按钮。
(10) 如何获取城市的地铁线路列表。
(11)实现极光推送。

[size=1.25]10.9 地图模块的实用扩展:
[size=1.25]在地图上添加自定义按钮

地图模块在很多应用里被广泛使用,模块 Store 上面的地图模块封装了地图提供方的官方SDK,如果想要在地图上增加几个按钮来实现某些自定义功能,就需要自定义添加一些按钮上去,如图 10-8 所示。

https://mmbiz.qpic.cn/mmbiz_png/FR6Tz3rLxibrj1fZlzy8JjYxogChBlv6rVl3sqzaJOq1ibKB8KWtpbB6smvn7Kobaicp65GHBU2lQgicBxo7xsVhCg/640?wx_fmt=png![](http://i2.51cto.com/images/blog/201809/11/71fe08e47185b397212b64af2c15b78b.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

图 10-8

实现自定义按钮的关键就是 APICloud 官方提供的免费模块 UIButton。这里要实现的功能是点击中心点按钮,让地图回到中心点。代码如下:

var aMap = api.require(‘aMap‘); // 引入地图模块,这里使用的是高德地图
var UIButton = api.require(‘UIButton‘); // 引入UIButton模块
var lon = 116.4021310000;
var lat = 39.9994480000;
aMap.open({
rect: {
x: 0,
y: 65,
w: ‘auto‘,
h: api.frameHeight - 65
},
center: {
lon: lon,
lat: lat
},
showUserLocation: true,
zoomLevel: 14,
fi xedOn: api.frameName,
fi xed: true
}, function(ret, err) {
if (ret) {
var buttonId; // 记录下来按钮的id,在点击按钮的时候,对这个按钮的状态进行更改
UIButton.open({
rect: {
x: api.frameWidth - 52,
y: api.frameHeight - 140,
w: 40,
h: 40
},
corner: 5,
bg: {
normal: ‘widget://img/dingwei.png‘,
highlight: ‘widget://img/dingwei_2.png‘,
active: ‘widget://img/dingwei_2.png‘
}, // 这里是按钮的三种样式
fi xedOn: api.frameName,
fi xed: true,
move: false
}, function(ret, err) {
if (ret && ret.eventType === ‘show‘) {
buttonId = ret.id
}
if (ret && ret.eventType === ‘click‘) {
// 在接收到按钮被点击的指令之后,更改按钮的状态为normal,用来改变按钮的样式,恢复未点
//击之前的样式
UIButton.getState({
id: buttonId
}, function(ret, err) {
if (ret.state === ‘active‘) {
UIButton.setState({
id: buttonId,
state: ‘normal‘
})
}
});
// 让地图回到中心点处
aMap.setCenter({
coords: {
lon: lon,
lat: lat
}
});
}
})
}
});
这样就简单地实现了在地图上自定义按钮的功能。

原文地址:http://blog.51cto.com/9334358/2173676

时间: 2024-09-30 00:34:44

APICloud开发者进阶之路 | 超级实用技巧的相关文章

APICloud开发者进阶之路 |audioRecorder录音模块Demo

本文出自APICloud官方论坛   audioRecorder 模块通过封装系统的录音接口,能够快速的为开发者提供一个完整的录音功能. 该模块提供Android和iOS版本,录音方式及录制的音频格式也依赖于相关系统. 需要注意的是:安卓跟ios所支持的格式是不一样的,最好选择aac格式, 如果不选择acc格式你们就需要判断此设备是ios还是安卓,(api.systemType使用这个可以获取是安卓还是ios) 然后根据设备不同去配置对应录制音频格式. Android系统支持的录制音频格式为:a

APICloud开发者进阶之路 | UIPickerView 模块示例demo

本文出自APICloud官方论坛 rongCloud2  3.2.8 版本更新后添加了发送小视频接口,发送文件接口. rongCloud2  概述 融云是国内首家专业的即时通讯云服务提供商,专注为互联网.移动互联网开发者提供即时通讯基础能力和云端服务.通过融云平台,开发者不必搭建服务端硬件环境,就可以将即时通讯.实时网络能力快速集成至应用中.rongCloud2 封装了融云即时通讯能力库 IMLib SDK 的 API,对融云的相关接口做了一一对应的封装,功能详情可参考目录.使用 rongClo

APICloud开发者进阶之路|了解APICloud 应用设计思想

大家好!上期我们介绍了<30天,App开发从0到1>一书中app的开发流程,本期我们继续第二章的精彩分享: 主要内容: 教会大家使用APICloud技术实现app的界面布局和静态页面的缩写. 学习目标: 1.学习 APICloud app 的启动过程,了解 confi g.xml 配置文件. 2.了解 APICloud 五大布局组件和混合渲染模式. 3.了解 API 对象和前端框架. 4.学习如何进行屏幕适配和状态栏处理. 本章从APICloud app执行流程.应用设计思想.界面和导航.搭建

APICloud开发者进阶之路 |iOS修改entitlements文件

本文出自APICloud官方论坛, 感谢论坛版主 技术咨询-Kenny 的分享.   一.概述iOS原生开发中若要实现某些特殊功能,如使用HealthKit.实现Universal Links等.需要在工程target的Capabilities选项中打开对应的功能开关,而最终的配置都会写入到工程中的一个.entitlements文件中,下面我们提供了配置该entitlements文件的方法. 二.配置.entitlements是xml格式的文件,新建一个文本文件,修改内容后命名为UZApp.en

APICloud开发者进阶之路|[ 模块教程 ] UIAlbumBrowser模块效果展示

UIAlbumBrowser是一个本地媒体资源扫描器,在Android平台上可扫描整个设备的资源,iOS仅扫描相册内部的资源.注意本模块在iPhone设备上仅支持iOS8.0及更高版本.模块文档地址:https : //docs.apicloud.com/Client-API/UI-Layout / UIAlbumBrowser 本例展示了常用的imagePicker()接口和open()接口.imagePicker()只能选择照片,可以点击相机按钮进行拍摄.open()接口可以选择照片或视频,

APICloud开发者进阶之路 |纯手工编写日程表功能

最近看论坛内关于极光推送的问题有很多,本想写一个关于极光的详细教程的,无奈已经有很多大牛分享过了,所以只得纯手工写了一个日程表,可以以周为单位左右切换,适用于医疗.教育等方向的app,先看下效果图. 再看一下代码截图 自动识别当前日期,并计算出本周的起始日期,通过左右按钮切换上一周和下一周,并同步更换日程,日程可点击激活高亮,至于激活显示什么样的内容你们自己根据实际功能要求处理吧. 原文地址:https://blog.51cto.com/9334358/2404941

位运算简介及实用技巧(二):进阶篇(1)[转]

位运算简介及实用技巧(二):进阶篇(1) 原贴链接:http://www.matrix67.com/blog/archives/264 =====   真正强的东西来了!   ===== 二进制中的1有奇数个还是偶数个    我们可以用下面的代码来计算一个32位整数的二进制中1的个数的奇偶性,当输入数据的二进制表示里有偶数个数字1时程序输出0,有奇数个则输出1.例如,1314520的二进制101000000111011011000中有9个1,则x=1314520时程序输出1.var   i,x,

技术:超级实用的电脑小技巧

其实微软系统中隐藏了很多实用小技巧,很多都能让我们省去不少时间.例如以下将要给你们介绍的几个技巧,我很确信就有你不知道的! 一.十个快捷键小技巧 1.[Windows键 + D]高手们常用的键,瞬间回到桌面. 2.[Windows键 + E]直接打开"我的电脑". 3.[Windows键 + L]电脑锁屏,不用担心隐私外泄. 4.[Windows键 + R]再输入osk,点"运行",立刻弹出虚拟键盘. 5.[Ctrl + Tab]快速切换浏览器选项卡. 6.[Alt

js基础进阶--编的实用技巧(一)

我的个人博客:http://www.xiaolongwu.cn 在平时的开发中,编码技巧很重要,会让你少写很多代码,起到事倍功半的效果. 下面总结几种简单的技巧,大家共同学习一下 1. 利用+.-./1,*1将字符串转换为整数型 这个方法试用于将字符串类型的数字转换为整数型,如果带字母就会返回NaN. var a = "1234", b = "leonWuv"; //我们想把a转换为1234的整数型,一般方法 console.log(typeof Number(a)