用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

借助小程序·云開發制作校園導覽小程序丨實戰

Rolan 2019-10-14 00:21

背景當你剛上大學的時候,要想不迷失校園,除了依靠不怎么可靠的路邊標識外,總會收到那么一張卡通繪制的校園地圖:這種靜態圖片可以讓我們快速地了解到所需的地理位置信息,但使用和思考過后,會發現以下問題:地理 ...

背景

當你剛上大學的時候,要想不迷失校園,除了依靠不怎么可靠的路邊標識外,總會收到那么一張卡通繪制的校園地圖:

這種靜態圖片可以讓我們快速地了解到所需的地理位置信息,但使用和思考過后,會發現以下問題:

  1. 地理位置信息粒度高,而同一個地點通常具有多個服務功能和別名。
  2. 地理位置信息變更導致地圖信息過時。一旦服務網點遷移或更名,需要重繪地圖,帶來一定的延遲和信息滯后。
  3. 入口較深。存儲在手機上的地圖并不是那么好找,尤其是隨著時間的推移。
  4. 無法準確的定位當前所處位置,需要尋找參照物,這是靜態地圖致命的缺點。
  5. 缺乏更為詳細的地點介紹,只能在有限的畫面里堆積內容。

為此,我設計了一款校園導覽應用,用當下流行的微信小程序結合云開發能力,低成本高效能地解決了以上問題。此外,我還根據對市面上的同類應用進行設計上的研究,在界面和交互設計上做功夫。下面我會進行簡短的介紹。

南苑導覽

南苑導覽是一款由學生獨立開發的以地圖為載體,提供 中山大學南方學院 (南苑)具體地點的位置信息、導航、校園歷史及文化介紹的小程序。旨在解決校園導航標識不到位、地圖形式低效單一、信息設計不夠好等問題,為來南苑新人和游客提供更加完美的出行體驗。

<div align=center>

僅需修改地圖配置文件,即可適配任意場景(校園、景區)的小程序個性化地圖定制。

技術棧:原生小程序 + TypeScript + gulp + vantUI + 云開發能力

2019 微信小程序高校大賽 · 華南賽區二等獎

</div>

南苑導覽 · 開發

  1. config 配置
├─ src
├─── config
├───── index.ts // 入口
├───── cloud.ts // 云開發相關配置
├───── info.ts // 應用介紹信息
├───── markerStyle.ts // 地圖marker樣式
├───── panorama.ts // 第三方全景地圖配置(個人類型無webview權限,默認關閉)
└───── secret.ts // 騰訊地圖key等敏感信息(可選)
  1. 使用云數據庫
// markers表 數據格式
{
  _id: "5ce8fe1c29c7a8581bc1e989",  // id,云數據庫錄入upsert更新用
  type: "生活服務",   // 場景名稱
  icon: "shfw",     // marker默認圖標,為場景名稱拼音縮寫
  scale: 15.0,   // 場景在地圖上的縮放值,可選。已廢棄,用includePoints代替
  position: 0, // 指定在各個場景中的排列順序
  data: [   // 該場景下的地點markers
    {
      name: "孫中山銅像",   // 地點名稱
      short_name: "銅像", // 名稱縮寫
      desc: "中山銅像...", // 描述信息
      logo: "tx",   // 地點logo,縮寫拼音, 如作各院系logo展示
      icon: "[email protected]",   // 自定義marker圖標,“@”后數字為圖標相較于默認圖標的縮放值
      images: 3,  // 圖片數量,作云存儲拼接路徑用(cloud://cloudRoot/1教/n.jpg)
      panorama: 0,  // 全景場景id
      latitude: "23.635875",  // 經度
      longitude: "113.678965",  // 緯度
      contact: { phone: "020-123456", address: "出門左轉" }   // 聯系方式
    }
  ]
}

使用 excel 進行數據維護,通過 python pandas 進行數據清洗,使用 jsonlines 庫輸出符合云數據庫的 JSON Lines 格式文件,以 upsert 形式導入數據庫。

數據更新流程如下:

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9Kzq570X-1570761839095)( https://656e-enanyuan-6db383-... ]

  1. 加載并清洗數據

    使用 request 或云數據庫進行異步數據請求時。由于 app.js 中的 onLaunch 和首頁 index 的 onLoad 的執行順序不是固定的,所以如果首頁有基于 app.js 請求的數據時要注意生命周期的問題。

// index
async loadMarkers() {
  let markers;
  if (app.globalData.config.debug) {
    // 本地
    markers = mockMarkers;
  } else {
    // 云
    await wx.cloud
      .callFunction({
        name: "loadMarkers"
      })
      .then((res: any) => {
        markers = res.result.data;
      });
  }
  app.globalData.markers = markers;
}

clearMarkers(markers: any[]) {
  let num = 0;  // 每個marker都要有一個id
  for (const i of markers) {
    for (const j of i.data) {
      j.id = num;
      num += 1;
      j.iconPath = `/assets/images/markers/${j.icon ? j.icon : i.icon}.png`;

      ...

      // 自定義氣泡樣式
      j.callout = Object.assign(
        { content: j.short_name ? j.short_name : j.name },
        app.globalData.config.markerStyle.calloutStyle
      );
    }
  }
  return markers;
}
  1. 巧用 MapContext

    你不需要去手動地為每個場景設置 scale,用 includePoints 即可讓地圖視野自動覆蓋到當前所有 POI。

    你也不需要去手動地去獲取權限設置用戶位置,用 moveToLocation 即可輕松定位。

// index
onReady() {
  this.setData!({
    mapContext: wx.createMapContext("map")
  });
}

includePoints(padding: number) {
  this.data.mapContext.includePoints({
    padding: [padding, padding, padding, padding],
    points: this.data.markers
  });
}

locate() {
  this.data.mapContext.moveToLocation();
}
  1. 使用云存儲管理圖片

    添加新圖片時,直接修改 images 字段即可,文件夾目錄為地點名稱。

<!-- 地點詳情頁 輪播圖 -->
<swiper
  indicator-dots="{{imgUrls.length > 1}}"
  autoplay="{{true}}"
  interval="3000"
  duration="1000"
>
  <block wx:for="{{imgUrls}}" wx:key="{{index}}">
    <swiper-item>
      <image
        src="{{item}}"
        class="slide"
        data-id="{{index}}"
        bindtap="previewImage"
      />
    </swiper-item>
  </block>
</swiper>
for (let i = 0; i < marker.images; i++) {
  imgUrls.push(
    this.data.cloudRoot +
      "images/" +
      (marker.short_name || marker.name) +
      "/" +
      i +
      ".jpg"
  );
}

南苑導覽 · 設計

如果你在微信上搜索「導覽」二字,看到的小程序大多都是一個模板,頁面層級深,界面擁擠,列表式的信息展示并不符合我們日常使用地圖 APP 的經驗。為此,我做出了多項改良:

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-j76bV81T-1570761839095)( https://656e-enanyuan-6db383-... ]

  1. 更好的視野 - 自定義導航欄與側邊欄

    因為只有特定的頁面需要使用自定義導航欄,所以只需要設置頁面級的 config:

"navigationStyle": "custom"

接下來獲取膠囊按鈕位置信息:

bounding: wx.getMenuButtonBoundingClientRect();

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-XoDA3u2I-1570761839096)( https://656e-enanyuan-6db383-... ]

動態地設置樣式:

<!-- SIDE MENU -->
<view
  class="sidebar"
  hidden="{{toggleRoutes}}"
  style="top:{{bounding.height + bounding.top + 10}}px"
>
  ...
</view>
  1. FAB 與側邊欄設計

把最主要的定位、搜索和路線推薦功能在視覺上成為整體,通過點擊 FAB 彈出菜單選項。側邊欄的地點場景菜單設計為下拉滾動,注意使用半遮設計來提醒用戶滾動。同時,為了讓界面更加精簡,側邊菜單會在點擊 FAB(Float Action Button)和母按鈕時 toggle 顯示與隱藏。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-SP3GrjOr-1570761839096)( https://656e-enanyuan-6db383-... ]

  1. 用點擊代替滾動 - scroll-into-view

    在路線面板和搜索頁中,使用到了 scroll-view 組件,利用其 scroll-into-view 特性,實現點擊代替滾動的操作,同時也能起到提醒后置選項的作用。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-o18t46ea-1570761839097)( https://656e-enanyuan-6db383-... ]

windowWidth: wx.getSystemInfoSync().screenWidth;
<scroll-view class="route" scroll-x scroll-into-view="{{focusPointId}}">
  <view
    class="points"
    style="width:{{routes[routeIndex].count * 140 < windowWidth ? windowWidth : routes[routeIndex].count * 140}}rpx;"
  >
    ...
  </view>
</scroll-view>
  1. 更好的視角 - 全景功能

    結合 web-view 和全景服務平臺,可以為一款地圖導覽應用增色不少。

總結

云開發讓小程序開發者無需搭建服務器,使用平臺提供的 API 即可快速地進行業務開發、上線和迭代,免費的基礎版完全可以滿足中小應用的需求。「南苑導覽」借助騰訊云開發能力,上線以來,幫助到了許許多多的新生和來客,實現了產品價值。最后,期望官方早日開放自定義地圖底圖能力,讓開發者能夠個性化地圖,探索出更多的應用場景!

源碼地址

https://github.com/TencentCloudBase/Good-practice-tutorial-recommended

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: CloudBase 來自: segmentfault.
不朽的浪漫援彩金
澳洲幸运5开奖网 波克棋牌手机版下载 甘肃快三早上什么时候开始 原油期货配资的合法平台 长春麻将怎么玩 幸运快三是国家统一开奖吗 体育彩票超级大乐透开奖结果 中国竞彩比分网 正规信誉好的棋牌平台 四人单机麻将免费下 广东36选7走势图 百度 淘宝即时比分7m 股票涨停了可以卖吗 永利棋牌娱乐app 5分快3全天288期技巧 26选5怎么看中奖