taro常用的一些功能

2024-03-23 19:52
文章标签 功能 常用 taro

本文主要是介绍taro常用的一些功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.打电话

Taro.makePhoneCall({phoneNumber:that.state.tell,success:function(){}})

2.弹窗获取位置-->获取本人地理位置

// 弹窗
Taro.showModal({content: '即将前往设置，允许小程序获取您的位置信息',showCancel:false,success: function (res) {if (res.confirm) {// 查询本机设置Taro.openSetting({success(reso) {console.log(reso)// 看看本机有没有授权if (reso.authSetting["scope.userLocation"]) {// 清缓存Taro.removeStorageSync("userLocation");}// 获取位置Taro.getLocation({type: 'wgs84',success: function (res) {console.log(res)putKey('longitude',res.longitude)putKey('latitude',res.latitude)// 成功就跳转Taro.navigateTo({url:url})},fail:function(err){console.log(err)showError('未获取位置信息，路线规划失败')}})},fail(err){console.log(err)}});} }})

 3.有位置信息，需要按照给的地址名，还有经纬度进行跳转

 

第一步需要有Map标签

 <Map id='myMap' markers={mar} longitude={this.state.longitude} latitude={this.state.latitude}  className='map' />

第二步进行跳转

open(item){const mapCtx = Taro.createMapContext('myMap');mapCtx.openMapApp({latitude: parseFloat(item.latitude),longitude: parseFloat(item.longitude),destination: item.stationName,success:function(e){console.log("openResult1",e)},fail:function(e){console.log("openResult2",e)},complete:function(e){console.log("openResult3",e)},})}

下边是一个地图展示站点，有相应的站点以及点击每个站点左边进入详情右边进行到第三方导航

import Taro, { Component, Config } from '@tarojs/taro'
import { View, Image,Map } from '@tarojs/components'
import { AtIcon, AtGrid, AtAvatar  } from 'taro-ui'
import { getKey,putKey } from '@/src/utils/storage-utils'
import { showError } from '@/src/utils/loading-utils'
import {wxLogin,listByDistance } from '@/src/api/api'
import LoginView from '@/src/components/loginView/index'
import './index.less'
let mar = []
class OtherServeSite extends Component {/*** 指定config的类型声明为: Taro.Config** 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型* 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string* 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型*/config: Config = {navigationBarTitleText: '',navigationStyle: 'default',navigationBarBackgroundColor: '#FFFFFF',navigationBarTextStyle: 'black',backgroundColorTop: "#FFFFFF"}constructor (props) {super(props)this.state = {list:[],none:require('@/src/assets/images/none.png'),markers:[],latitude:'',longitude:'',title:''}}// componentWillReceiveProps () {}// componentWillUnmount () {}componentDidMount(){}// componentDidShow () {}// componentDidHide () {}// 下拉刷新onReachBottom() {var param = {latitude:getKey('latitude'),longitude: getKey('longitude'),types:7}console.log('param',param)listByDistance(param).then(res=>{console.log(res)if(res.code == 200){this.setState({list:res.rows,markers:res.rows,})}else{showError(res.msg)}})}componentDidShow() {var param = {latitude:getKey('latitude'),longitude: getKey('longitude'),types:7}console.log('param',param)listByDistance(param).then(res=>{console.log(res)if(res.code == 200){var list  = res.rowsfor(var j=0; j<list.length;j++){mar.push({'id': list[j].id,'latitude':list[j].latitude,'longitude':  list[j].longitude,'width': 30,  //图片显示宽度'height': 30,//图片显示高度'title': list[j].stationName,'label': {      //标记的提示文字的样式'color':'#e41111','content': list[j].stationName,//提示内容}})}console.log(mar,9999999)getKey('markers',mar)this.setState({latitude:mar[0].latitude,longitude:mar[0].longitude,title:mar[0].title})let arr = []for(var i=0; i<list.length; i++){arr.push(list[i])}this.setState({list:arr})// if(res.rows.length<=3){//   this.setState({//     list//   })// }else{//   let arr = []//   for(var i=0; i<3; i++){//     arr.push(list[i])//   }//   this.setState({//     list:arr//   })// }}else{showError(res.msg)}})}open(item){const mapCtx = Taro.createMapContext('myMap');mapCtx.openMapApp({latitude: parseFloat(item.latitude),longitude: parseFloat(item.longitude),destination: item.stationName,success:function(e){console.log("openResult1",e)},fail:function(e){console.log("openResult2",e)},complete:function(e){console.log("openResult3",e)},})}detail(item){Taro.navigateTo({url:'/pages/statusMapDetail/index?id='+item.id})}render () {const { otherServeGridList,list } = this.stateconsole.log(mar,909090)return (<View className='user-container'><View className='near'><View><Image className='nearImg' src={require('@/src/assets/user/address-icon.png')} /></View><View>其他服务站点</View></View><View className='scrollBox'>{list.length>0 ? <View>{list.map((item,index) => {return (<View  key={item.id}  className='site-item' ><View  onClick={this.open.bind(this,item)} className='daohang'><View><Image className='navigation' src={require('@/src/assets/user/navigation.png')} /></View><View>导航</View></View><View  className='left'  onClick={this.detail.bind(this, item)} ><View className='flex'><View  className='name' >{item.stationName}</View>{index == 0 &&<View className='jin'>最近</View>}</View>{/* <View className='tell' >{item.contactPhone}</View> */}<View className='address' >{item.stationLocation}</View></View></View>)})}</View>:<View className='none'><View  className='img' ><Image src={none} className='pic'></Image></View><View className='noText'>暂无数据</View></View>}</View><View className='map'><Map id='myMap' markers={mar} longitude={this.state.longitude} latitude={this.state.latitude}  className='map' /></View></View>)}
}export default OtherServeSite

 4.上传功能

背景：需求是最多三张图片，但是接口每次只能上传一张

 第一步：AtImagePicker组件上去

<AtImagePicker count={3} multiple={true} files={this.state.files} onChange={this.onImg.bind(this)} />

第二步 onImg方法

  onImg (files,method,index) {if(files.length>3){Taro.showToast({title: '最多上传3张图片',icon:'none',duration: 2000})return false}for(let i=0; i<files.length; i++){if( 2097152 -files[i].file.size <0 ){Taro.showToast({title: '图片不能大于2M',icon:'none',duration: 2000})return false}}this.setState({files,})let url =''if(files.length == 1){url = files[0].url}if(files.length == 2){url = files[1].url}if(files.length == 3){url = files[2].url}if(method == 'add'){Taro.showLoading({title: '上传中',mask:true})Taro.uploadFile({url: uploadUrl+'/wxapi/upload',  //仅为示例，非真实的接口地址filePath: url,name: 'file',header: {'content-type': 'application/json','openid': getKey('openId')},success (res){Taro.hideLoading()pics.push(JSON.parse(res.data).url)},fail(err){Taro.hideLoading()}})}if(method == 'remove'){pics.splice(index, 1)}console.log('获取的files',files)return files
}

今天周六，下午写一些感觉很好，后续继续添加，希望对用taro框架的童鞋有些帮助，继续加油中

这篇关于taro常用的一些功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/839369。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
常用的jdk下载地址

常用的jdk下载地址

jdk下载地址 安装方式可以看之前的博客： mac安装jdk oracle 版本：https://www.oracle.com/java/technologies/downloads/ Eclipse Temurin版本：https://adoptium.net/zh-CN/temurin/releases/ 阿里版本： github：https://github.com/
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
30常用 Maven 命令

30常用 Maven 命令

Maven 是一个强大的项目管理和构建工具，它广泛用于 Java 项目的依赖管理、构建流程和插件集成。Maven 的命令行工具提供了大量的命令来帮助开发人员管理项目的生命周期、依赖和插件。以下是 常用 Maven 命令的使用场景及其详细解释。 1. mvn clean 使用场景：清理项目的生成目录，通常用于删除项目中自动生成的文件（如 target/ 目录）。共性规律：清理操作
阅读更多...
Spring框架5 - 容器的扩展功能 (ApplicationContext)

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF
阅读更多...
JavaFX应用更新检测功能（在线自动更新方案）

JavaFX应用更新检测功能（在线自动更新方案）

JavaFX开发的桌面应用属于C端，一般来说需要版本检测和自动更新功能，这里记录一下一种版本检测和自动更新的方法。 1. 整体方案 JavaFX.应用版本检测、自动更新主要涉及一下步骤： 读取本地应用版本拉取远程版本并比较两个版本如果需要升级，那么拉取更新历史弹出升级控制窗口用户选择升级时，拉取升级包解压，重启应用用户选择忽略时，本地版本标志为忽略版本用户选择取消时，隐藏升级控制窗口 2.
阅读更多...
019、JOptionPane类的常用静态方法详解

019、JOptionPane类的常用静态方法详解

目录 JOptionPane类的常用静态方法详解 1. showInputDialog()方法 1.1基本用法 1.2带有默认值的输入框 1.3带有选项的输入对话框 1.4自定义图标的输入对话框 2. showConfirmDialog()方法 2.1基本用法 2.2自定义按钮和图标 2.3带有自定义组件的确认对话框 3. showMessageDialog()方法 3.1
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2