一个完整的项目示例: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,可能有点低,再说吧。
六,打开微信开发者工具。
直接导入项目即可,找到目录。其他自动生成。
注意清缓存,编译。
七、正式开始吧,来个首页
/** @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'><ImageclassName='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'><ImageclassName='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 qqmapsdkexport default function ClinicMap() {const [latitude, setLatitude] = useState(0)const [longitude, setLongitude] = useState(0)const [clinics, setClinics] = useState([])useLoad(() => {// 初始化地图SDKqqmapsdk = 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'><MapclassName='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...
}
其他建议:
建议在开发者工具的详情设置中,确保以下设置:
- 勾选"使用增强编译"
- 勾选"不校验合法域名"(开发阶段)
- 确保在"API 权限设置"中已经开启了位置相关接口权限
测试成功,但过了一会,说用量多了。vscode,重新编译。
基本可以了,下一步就可以上传代码等待审核了。以上是一个简单的教程,你可以根据实际修改。
相关文章:
一个完整的项目示例:taro开发微信小程序
前一周完成了一个项目,体测成绩转换的工具,没做记录,。这次计划开发一个地图应用小程序,记录一下。方便给使用的人。 一、申请微信小程序,填写相应的信息,取得开发者ID。这个要给腾讯地图使用的。 二、申…...
二次封装 el-dialog 组件:打造更灵活的对话框解决方案
文章目录 引言为什么需要二次封装?封装思路代码实现1. 基础封装组件 (Dialog.vue)2. Vue中引入使用示例 封装后的优势进阶优化建议 总结 引言 在 Vue 项目中,Element UI 的 el-dialog 是一个非常实用的对话框组件。但在实际开发中,我们经常会…...
3.2 一点一世界
第一步:引入背景与动机 “一点一世界”这个概念来源于泰勒公式的思想,即通过一个点及其导数信息来近似描述整个函数的行为。这种方法在数学分析中非常有用,因为它允许我们将复杂的函数简化为多项式形式,从而更容易进行计算和理解…...
力扣第156场双周赛
1. 找到频率最高的元音和辅音 给你一个由小写英文字母(a 到 z)组成的字符串 s。你的任务是找出出现频率 最高 的元音(a、e、i、o、u 中的一个)和出现频率最高的辅音(除元音以外的所有字母),并返…...
学习日志05 java
1 java里面的类型转换怎么做?int转double为例 在 Java 里,把int转换为double有自动类型转换和强制类型转换两种方式。下面为你详细介绍: 自动类型转换(隐式转换) 由于double的取值范围比int大,Java 能够…...
4.7/Q1,GBD数据库最新文章解读
文章题目:Burden of non-COVID-19 lower respiratory infections in China (1990-2021): a global burden of disease study analysis DOI:10.1186/s12931-025-03197-7 中文标题:中国非 COVID-19 下呼吸道感染负担(1990-2021 年&a…...
do while
先进再查 import java.util.Scanner;public class Hello {public static void main(String[] args) {Scanner in new Scanner(System.in);int number in.nextInt();int count 0;do{number number / 10;count count 1;} while( number > 0 );System.out.println(count…...
MySQL 主从复制与读写分离
一、MySQL 主从复制 (0)概述 MySQL 主从复制是一种数据同步机制,允许数据从一个主数据库(Master)复制到一个或多个从数据库(Slave)。其主要用途包括: 数据冗余与灾备:通…...
CSS3 基础知识、原理及与CSS的区别
CSS3 基础知识、原理及与CSS的区别 CSS3 基础知识 CSS3 是 Cascading Style Sheets 的第3个版本,是CSS技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案。 CSS3 主要模块 选择器:更强大的元素选择方式盒…...
第十七章:Llama Factory 深度剖析:易用性背后的微调框架设计
章节引导:在模型定制的实践中,Llama Factory (github.com/hiyouga/LLaMA-Factory) 以其惊人的易用性和对多种开源大模型、多种参数高效微调方法(PEFT)的广泛支持,迅速成为开源社区的热门选择。你可能已经熟练掌握了如何…...
SpringSecurity当中的CSRF防范详解
CSRF防范 什么是CSER 以下是基于 CSRF 攻击过程的 顺序图 及详细解释,结合多个技术文档中的攻击流程: CSRF 攻击顺序图 #mermaid-svg-FqfMBQr8DsGRoY2C {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#m…...
CSRF防范歪招
不保存到Cookie里呗 如果每次请求都强制通过请求头携带Token,并且不将Token存储在Cookie中,这种设计可以有效防御CSRF攻击。以下是具体原因和关键实现要点: 1. 防御原理 CSRF攻击的本质是攻击者伪造用户的请求,利用浏览器自动携…...
MyBatis与MyBatis-Plus深度分析
MyBatis与MyBatis-Plus深度分析 一、MyBatis原理与基础 1. MyBatis核心原理 MyBatis是一个半自动ORM框架,主要原理包括: SQL与代码分离:通过XML或注解配置SQL语句动态SQL:提供if、choose、foreach等标签实现动态SQL结果集映射…...
STM32 变量加载到flash的过程中
在STM32中,BIN文件内需要加载到RAM的数据由链接脚本(Linker Script)和启动代码(Startup Code)共同决定,具体机制如下: 一、BIN文件内容结构 STM32的BIN文件包含三类数据: Co…...
TCP核心机制
1. TCP五大核心机制 1.1. 顺序问题(稳重不乱) 背景:网络传输中数据包可能因路径不同或网络波动导致乱序到达,需保证接收方能按正确顺序处理数据。 原理: 序列号(Sequence Number)࿱…...
6.3对象序列化
在 Java 中,ObjectInputStream 和 ObjectOutputStream 是用于实现对象序列化(Serialization)和反序列化(Deserialization)的核心类。通过这两个类,可以将对象转换为字节流进行存储或传输,并在需…...
Flutter小白入门指南
Flutter小白入门指南 🚀 轻松构建漂亮的跨平台应用 📑 目录 一、Flutter是什么? 为什么选择Flutter?Flutter工作原理 二、环境搭建与命令行 安装Flutter SDK常用Flutter命令创建第一个项目 三、Flutter基础语法 变量与类型函数条…...
Python -将MP4文件转为GIF图片
给大家提供一个工具代码,使用Python,将MP4格式的视频文件,转换为GIF图片 首先先安装必要的包: pip install imageio pip install imageio[ffmpeg] 工具代码: import imageio# 视频文件路径 video_path r""…...
51c嵌入式~电路~合集27
我自己的原文哦~ 一、7805应用电路 简介 如上图,7805 集成稳压电路。 7805是串联式三端稳压器,三个端口分别是电压输入端(IN),地线(GND),稳压输出(OUT)…...
数据结构—(链表,栈,队列,树)
本文章写的比较乱,属于是缝合怪,很多细节没处理,显得粗糙,日后完善,今天赶时间了。 1. 红黑树的修复篇章 2. 红黑树的代码理解(部分写道注释之中了) 3. 队列与栈的代码 4. 重要是理解物理逻辑&a…...
GitHub 趋势日报 (2025年05月12日)
本日报由 TrendForge 系统生成 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日整体趋势 Top 10 排名项目名称项目描述今日获星总星数语言1harry0703/MoneyPrinterTurbo利用ai大模型,一键生成高清短视频使用…...
ebook2audiobook开源程序使用动态 AI 模型和语音克隆将电子书转换为带有章节和元数据的有声读物。支持 1,107+ 种语言
一、软件介绍 文末提供程序和源码下载 ebook2audiobook开源程序使用动态 AI 模型和语音克隆将电子书转换为带有章节和元数据的有声读物。支持 1,107 种语言。从电子书到带有章节和元数据的有声读物的 CPU/GPU 转换器,使用 XTTSv2、Bark、Vits、Fairseq、YourTTS …...
《算法导论(第4版)》阅读笔记:p39-p48
《算法导论(第4版)》学习第 13 天,p39-p48 总结,总计 10 页。 一、技术总结 1. recurrence/recurrence equation 书里面 recurrence(递归式) 和 recurrence equation(递归方程) 指的是同一个东西。 二、英语总结(生词:2) 1. squint (1)…...
c语言第一个小游戏:贪吃蛇小游戏07
贪吃蛇吃饭喽 所谓贪吃蛇的食物,也就是创建一个和蛇身一样的结构体,只是这个结构体不是链表,也是将这个结构体设置hang和lie坐标,放进gamepic进行扫描,扫到了就也是做操作将 ## 打出来 #include <curses.h> #i…...
(七)深度学习---神经网络原理与实现
分类问题回归问题聚类问题各种复杂问题决策树√线性回归√K-means√神经网络√逻辑回归√岭回归密度聚类深度学习√集成学习√Lasso回归谱聚类条件随机场贝叶斯层次聚类隐马尔可夫模型支持向量机高斯混合聚类LDA主题模型 一.神经网络原理概述 二.神经网络的训练方法 三.基于Ker…...
VSCode中Node.js 使用教程
一、visual studio code下载与安装 二、修改vscode主题颜色 三、汉化 菜单view-->Command Palette...,输入Configure Display Language。 重启之后如下: 四、安装node.js Node.js 是一个基于Chrome V8引擎的JavaScript运行环境,使用了事件驱动、非阻…...
web 自动化之 KDT 关键字驱动详解
一、什么是关键字驱动? 1、什么是关键字驱动?(以关键字函数驱动测试) 关键字驱动又叫动作字驱动,把项目业务封装成关键字函数,再基于关键字函数实现自动化测试 2、关键字驱动测试原理 关键字驱动测试是一…...
web 自动化之 yaml 数据/日志/截图
文章目录 一、yaml 数据获取二、日志获取三、截图 一、yaml 数据获取 需要安装 PyYAML 库 import yaml import os from TestPOM.common import dir_config as Dirdef read_yaml(key,file_name"test_datas.yaml"):file_path os.path.join(Dir.testcases_dir, file_…...
基于javaweb的SpringBoot酒店管理系统设计与实现(源码+文档+部署讲解)
技术范围:SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容:免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…...
数学复习笔记 6
前言 复习一下行列式的一些基本的题。感觉网课有点没跟上了。今天花点时间跟上网课的进度。要紧跟进度,然后剩下的时间再去复习前面的内容。多复习,提升自己的解题能力。 行列式和矩阵 三年级,我现在是三年级下册。。。马上就要结束大学的…...
JS Map使用方法
JS Map使用方法 Map 是 ES6 引入的一种新的数据结构,它类似于对象(Object),但提供了更强大的键值对存储功能。 文章目录 JS Map使用方法基本特性基本用法创建 Map常用方法遍历方法 与 Object 的区别实际应用示例示例1:…...
大模型分布式光伏功率预测实现详解
一、引言 随着全球能源结构向可再生能源转型,光伏发电作为清洁能源的重要组成部分,其装机容量持续快速增长。然而,光伏发电具有显著的间歇性和波动性特点,给电力系统的稳定运行带来了巨大挑战。准确的光伏功率预测对于电网调度、电力市场交易和电站运营管理至关重要。近年…...
武汉大学无人机视角下的多目标指代理解新基准!RefDrone:无人机场景指代表达理解数据集
作者:Zhichao Sun, Yepeng Liu, Huachao Zhu, Yuliang Gu, Yuda Zou, Zelong Liu, Gui-Song Xia, Bo Du, Yongchao Xu 单位:武汉大学计算机学院 论文标题:RefDrone: A Challenging Benchmark for Drone Scene Referring Expression Compreh…...
【LLM模型】如何构建自己的MCP Server?
什么是 MCP? Model Context Protocol (MCP) 是一种协议,它允许大型语言模型(LLMs)访问自定义的工具和服务。Trae 中的智能体作为 MCP 客户端可以选择向 MCP Server 发起请求,以使用它们提供的工具。你可以自行添加 MC…...
SQL 索引优化指南:原理、知识点与实践案例
SQL 索引优化指南:原理、知识点与实践案例 索引的基本原理 索引是数据库中用于加速数据检索的数据结构,类似于书籍的目录。它通过创建额外的数据结构来存储部分数据,使得查询可以快速定位到所需数据而不必扫描整个表。 索引的工作原理 B-…...
java基础-方法的重写、super关键字
1.定义:子类可以根据需要改写从父类那继承来的方法,执行时,子类的方法会覆盖父类的方法 2.要求: (1)子类和父类的方法必须同名,同参数列表 (2)父类中private修饰的方法…...
技术并不能产生一个好的产品
技术是产生一个好的产品充分条件,不是必要条件。 当笔者到了40岁的年龄时间,发现再怎么努力提升技术,也没办法挽救烂的产品设计。 一个好的产品,首先要找准自己的定位,不能动不动就把自己拿一线品牌来比较。 好的产品…...
lubuntu 系统详解
Lubuntu 系统详解:轻量高效的 Ubuntu 衍生版 一、系统概述 定位与背景: Lubuntu 是 Ubuntu 的官方衍生版本(Flavor),专注于轻量性与高效性,旨在为低配置设备(如老旧电脑、上网本、低配笔记本 …...
《设备管理与维修》审核严吗?“修改后再投”是拒稿了吗?
有过论文投稿经验的朋友,可能在审核后收到过“修改后再投”的回复。有些期刊可能是真的建议投稿人在修改后再投稿,有些则可能是标准的拒稿模板。 《设备管理与维修》审核严吗?收到“修改后再投”的回复该怎么办?下面我就来分享下之…...
2025年5月-信息系统项目管理师高级-软考高项一般计算题
决策树和期望货币值 加权算法 自制和外购分析 沟通渠道 三点估算PERT 当其他条件一样时,npv越大越好...
界面组件DevExpress WPF中文教程:Grid - 如何自定义Band Header外观?
DevExpress WPF拥有120个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…...
Supabase 的入门详细介绍
Supabase 是什么? 简单来说,Supabase 是一个开源的 Firebase 替代品。它提供了一整套后端即服务 (BaaS - Backend as a Service) 的工具,让你能够快速构建应用程序的后端,而无需自己从头搭建和管理服务器、数据库等基础设施。 S…...
【实战】基于 ABP vNext 构建高可用 S7 协议采集平台(西门子 PLC 通信全流程)
🚀🔧【实战】基于 ABP vNext 构建高可用 S7 协议采集平台(西门子 PLC 通信全流程)📊 📑 目录 🚀🔧【实战】基于 ABP vNext 构建高可用 S7 协议采集平台(西门子 PLC 通信全…...
20、map和set、unordered_map、un_ordered_set的复现
一、map 1、了解 map的使用和常考面试题等等,看这篇文章 map的key是有序的 ,值不可重复 。插入使用 insert的效率更高,而在"更新map的键值对时,使用 [ ]运算符效率更高 。" 注意 map 的lower和upper那2个函数&#x…...
leetcode 189. 轮转数组
题目描述 代码: class Solution { public:void rotate(vector<int>& nums, int k) {int len nums.size();k k % len;reverse(nums,0,len-1);reverse(nums,0,k-1);reverse(nums,k,len-1);}void reverse(vector<int>& nums,int left,int right…...
得物0509面试手撕题目解答
题目 使用两个栈(一个无序栈和一个空栈)将无序栈中的元素转移到空栈,使其有序,不允许使用其他数据结构。 示例:输入:[3, 1, 6, 4, 2, 5],输出:[6, 5, 4, 3, 2, 1] 思路与代码 如…...
8天Python从入门到精通【itheima】-6~10
目录 7节-开发出第一个Python程序: 1.在cmd窗口写下第一个最简单的程序:Hello World!!! 9节: 1.如何卸载python: 2.报错:不是可运行的程序 编辑 3.报错:无法初始化设备PRN: 4.报错&…...
Qt —— 使用Enigma Virtual Box将Qt程序打包为独立可运行exe(附:完整打包方法且完美运行)
🔔 Qt 相关技术、疑难杂症文章合集(掌握后可自封大侠 ⓿_⓿)(记得收藏,持续更新中…) 打包结果 1、如下图,准备好Qt已打包后程序文件夹。附 Qt —— 在Windows下打包Qt应用程序(在其他Windows电脑下使用)...
大语言模型RLHF训练框架全景解析:OpenRLHF、verl、LLaMA-Factory与SWIFT深度对比
引言 随着大语言模型(LLM)参数规模突破千亿级,基于人类反馈的强化学习(RLHF)成为提升模型对齐能力的关键技术。OpenRLHF、verl、LLaMA-Factory和SWIFT作为开源社区的四大标杆框架,分别通过分布式架构、混合…...
VTK|类似CloudCompare的比例尺实现1-源码分析
文章目录 CloudCompare源码分析void ccGLWindowInterface::drawScale(const ccColor::Rgbub& color)🧩 总体功能🧠 函数逐步解析✅ 1. 断言只在正交模式下使用✅ 2. 计算显示的实际长度✅ 3. 字体和图形区域准备✅ 4. 计算比例尺图形的绘制位置✅ 5.…...