微信小程序制作指南针的代码

以下是制作微信小程序指南针的代码示例：

1. 在 wxml 文件中添加以下代码：

<canvas canvas-id="compass" style="width: 100%; height: 100vh;"></canvas>

其中，canvas-id 可以自定义。

2. 在 js 文件中添加以下代码：

Page({
  onReady: function() {
    // 获取 canvas 上下文
    const context = wx.createContext();
    // 获取屏幕宽度
    const screenWidth = wx.getSystemInfoSync().screenWidth;
    // 设置 canvas 中心点为屏幕中心点
    const centerX = screenWidth / 2;
    const centerY = 300;
    // 设置指南针半径
    const radius = 100;

    // 绘制指南针外圆
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    context.setStrokeStyle('#000000');
    context.stroke();

    // 绘制指南针刻度
    for (let i = 0; i < 360; i += 15) {
      const startX = centerX + radius * Math.sin(i * Math.PI / 180);
      const startY = centerY - radius * Math.cos(i * Math.PI / 180);
      const endX = centerX + (radius - 10) * Math.sin(i * Math.PI / 180);
      const endY = centerY - (radius - 10) * Math.cos(i * Math.PI / 180);
      context.beginPath();
      context.moveTo(startX, startY);
      context.lineTo(endX, endY);
      context.setStrokeStyle('#000000');
      context.stroke();
    }

    // 绘制指南针指针
    wx.onCompassChange((res) => {
      const direction = res.direction.toFixed(2);
      context.clearRect(0, 0, screenWidth, 600);
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
      context.setStrokeStyle('#000000');
      context.stroke();
      context.beginPath();
      const pointerX = centerX + (radius - 20) * Math.sin(direction * Math.PI / 180);
      const pointerY = centerY - (radius - 20) * Math.cos(direction * Math.PI / 180);
      context.moveTo(centerX, centerY);
      context.lineTo(pointerX, pointerY);
      context.setStrokeStyle('#FF0000');
      context.stroke();
      context.draw();
    });
  }
})

以上代码中，我们使用了 `wx.createContext()` 方法获取 canvas 上下文，并使用 `wx.getSystemInfoSync().screenWidth` 获取屏幕宽度，以便后续绘制指南针使用。`wx.onCompassChange()` 方法可以获取手机当前的方向，并根据方向不断重绘指针位置。

以上就是制作微信小程序指南针的代码示例，希望能对你有所帮助。