小程序实践总结
作者: dkvirus 发表于: 2018-07-06 12:32:47 最近更新: 2018-08-02 17:11:00

一、小程序图片预览

1. 概述

小程序图片预览功能:点击图片,图片占满整个屏幕,再次点击,退出预览模式,恢复原样。

2. 实现

小程序提供预览 API。

1
2
3
4
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
})

但是有几点需要说明的地方:

  • 小程序预览的图片必须放在服务器上,也就是只能通过 http 地址进行访问,想要让本地图片文件预览是办不到的;
  • current 为要预览那张图片的 http 地址,如:’http://images/1.png';
  • urls 是个数组,用处是在预览图片状态下左右滑动可以切换到其它图片,可以切换哪些图片由 urls 这个参数决定。

二、小程序打开指定坐标的地图

1. 概述

在一些商铺小程序上经常可以看到地址一栏,点击它,可以打开商铺所在地址的位置。

小程序地址

这个功能如何实现呢??

2. 实现

小程序地址api 里提供了 wx.getLocation 这个 API,就是用来打开指定坐标的位置。

下面是官方提供的示例代码。意思是调用 wx.getLocation 先获取位置经纬度,再调用 wx.openLocation 打开经纬度的位置。这里有个坑就是 wx.getLocation 默认获取的你的位置,也就是打开小程序用户的位置,而不是商铺的位置。

1
2
3
4
5
6
7
8
9
10
11
12
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
wx.openLocation({
latitude: latitude,
longitude: longitude,
scale: 28
})
}
})

这时就需要借助外力,搜索 百度拾取坐标系统,输入商铺的位置,在右边会出现搜索位置的经纬度。

小程序地址图2

这里还有个要注意的地,就是它这提供的坐标:119.95738,31.701528,第一个坐标是 longitude,第二个才是 latitude。

1
2
3
4
5
wx.openLocation({
latitude: 31.701528,
longitude: 119.95738,
scale: 28
})
首页
友链
归档
dkvirus
动态
RSS