要搭建网上重走长征路的小程序，首先要深入挖掘长征的历史资料，从巧渡金沙江、强渡大渡河，到飞夺泸定桥、翻雪山过草地，每一个惊心动魄的瞬间都值得被呈现。

利用微信运动步数折算红军长征里程数是一个创新的设计。实时显示用户在长征路上的位置，并结合每个长征点的历史知识介绍，能让参与者仿佛身临其境。同时，设置答题环节，增加互动性和学习效果。

如何使用微信小程序框架来实现“网上重走长征路”小程序的核心功能。这个示例包括步数获取、里程折算和位置显示的基本逻辑。

1. 创建小程序项目

首先在微信开发者工具中创建一个新的小程序项目。

2. 页面结构 (index.wxml)

```xml
<view class="container">
  <view class="header">
    <text>网上重走长征路</text>
  </view>
  <view class="content">
    <map id="myMap" longitude="{{longitude}}" latitude="{{latitude}}" scale="14"></map>
    <view class="step-info">
      <text>当前步数: {{steps}}</text>
      <text>长征里程: {{distance}} 公里</text>
    </view>
    <button bindtap="getSteps">获取步数</button>
  </view>
</view>

3. 页面样式 (index.wxss)

```css
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.header {
  font-size: 24px;
  margin-bottom: 20px;
}

.content {
  width: 100%;
}

.map {
  width: 100%;
  height: 300px;
}

.step-info {
  margin-top: 20px;
  font-size: 18px;
}

4. 页面逻辑 (index.js)

```javascript
Page({
  data: {
    steps: 0,
    distance: 0,
    longitude: 116.4073963, // 默认经度
    latitude: 39.9041999,  // 默认纬度
  },

  onLoad: function () {
    this.getLocation();
  },

  getLocation: function () {
    wx.getLocation({
      type: 'wgs84',
      success: (res) => {
        this.setData({
          longitude: res.longitude,
          latitude: res.latitude
        });
      }
    });
  },

  getSteps: function () {
    wx.getWeRunData({
      success: (res) => {
        const encryptedData = res.encryptedData;
        const iv = res.iv;
        // 这里需要调用后端接口解密数据
        this.decryptSteps(encryptedData, iv);
      }
    });
  },

  decryptSteps: function (encryptedData, iv) {
    // 假设有一个解密函数 decryptData
    const steps = decryptData(encryptedData, iv);
    const distance = steps * 0.00001; // 假设每步0.00001公里
    this.setData({
      steps: steps,
      distance: distance.toFixed(2)
    });
  }
});

// 假设的解密函数
function decryptData(encryptedData, iv) {
  // 这里需要实现真正的解密逻辑
  // 返回解密后的步数
  return 10000; // 示例步数
}

5. 后端接口

为了完整实现这个小程序，你需要一个后端接口来解密微信运动数据。可以使用微信提供的解密算法来实现。

成果展示：