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

前一周完成了一个项目，体测成绩转换的工具，没做纪录，。这次计划开发一个舆图应用小程序，纪录一下。方便给使用的人。
一、申请微信小程序，填写相应的信息，取得开发者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，大概有点低，再说吧。
六，打开微信开发者工具。

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

留意清缓存，编译。
 

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

1. /*
2. * @Author: DuYicheng
3. * @Date: 2025-05-13 08:49:34
4. * @LastEditors: DuYicheng
5. * @LastEditTime: 2025-05-13 09:57:00
6. * @Description:
7. * @FilePath: \wechat-map\src\pages\index\index.tsx
8. */
9. import { View, Text, Image } from '@tarojs/components'
10. import { useLoad } from '@tarojs/taro'
11. import './index.scss'
13. export default function Index() {
15.   useLoad(() => {
16.     console.log('Page loaded.')
17.   })
19.   return (
20.     <View className='index'>
21.       <View className='logo-container'>
22.         <Image
23.           className='medical-logo'
24.           src='../../assets/images/medical-logo.png'
25.           mode='aspectFit'
26.         />
27.         <Text className='title'>医疗服务</Text>
28.       </View>
29.       <View className='button-container'>
30.         <View className='find-button clinic'>
31.           找诊所
32.         </View>
33.         <View className='find-button pharmacy'>
34.           找药店
35.         </View>
36.       </View>
37.     </View>
38.   )
39. }

复制代码

1. .index {
2.   display: flex;
3.   flex-direction: column;
4.   align-items: center;
5.   padding: 40px 20px;
6. }
8. .logo-container {
9.   display: flex;
10.   flex-direction: column;
11.   align-items: center;
12.   margin-bottom: 60px;
14.   .medical-logo {
15.     width: 120px;
16.     height: 120px;
17.     margin-bottom: 20px;
18.   }
20.   .title {
21.     font-size: 24px;
22.     color: #333;
23.   }
24. }
26. .button-container {
27.   width: 100%;
28.   display: flex;
29.   flex-direction: column;
30.   gap: 20px;
31.   padding: 0 40px; // 添加内边距使按钮更窄
32. }
34. .find-button {
35.   width: 100%;
36.   height: 80px; // 增加按钮高度
37.   display: flex;
38.   align-items: center;
39.   justify-content: center;
40.   border-radius: 8px;
41.   font-size: 18px;
42.   color: #fff;
43.   
44.   &.clinic {
45.     background-color: #2D7DD2;
46.   }
47.   
48.   &.pharmacy {
49.     background-color: #45B649;
50.   }
51. }

复制代码

八、小程序sdk设置。

九、实现按钮的跳转。

 先实现诊所功能。
1.布局图

1. src/
2.   ├── assets/
3.   ├── pages/
4.   │   ├── index/
5.   │   └── clinic-map/
6.   │       ├── index.tsx
7.   │       ├── index.scss
8.   │       └── index.config.ts
9.   └── utils/
10.       └── qqmap-wx-jssdk.js

复制代码

2.主页面调解代码如：

1. import { View, Text, Image } from '@tarojs/components'
2. import { useLoad, navigateTo } from '@tarojs/taro'
3. import './index.scss'
5. export default function Index() {
6.   useLoad(() => {
7.     console.log('Page loaded.')
8.   })
10.   const handleFindClinic = () => {
11.     navigateTo({
12.       url: '/pages/clinic-map/index'
13.     })
14.   }
16.   return (
17.     <View className='index'>
18.       <View className='logo-container'>
19.         <Image
20.           className='medical-logo'
21.           src='../../assets/medical-logo.png'
22.           mode='aspectFit'
23.         />
24.         <Text className='title'>医疗服务</Text>
25.       </View>
26.       <View className='button-container'>
27.         <View className='find-button clinic' onClick={handleFindClinic}>
28.           找诊所
29.         </View>
30.         <View className='find-button pharmacy'>
31.           找药店
32.         </View>
33.       </View>
34.     </View>
35.   )
36. }

复制代码

3.诊所舆图

1. import { View, Map } from '@tarojs/components'
2. import Taro, { useLoad } from '@tarojs/taro'
3. import { useState } from 'react'
4. import './index.scss'
6. const QQMapWX = require('../../utils/qqmap-wx-jssdk.js')
7. let qqmapsdk
9. export default function ClinicMap() {
10.   const [latitude, setLatitude] = useState(0)
11.   const [longitude, setLongitude] = useState(0)
12.   const [clinics, setClinics] = useState([])
14.   useLoad(() => {
15.     // 初始化地图SDK
16.     qqmapsdk = new QQMapWX({
17.       key: 'YOUR_KEY_HERE' // 替换成你的腾讯地图key
18.     })
20.     // 获取当前位置权限
21.     Taro.getLocation({
22.       type: 'gcj02',
23.       success: function(res) {
24.         setLatitude(res.latitude)
25.         setLongitude(res.longitude)
26.         searchNearbyClinic(res.latitude, res.longitude)
27.       },
28.       fail: function() {
29.         Taro.showToast({
30.           title: '需要授权位置信息',
31.           icon: 'none'
32.         })
33.       }
34.     })
35.   })
37.   const searchNearbyClinic = (lat, lng) => {
38.     qqmapsdk.search({
39.       keyword: '诊所',
40.       location: `${lat},${lng}`,
41.       success: function(res) {
42.         console.log(res)
43.         setClinics(res.data)
44.       },
45.       fail: function(res) {
46.         console.error(res)
47.         Taro.showToast({
48.           title: '搜索诊所失败',
49.           icon: 'none'
50.         })
51.       }
52.     })
53.   }
55.   return (
56.     <View className='clinic-map'>
57.       <Map
58.         className='map'
59.         latitude={latitude}
60.         longitude={longitude}
61.         markers={clinics.map((clinic, index) => ({
62.           id: index,
63.           latitude: clinic.location.lat,
64.           longitude: clinic.location.lng,
65.           title: clinic.title
66.         }))}
67.         show-location
68.       />
69.       <View className='clinic-list'>
70.         {clinics.map((clinic, index) => (
71.           <View key={index} className='clinic-item'>
72.             <View className='clinic-name'>{clinic.title}</View>
73.             <View className='clinic-address'>{clinic.address}</View>
74.             <View className='clinic-distance'>{clinic._distance}米</View>
75.           </View>
76.         ))}
77.       </View>
78.     </View>
79.   )
80. }

复制代码

4.舆图样式

1. .clinic-map {
2.   height: 100vh;
3.   display: flex;
4.   flex-direction: column;
6.   .map {
7.     width: 100%;
8.     height: 50vh;
9.   }
11.   .clinic-list {
12.     flex: 1;
13.     overflow-y: auto;
14.     padding: 10px;
15.     background: #f5f5f5;
17.     .clinic-item {
18.       background: #fff;
19.       margin-bottom: 10px;
20.       padding: 15px;
21.       border-radius: 8px;
23.       .clinic-name {
24.         font-size: 16px;
25.         font-weight: bold;
26.         color: #333;
27.         margin-bottom: 5px;
28.       }
30.       .clinic-address {
31.         font-size: 14px;
32.         color: #666;
33.         margin-bottom: 5px;
34.       }
36.       .clinic-distance {
37.         font-size: 12px;
38.         color: #999;
39.       }
40.     }
41.   }
42. }

复制代码

5.创建页面设置

1. export default {
2.   navigationBarTitleText: '找诊所',
3.   navigationBarBackgroundColor: '#ffffff',
4.   navigationBarTextStyle: 'black'
5. }

复制代码

6.修改：app.config.ts

1. export default defineAppConfig({
2.   pages: [
3.     'pages/index/index',
4.     'pages/clinic-map/index'
5.   ],
6.   window: {
7.     backgroundTextStyle: 'light',
8.     navigationBarBackgroundColor: '#fff',
9.     navigationBarTitleText: 'WeChat',
10.     navigationBarTextStyle: 'black'
11.   },
12.   permission: {
13.     'scope.userLocation': {
14.       desc: '你的位置信息将用于小程序位置接口的效果展示'
15.     }
16.   }
17. })

复制代码

7.修改project.config.json

1. {
2.   // ...existing code...
3.   "permission": {
4.     "scope.userLocation": {
5.       "desc": "你的位置信息将用于小程序位置接口的效果展示"
6.     }
7.   }
8.   // ...existing code...
9. }

复制代码

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

• 勾选"使用加强编译"
  
• 勾选"不校验正当域名"（开发阶段）
  
• 确保在"API 权限设置"中已经开启了位置相关接口权限
  

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

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


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告