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

相关文章

Python正则表达式语法及re模块中的常用函数详解

《Python正则表达式语法及re模块中的常用函数详解》这篇文章主要给大家介绍了关于Python正则表达式语法及re模块中常用函数的相关资料,正则表达式是一种强大的字符串处理工具,可以用于匹配、切分、... 目录概念、作用和步骤语法re模块中的常用函数总结 概念、作用和步骤概念: 本身也是一个字符串,其中

usb接口驱动异常问题常用解决方案

《usb接口驱动异常问题常用解决方案》当遇到USB接口驱动异常时,可以通过多种方法来解决,其中主要就包括重装USB控制器、禁用USB选择性暂停设置、更新或安装新的主板驱动等... usb接口驱动异常怎么办,USB接口驱动异常是常见问题,通常由驱动损坏、系统更新冲突、硬件故障或电源管理设置导致。以下是常用解决

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络

Redis消息队列实现异步秒杀功能

《Redis消息队列实现异步秒杀功能》在高并发场景下,为了提高秒杀业务的性能,可将部分工作交给Redis处理,并通过异步方式执行,Redis提供了多种数据结构来实现消息队列,总结三种,本文详细介绍Re... 目录1 Redis消息队列1.1 List 结构1.2 Pub/Sub 模式1.3 Stream 结

MySQL索引的优化之LIKE模糊查询功能实现

《MySQL索引的优化之LIKE模糊查询功能实现》:本文主要介绍MySQL索引的优化之LIKE模糊查询功能实现,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录一、前缀匹配优化二、后缀匹配优化三、中间匹配优化四、覆盖索引优化五、减少查询范围六、避免通配符开头七、使用外部搜索引擎八、分

Android实现悬浮按钮功能

《Android实现悬浮按钮功能》在很多场景中,我们希望在应用或系统任意界面上都能看到一个小的“悬浮按钮”(FloatingButton),用来快速启动工具、展示未读信息或快捷操作,所以本文给大家介绍... 目录一、项目概述二、相关技术知识三、实现思路四、整合代码4.1 Java 代码(MainActivi

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll

SpringBoot实现微信小程序支付功能

《SpringBoot实现微信小程序支付功能》小程序支付功能已成为众多应用的核心需求之一,本文主要介绍了SpringBoot实现微信小程序支付功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录一、引言二、准备工作(一)微信支付商户平台配置(二)Spring Boot项目搭建(三)配置文件