With the help of small program · cloud development and production of campus guide small program I combat

background

When you first started college, in order to keep track of your campus, besides relying on unreliable roadside signs, you were always presented with one cartoonish map of the campus:

This kind of still image can give us the location information we need quickly, but after using and thinking about it, we can find the following problems:

1. Geolocation information is highly granular, and the same location often has multiple service functions and aliases.
2. Map information becomes obsolete due to changes in geographic location information. Once the service network is migrated or renamed, the map needs to be redrawn, resulting in a certain amount of delay and information lag.
3. The entrance is deep. Maps stored on your phone aren’t that easy to find, especially over time.
4. Unable to accurately locate the current position, need to look for reference, this is the fatal drawback of static maps.
5. Lack of more detailed location introduction, can only accumulate content in a limited screen.

To this end, I designed a campus guide application, using the popular wechat small program combined with cloud development ability, low cost and high efficiency to solve the above problems. In addition, I also studied the design of similar applications on the market, and made efforts in interface and interaction design. I’ll give you a brief introduction.

Nanyuan tour

Nanfang College, Sun Yat-sen University

Nanyuan Tour · Development

1. The config configuration

├─ SRC ├─ config ├─ index.ts/ / the entry├ ─ ─ ─ ─ ─ cloud. Ts// Cloud development related configuration├ ─ ─ ─ ─ ─ the info. Ts// Application information├ ─ ─ ─ ─ ─ markerStyle. Ts// Map marker style├ ─ ─ ─ ─ ─ panorama. Ts// Third-party panorama map configuration (personal type does not have WebView permission, disabled by default)└ ─ ─ ─ ─ ─ secret. Ts// Sensitive information such as Tencent map Key (optional)
Copy the code

2. Using a Cloud database

// Identifies the table data format
{
  _id: "5ce8fe1c29c7a8581bc1e989".// cloud database input upsert update
  type: "Life Service".// Scene name
  icon: "shfw".// marker default icon, pinyin abbreviation of scene name
  scale: 15.0.// Optional zoom value of the scene on the map. Deprecated, replaced with includePoints
  position: 0.// Specify the order in each scene
  data: [   // The location of the scene
    {
      name: "Bronze Statue of Sun Yat-sen".// Location name
      short_name: "Bronze".// Name abbreviation
      desc: "Bronze statue of Zhongshan...".// Description
      logo: "tx".// Location logo, abbreviation pinyin, such as the logo of each department display
      icon: "tx@2".// Customize the marker icon. The number after "@" is the scale value of the icon compared to the default icon
      images: 3.//cloud ://cloudRoot/1 /n.jpg
      panorama: 0.// Panorama scene ID
      latitude: "23.635875"./ / longitude
      longitude: "113.678965"./ / latitude
      contact: { phone: "020-123456".address: "Go out and turn left." }   // Contact information}}]Copy the code

Excel was used for data maintenance, Python Pandas was used for data cleaning, jSONLines was used to output JSON Lines files conforming to the cloud database, and upSERt files were imported into the database.

The data update process is as follows:

2. Load and wash data when using request or a cloud database for asynchronous data requests. Since the execution order of onLaunch in app.js and onLoad in the home index is not fixed, it is important to pay attention to life cycle issues if the home page has data based on app.js requests.

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

clearMarkers(markers: any[]) {
  let num = 0;  // Each marker must have an 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`; .// Customize the bubble style
      j.callout = Object.assign(
        { content: j.short_name ? j.short_name : j.name }, app.globalData.config.markerStyle.calloutStyle ); }}return markers;
}
Copy the code

3. Instead of manually setting the scale for each scene, use includePoints to automatically cover all the current POIs. You don’t have to manually obtain permissions to set the user location, you can easily locate it using 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();
}
Copy the code

4. When adding a new image using cloud storage management images, you can directly modify the images field. The folder directory is the location name.

<! -- Venue Details page -->
<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>
Copy the code

for (let i = 0; i < marker.images; i++) {
  imgUrls.push(
    this.data.cloudRoot +
      "images/" +
      (marker.short_name || marker.name) +
      "/" +
      i +
      ".jpg"
  );
}
Copy the code

Nanyuan Tour · Design

If you search the word “guide” on wechat, you will see most of the small programs are a template. The page level is deep, the interface is crowded, and the tabular information display is not in line with our daily experience in using map apps. To this end, I made a number of improvements:

1. Since only certain pages need to use the custom navigation bar, you only need to set the page-level config:

  "navigationStyle": "custom"
Copy the code

Next, obtain the location information of the capsule button:

bounding: wx.getMenuButtonBoundingClientRect();
Copy the code

Set the style dynamically:

<! -- SIDE MENU -->
<view
  class="sidebar"
  hidden="{{toggleRoutes}}"
  style="top:{{bounding.height + bounding.top + 10}}px"
>.</view>
Copy the code

2. FAB with sidebar design

Visually integrate the main location, search and route recommendation functions by clicking FAB to pop up menu options. The location scene menu in the sidebar is designed for pull-down scrolling. Note the use of a half-mask to remind users to scroll. Also, to make the interface more streamlined, the side menu toggle shows and hides when clicking FAB (Float Action Button) and parent Button.

1. The Scroll-into-view component is used in the route panel and search page. By virtue of its scroll-into-view feature, the operation of clicking instead of scrolling can be realized and the function of reminding post-options can also be used.

windowWidth: wx.getSystemInfoSync().screenWidth;
Copy the code

<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>
Copy the code

3. Better view-panorama combined with Web-view and panorama service platform can make a great map navigation application.

conclusion

Cloud development lets small program developers do not need to build a server, using the API provided by the platform can quickly carry out business development, online and iteration, free basic version can fully meet the needs of small and medium-sized applications. With the help of Tencent cloud development capabilities, “Nanyuan Guide” has helped many new students and visitors since its launch, realizing the value of the product. Finally, we look forward to the official opening of the ability to customize the base map, so that developers can personalize the map and explore more application scenarios!

The source address

Github.com/TencentClou…

---

If you want to know more about the cloud development of CloudBase related technical stories/technical combat experience, please scan the code to follow [Tencent cloud development] public account ~

About Cloud Development

CloudBase is a product solution of cloud integration. It adopts serverless architecture, eliminates operation and maintenance transactions such as environment construction, supports one cloud and multiple terminals, and helps to quickly build small programs, Web applications and mobile applications.

• Technical documentation: www.cloudbase.net/
• Wechat search: Tencent Cloud Development, get the latest progress of the project