一个完整的项目示例：taro开发微信小程序

PyAIGCMaster2025-05-20 8:52

前一周完成了一个项目，体测成绩转换的工具，没做记录，。这次计划开发一个地图应用小程序，记录一下。方便给使用的人。

一、申请微信小程序，填写相应的信息，取得开发者ID。这个要给腾讯地图使用的。

二、申请腾讯地图API，创建应用，个人版，6500次调用 。并发5.也还行吧。

好了，我们开始。

三、新建一个文件夹，我的是win系统。

放在如下位置。D:\gitee\wechat-map

在目录处：cmd

四、创建环境相关。

我使用的是react+taro等，因为工程量小，不再搞复杂了。

参考 ：安装及使用 | Taro 文档

看操作记录：

npm install -g @tarojs/cli
taro init wechat-map

cd wechat-map
pnpm install

五、 打开vscode,编译一下。

退出当前用户，重新登录一个用户。你懂的。

打开terminal，pnpm dev:weapp

我用的是taro 3.6.37，可能有点低，再说吧。

六，打开微信开发者工具。

直接导入项目即可，找到目录。其他自动生成。

注意清缓存，编译。

七、正式开始吧，来个首页

复制代码 
/*
 * @Author: DuYicheng
 * @Date: 2025-05-13 08:49:34
 * @LastEditors: DuYicheng
 * @LastEditTime: 2025-05-13 09:57:00
 * @Description: 
 * @FilePath: \wechat-map\src\pages\index\index.tsx
 */
import { View, Text, Image } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import './index.scss'

export default function Index() {

  useLoad(() => {
    console.log('Page loaded.')
  })

  return (
    <View className='index'>
      <View className='logo-container'>
        <Image
          className='medical-logo'
          src='../../assets/images/medical-logo.png'
          mode='aspectFit'
        />
        <Text className='title'>医疗服务</Text>
      </View>
      <View className='button-container'>
        <View className='find-button clinic'>
          找诊所
        </View>
        <View className='find-button pharmacy'>
          找药店
        </View>
      </View>
    </View>
  )
}

.index {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60px;

  .medical-logo {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
  }

  .title {
    font-size: 24px;
    color: #333;
  }
}

.button-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 40px; // 添加内边距使按钮更窄
}

.find-button {
  width: 100%;
  height: 80px; // 增加按钮高度
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 18px;
  color: #fff;
  
  &.clinic {
    background-color: #2D7DD2;
  }
  
  &.pharmacy {
    background-color: #45B649;
  }
}

八、小程序sdk配置。

九、实现按钮的跳转。

先实现诊所功能。

1.结构图

复制代码 
src/
  ├── assets/
  ├── pages/
  │   ├── index/
  │   └── clinic-map/
  │       ├── index.tsx
  │       ├── index.scss
  │       └── index.config.ts
  └── utils/
      └── qqmap-wx-jssdk.js

2.主页面调整代码如：

复制代码 
import { View, Text, Image } from '@tarojs/components'
import { useLoad, navigateTo } from '@tarojs/taro'
import './index.scss'

export default function Index() {
  useLoad(() => {
    console.log('Page loaded.')
  })

  const handleFindClinic = () => {
    navigateTo({
      url: '/pages/clinic-map/index'
    })
  }

  return (
    <View className='index'>
      <View className='logo-container'>
        <Image
          className='medical-logo'
          src='../../assets/medical-logo.png'
          mode='aspectFit'
        />
        <Text className='title'>医疗服务</Text>
      </View>
      <View className='button-container'>
        <View className='find-button clinic' onClick={handleFindClinic}>
          找诊所
        </View>
        <View className='find-button pharmacy'>
          找药店
        </View>
      </View>
    </View>
  )
}

3.诊所地图

复制代码 
import { View, Map } from '@tarojs/components'
import Taro, { useLoad } from '@tarojs/taro'
import { useState } from 'react'
import './index.scss'

const QQMapWX = require('../../utils/qqmap-wx-jssdk.js')
let qqmapsdk

export default function ClinicMap() {
  const [latitude, setLatitude] = useState(0)
  const [longitude, setLongitude] = useState(0)
  const [clinics, setClinics] = useState([])

  useLoad(() => {
    // 初始化地图SDK
    qqmapsdk = new QQMapWX({
      key: 'YOUR_KEY_HERE' // 替换成你的腾讯地图key
    })

    // 获取当前位置权限
    Taro.getLocation({
      type: 'gcj02',
      success: function(res) {
        setLatitude(res.latitude)
        setLongitude(res.longitude)
        searchNearbyClinic(res.latitude, res.longitude)
      },
      fail: function() {
        Taro.showToast({
          title: '需要授权位置信息',
          icon: 'none'
        })
      }
    })
  })

  const searchNearbyClinic = (lat, lng) => {
    qqmapsdk.search({
      keyword: '诊所',
      location: `${lat},${lng}`,
      success: function(res) {
        console.log(res)
        setClinics(res.data)
      },
      fail: function(res) {
        console.error(res)
        Taro.showToast({
          title: '搜索诊所失败',
          icon: 'none'
        })
      }
    })
  }

  return (
    <View className='clinic-map'>
      <Map
        className='map'
        latitude={latitude}
        longitude={longitude}
        markers={clinics.map((clinic, index) => ({
          id: index,
          latitude: clinic.location.lat,
          longitude: clinic.location.lng,
          title: clinic.title
        }))}
        show-location
      />
      <View className='clinic-list'>
        {clinics.map((clinic, index) => (
          <View key={index} className='clinic-item'>
            <View className='clinic-name'>{clinic.title}</View>
            <View className='clinic-address'>{clinic.address}</View>
            <View className='clinic-distance'>{clinic._distance}米</View>
          </View>
        ))}
      </View>
    </View>
  )
}

4.地图样式

复制代码 
.clinic-map {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .map {
    width: 100%;
    height: 50vh;
  }

  .clinic-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background: #f5f5f5;

    .clinic-item {
      background: #fff;
      margin-bottom: 10px;
      padding: 15px;
      border-radius: 8px;

      .clinic-name {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
      }

      .clinic-address {
        font-size: 14px;
        color: #666;
        margin-bottom: 5px;
      }

      .clinic-distance {
        font-size: 12px;
        color: #999;
      }
    }
  }
}

5.创建页面配置

复制代码 
export default {
  navigationBarTitleText: '找诊所',
  navigationBarBackgroundColor: '#ffffff',
  navigationBarTextStyle: 'black'
}

6.修改：app.config.ts

复制代码 
export default defineAppConfig({
  pages: [
    'pages/index/index',
    'pages/clinic-map/index'
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  },
  permission: {
    'scope.userLocation': {
      desc: '你的位置信息将用于小程序位置接口的效果展示'
    }
  }
})

7.修改project.config.json

复制代码 
{
  // ...existing code...
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
  // ...existing code...
}

其他建议：

建议在开发者工具的详情设置中，确保以下设置：

  1. 勾选"使用增强编译"
  2. 勾选"不校验合法域名"（开发阶段）
  3. 确保在"API 权限设置"中已经开启了位置相关接口权限

测试成功，但过了一会，说用量多了。vscode，重新编译。

基本可以了，下一步就可以上传代码等待审核了。以上是一个简单的教程，你可以根据实际修改。

相关推荐
不如摸鱼去21 小时前
Wot UI 2.1.0 发布：ConfigProvider 全局配置能力升级
ui·小程序·uni-app
这是个栗子1 天前
微信小程序开发（九）- uni-app微信小程序商城
微信小程序·小程序·uni-app·vue·vuex
TuCoder1 天前
景区导览小程序功能选型指南：刚需配置、增值功能与技术避坑要点
小程序
小羊Yveesss1 天前
2026年知识付费小程序多少钱一个？
小程序
一只皮卡皮卡丘1 天前
微信小程序tab页苹果显示安卓不显示的问题
微信小程序·小程序
六月的可乐1 天前
【干货】小程序虚拟瀑布流探索小结
前端·react.js·小程序
前端 贾公子2 天前
小程序蓝牙打印探索与实践(上)
小程序
拙慕JULY2 天前
小程序返回 base64 文件报错
开发语言·javascript·小程序
dh131222505252 天前
按月季度销售业绩核算小程序
小程序·销售小程序·绩效小程序·业绩统计小程序·业绩核算小程序
拙慕JULY2 天前
微信小程序自定义标题背景色
微信小程序·小程序
热门推荐
01HTTP 与 HTTPS 的区别：从原理到实战详解02《置身钉内》原文-可播放阅读03【AI】2026 年具身智能模型和世界模型总结042026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？05Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析06AI科技热点日报 | 2026年6月1日072026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？08GitHub 镜像站点09AI一周事件 · 2026-06-03 至 2026-06-09102026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf