В последнее время все более популярной становится разработка мини-программ, которые в качестве дополнительного входа в различные линейки продуктов привлекают большое количество пользователей и разработчиков своей легкой, быстрой и мощной социальной цепочкой. В отрасли существует бесконечное множество фреймворков для разработки. Wepy, mpvue, taro и т. д. развиваются в более быстром и мощном направлении. Существует общая тенденция к объединению апплетов H5, WeChat, Alipay, Baidu и Toutiao.
Эта статья направлена на изучение идей разработки мини-программ карты на основе фреймворка mpvue, которыми следует поделиться и обобщить. Автор использовал возможности карты mpvue + Tencent для созданияпланирование маршрута метроМини-программа в основном предоставляет карты сети метро и информацию о путешествиях по крупным городам по всему миру, включая местные города, которые поддерживают просмотр карт и планирование маршрута. Хотя функция не сложная, это также практичный инструмент. Без лишних слов сначалаопытодин раз:
исходный адрес гитхаба:GitHub.com/warp prism/S…
запустить скриншот
Ниже приводится формальное введение в разработку:
Внедрение mpvue и строительство проекта
mpvue = miniprogram + vue framework, грубо говоря, это использование vue framework для разработки небольших программ. Недавно mpvue был обновлен до версии 2.x, которая поддерживает апплет WeChat, Alipay, Baidu и Toutiao. По сравнению с традиционными методами разработка mpvue имеет следующие преимущества:
- Полноценные возможности компонентной разработки: улучшите возможность повторного использования кода
- Полный опыт разработки Vue.js
- Удобное решение для управления данными Vuex: легко создавать сложные приложения
- Механизм быстрой сборки веб-пакета: настраиваемая стратегия сборки, горячая перезагрузка на этапе разработки
- Поддержка использования внешних зависимостей npm
- Быстро инициализируйте проекты с помощью инструмента командной строки Vue.js vue-cli
- Возможность преобразования кода H5 и компиляции в объектный код апплета
Что касается личного опыта, то он достаточно плавный и плавный, и традиционная разработка веб-приложений плавно переключается на разработку небольших программ, в основном нулевой порог. Следует отметить, что ограничения апплета и отличие от Vue:
- Апплет использует относительные пиксели rpx для макета стиля.
- Некоторые селекторы CSS не поддерживаются, в настоящее время только #id | .class | tag | tag,tag | ::after::before, поэтому обратите особое внимание
- Комбинированный жизненный цикл, mpvue смешивает жизненный цикл апплета и vue, подробности см.mpvue.com/mpvue/#_3, В настоящее время в этом месте еще много ям. Например, при выгрузке страницы апплета экземпляр vue не уничтожается, в результате при следующем входе на страницу состояние страницы остается неизменным, а состояние должно быть сброшено вручную во время выгрузки и т. д.
- mpvue инкапсулирует небольшие объекты данных, обычно
$mpначать, какevent.$mp.detail.targetЖдать - Компоненты апплета отличаются от компонентов vue, не думайте, что можно использовать функции компонентов vue, такие как слот, асинхронные компоненты и т. д.
- Лучше не путать vue store и wx localstorage, выбирать разные способы хранения в соответствии с разными потребностями
- Не используйте маршрутизацию vue, используйте собственный механизм навигации апплета.
Затем мы настраиваем среду разработки, и скаффолдинг mpvue доступен из коробки:
# 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli@2.9
# 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
Далее улучшите файловую структуру и добавлять такие модули, как Config, Store, Mixins и т. Д., Как показано на рисунке:
app.json — это специальный файл для небольших программ, и его тоже нужно доработать:
{
"pages": [
"pages/citylist/main",
"pages/citydetail/main"
],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#eee",
"navigationBarTitleText": "全球地铁，全程为你",
"navigationBarTextStyle": "black"
}
}
Затем вы можете с радостью писать код Vue, щелкать страницу, щелкать другую страницу, компоненты, хранить, управлять данными, что угодно, в нем есть все.
Карты Tencent + мини-программы
Сосредоточив внимание на доступе к картам, Tencent Maps предоставляет два стыковочных портала для мини-программ, 1 — это персонализированное отображение карты, а 2 — специальный SDK, которые вместе улучшают экологию карты для мини-программ.
(1) Для отображения персонализированной карты разработчик должен зарегистрироваться и подать заявку на получение ключа разработчика, привязать апплет в фоновом режиме управления, а затем установить стиль персонализированной карты для использования:
<map
id="citymap"
name="citymap"
:longitude="lng"
:latitude="lat"
:polyline="polyline"
:markers="markers"
scale="12"
:subkey="YOUR_OWN_QQMAP_KEY"
show-location
show-compass
enable-rotate
style="width: 100%; height: 100%;"
>
<cover-view class="map-cover-view">
<button class="explore-btn" type="primary" @tap="exploreCity">查看旅游攻略</button>
</cover-view>
</map>
Среди них карта — это апплетнативные компоненты, собственный компонент отделен от процесса рендеринга WebView, и его уровень является самым высоким, поэтому независимо от того, какой z-индекс установлен, другие компоненты на странице не могут перекрыть собственный компонент. Грубо говоря, нативные компоненты предоставляются клиентом WeChat, который не относится к встроенному браузеру, поэтому апплет предоставляет компоненты cover-view и cover-image, которые могут быть покрыты на некоторых нативных компонентах. . Эти два компонента также являются собственными компонентами, но ограничения на использование отличаются от других собственных компонентов.
Из-за этой ямы автор тянет много времени, иногда инструменты разработки можно использовать, но компоненты на реальной машине полностью испорчены, поэтому превалирует отладка реальной машины. Для нативных компонентов не используйте слишком сложный CSS, многие его свойства CSS плохо поддерживаются.
Карта может определять несколько параметров, не говоря уже о широте и долготе, масштаб относится к коэффициенту масштабирования, то есть масштабу карты, ломаная линия рисует ломаные линии на карте, маркеры используются для отметки точек на карте, используется отображение местоположения чтобы отобразить местоположение пользователя, show-compass показывает компас.
(2) Специальный SDK, который в настоящее время предоставляет следующие возможности:
- search(options:Object) Поиск местоположения, поиск окружающих пои, таких как: "гостиница" "кейтеринг" "развлечение" "школа" и т.д.
- getSuggestion(options:Object) используется для получения завершения и подсказки ключевого слова ввода, чтобы помочь пользователям быстро ввести
- reverseGeocoder(options:Object) Обеспечивает преобразование координат в текстовое описание того, где находятся координаты. Введите координаты, чтобы получить информацию о географическом местоположении и список ближайших пои.
- geocoder(options:Object) обеспечивает преобразование из описания адреса в координаты местоположения, прямо противоположное процессу обратного геокодирования
- direction(options:Object) Предоставляет возможности планирования маршрута для вождения, ходьбы, езды на велосипеде и общественного транспорта.
- getCityList() Получить данные национального списка городов
- getDistrictByCityId(options:Object) Возвращает районы и округа под городом через идентификатор города.
- calculateDistance(options:Object) Вычислить расстояние пешком и на машине от одной точки до нескольких точек
В качестве примера возьмем планирование маршрута общественного транспорта (следующий код упрощен):
Первым шагом является инициализация объекта карты SDK.
import config from '@/config'
import QQMapWX from '../../assets/lib/qqmap-wx-jssdk.js' // 这里用未压缩版的代码
const QQMapSDK = new QQMapWX({
key: config.qqMapKey || ''
})
Второй шаг — получить начальную и конечную точки координат и запросить маршрут.
// 坐标从上一页query传进来，坐标为浮点数，可通过geocoder接口获取
this.fromLocation = {
latitude: +query.from.split(',')[0] || -1,
longitude: +query.from.split(',')[1] || -1
}
this.toLocation = {
latitude: +query.to.split(',')[0] || -1,
longitude: +query.to.split(',')[1] || -1
}
// 查询地图路线
queryMapRoutine() {
QQMapSDK.direction({
mode: 'transit', // 'transit'(公交路线规划)
// from参数不填默认当前地址
from: this.fromLocation,
to: this.toLocation,
success: (res) => {
console.log('路线规划结果', res);
let routes = res.result.routes;
this.routes = routes.map(r => {
// 对每一种路线方案，分别进行解析
return this.parseRoute(r)
})
console.log('parsed routes', this.routes)
}
})
}
Третий шаг, анализ маршрута, создание описания маршрута и т. д.
// 解析路线，包括距离，时间，描述，路线，起止点等
parseRoute(route) {
let result = {}
// 出发时间
result.setOutTime = formatTime(new Date())
result.distance = route.distance < 1000 ?
`${route.distance}米` :
`${(route.distance / 1000).toFixed(2)}公里`
result.duration = route.duration < 60 ?
`${route.duration}分钟` :
`${parseInt(route.duration / 60)}小时${route.duration % 60}分钟`
result.desc = []
// 每一个路线分很多步，如先步行，后乘公交，再搭地铁等
route.steps.forEach(step => {
// if (step.mode == 'WALKING' && step.distance > 0) {
// result.desc.push(`向${step.direction}步行${step.distance}米`)
// }
if (step.mode == 'TRANSIT' && step.lines[0]) {
let line = step.lines[0]
if (line.vehicle == 'BUS') line.title = `公交车-${line.title}`
if (line.vehicle == 'RAIL') line.title = `铁路`
result.desc.push(`${line.title}: ${line.geton.title} —> ${line.getoff.title}，途经 ${line.station_count} 站。`)
}
})
result.polyline = []
result.points = []
//获取各个步骤的polyline，也就是路线图
for(let i = 0; i < route.steps.length; i++) {
let step = route.steps[i]
let polyline = this.getStepPolyline(step)
if (polyline) {
result.points = result.points.concat(polyline.points)
result.polyline.push(polyline)
}
}
// 标记路线整体显示坐标
this.getStepPolyline.colorIndex = 0
let midPointIndex = Math.floor(result.points.length / 2)
result.latitude = result.points[midPointIndex].latitude
result.longitude = result.points[midPointIndex].longitude
// 标记路线起止点
let startPoint = result.points[0]
let endPoint = result.points[result.points.length - 1]
result.markers = [
{
iconPath: this.startIcon,
id: 0,
latitude: startPoint.latitude,
longitude: startPoint.longitude,
width: 28,
height: 28,
zIndex: -1,
anchor: {x: 0.5, y: 1}
},
{
iconPath: this.endIcon,
id: 1,
latitude: endPoint.latitude,
longitude: endPoint.longitude,
width: 28,
height: 28,
zIndex: -1,
anchor: {x: 0.5, y: 1}
}
]
return result
},
Четвертый шаг, функция getStepPolyline Получить полилинию маршрута каждого шага маршрута
getStepPolyline(step) {
let coors = [];
// 随机颜色
let colorArr = ['#1aad19', '#10aeff', '#d84e43']
let _dottedLine = true
if (step.mode == 'WALKING' && step.polyline) {
coors.push(step.polyline);
_dottedLine = false
} else if (step.mode == 'TRANSIT' && step.lines[0].polyline) {
coors.push(step.lines[0].polyline);
} else {
return null
}
//坐标解压（返回的点串坐标，通过前向差分进行压缩）
let kr = 1000000;
for (let i = 0 ; i < coors.length; i++){
for (let j = 2; j < coors[i].length; j++) {
coors[i][j] = Number(coors[i][j - 2]) + Number(coors[i][j]) / kr;
}
}
//定义新数组，将coors中的数组合并为一个数组
let coorsArr = [];
let _points = [];
for (let i = 0 ; i < coors.length; i ++){
coorsArr = coorsArr.concat(coors[i]);
}
//将解压后的坐标放入点串数组_points中
for (let i = 0; i < coorsArr.length; i += 2) {
_points.push({ latitude: coorsArr[i], longitude: coorsArr[i + 1] })
}
if (!this.getStepPolyline.colorIndex) {
this.getStepPolyline.colorIndex = 0
}
let colorIndex = this.getStepPolyline.colorIndex % colorArr.length
this.getStepPolyline.colorIndex++
// 最终polyline结果
let polyline = {
width: 7,
points: _points,
color: colorArr[colorIndex],
dottedLine: _dottedLine,
arrowLine: true, // 带箭头的线, 开发者工具暂不支持该属性
borderColor: '#fff',
borderWidth: 1
}
return polyline
}
Наконец, привязав к карте и выведя, мы можем получить примерно такой результат:
广州火车站 -> 广州塔
9.88km 30分钟
地铁5号线 广州火车站 -> 珠江新城，途径7站
地铁3号线 珠江新城 -> 广州塔，途径1站
так что мы проходимdirectionИнтерфейс выполняет простую функцию планирования маршрута, а затем привязывает сгенерированные данные к компоненту карты, и простой апплет готов. Конечно, если вы хотите сделать лучше, вы должны вызывать другие подобные интерфейсы и постепенно улучшать детали.
<map
id="citymap"
name="citymap"
:latitude="currentRoute.latitude"
:longitude="currentRoute.longitude"
:polyline="currentRoute.polyline"
:markers="currentRoute.markers"
scale="12"
:subkey="qqMapKey"
show-location
show-compass
enable-rotate
style="width: 100%; height: 100%;"
></map>
Для получения дополнительных сведений о реализации обратитесь к исходному коду и самому апплету. Если он вам полезен, вы можете пометить поддержку.
разное
Вот еще один钢琴教学веб-приложение класса, опубликованное на странице gitee
crystalworld.gitee.io/qpiano/#/
Заинтересованные друзья могут взглянуть, а затем я добавлю руководство по разработке и исходный код, когда у меня будет время, и поделюсь им отдельно.
Обновление 2019-04-01: Представляем портал статей:nuggets.capable/post/684490…