草庐IT

Taro React组件开发(2) —— RuiEditor 富文本编辑器【兼容H5和微信小程序】

1.富文本编辑器需求分析需要实现图片上传显示,上传使用Taro的chooseImage和uploadFile,完成图片的上传!!!文字的居左、居中、居右展示,使用格式化方法format!!!文字的加粗、倾斜、下划线,使用格式化方法format!!!2.富文本编辑获取提示文本placeholder;微信小程序环境使用自带Editor富文本标签;H5环境使用contentEditable,开启该元素的编辑模式;微信小程序环境需要监听onReady,渲染完成会返回一个EditorContext实例,最后对富文本中文字等操作都需要通过EditorContext实现;微信小程序环境需要监听o

taro跳转页面传参的几种方式

我之前在网上也搜了挺多taro传参的方式,这里我总结一下路由跳转分Taro.navigateTo与Taro.redirectTo,但是这两种方法只适用于传递少量参数Taro.navigateTo跳转时是将新的页面加载过来,最多加载到10层,返回时去的是上一页;Taro.redirectTo跳转的同时将当前页面销毁,返回时去的是上上页传递Taro.navigateTo({url:'/pages/index/login/selectUser?id=1&test='+test})Taro.navigateTo({url:'/pages/index/login/selectUser?id='+传递的数

taro自定义顶部导航条/底部Tabbar

介绍这几天一直在学习Taro框架技术,官方说是支持编译到多端,可是提供的都是H5、小程序案例,至于RN案例网上都很少,经过一番深究,有了下文基于taro+react实现的自定义顶部导航栏、底部tabbar功能,支持编译到多端(h5+小程序+react-native)如下图:在H5/小程序/RN均测试通过项目中用到的图标都是阿里iconfont字体图标,下载好后将fonts文件夹拷贝到项目目录下。import'./styles/fonts/iconfont.scss'在h5、小程序下这种写法即可: 不过为了兼容RN,只能通过Unicode方式这样写:如果是通过变量传递:letba

Taro+ vue3 + template nut-ui 4.0 + pinia 的前端框架模板搭建

1.展示目前我们有一个需要做H5微信小程序的需求。当然我们可选的框架有很多,比如说:uni-appTaro京东框架去做这些前端需求2.介绍Taro ①.项目的具体结构 Taro框架中的目录结构  大体上都是一样的page页面store ②项目的store状态管理状态管理使用的是piniavue3的新状态管理③。编译成微信小程序直接选中这个项目就可以④。我把这个基本的项目目录以及文件都搭建好了3.总结Taro介绍简介​Taro 是一个开放式跨端跨框架解决方案,支持使用React/Vue/Nerv等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序/H5/R

taro 兼容支付宝小程序和微信小程序<四> -- 腾讯地图和高德地图api

背景:taro3+vue3项目中用到的功能描述:坐标转位置描述(逆地址解析)关键词输入提示路线规划距离计算方案微信小程序–>腾讯地图-----腾讯位置服务支付宝小程序–>高德地图-----高德web服务API一、经纬度获取leterrorInfo={errMsg:''}Taro.getLocation({type,isHighAccuracy:true,success:res=>{//dosth.},fail:error=>{//这里支付宝和微信的error是不一样的if(isAlipay){const{message}=errorerrorInfo.errMsg=message}if(isW

使用 Taro 开发鸿蒙原生应用 VOL1:当 Taro 遇到纯血鸿蒙

纯血鸿蒙即将到来在23年 8月的「2023年华为开发者大会(HDC.Together)」上,华为正式官宣「鸿蒙Next」,这个更新的版本将移除所有的AOSP代码,彻底与Android切割,使其成为一个完全自主研发的操作系统,这将去掉40%左右多余的代码,使系统变得更加简洁、流畅。同时,会上也预告了将在明年1月份发布面向所有开发者的预览版,意味着还有一个多月纯血的鸿蒙就要与所有开发者见面了,这不禁令人热血沸腾,分外期待。图一·鸿蒙Next计划而近期关于鸿蒙的消息不断,各大互联网厂商,如阿里、美团、去哪儿、小红书等等,都已经官宣开展了开发ArkUI版原生鸿蒙应用的消息,同时也都在各个招聘渠道公开高

Taro+React+TS+Redux+Taro UI项目

Taro+React+TS+Redux+TaroUI项目初始化搭建Taro项目全局安装@tarojs/cli,或者直接使用npx这里是全局安装方法,终端输入命令:#使用npm安装CLI$npminstall-g@tarojs/cli#OR使用yarn安装CLI$yarnglobaladd@tarojs/cli#OR安装了cnpm,使用cnpm安装CLI$cnpminstall-g@tarojs/cli查看Taro全部版本信息终端可以使用npminfo查看Taro版本信息,在这里你可以看到当前最新版本npminfo@tarojs/cli如下图:初始化项目使用命令创建模板项目:$taroinitm

Taro&react---小程序分享朋友,朋友圈功能

以函数值组件里面使用为例 importTaro,{ useShareAppMessage, useShareTimeline, }from'@tarojs/taro'//首先定义权限 useEffect(()=>{ //方法一:Taro组件调用,需要引用Taro Taro.showShareMenu({ withShareTicket:true, showShareItems:['shareAppMessage','shareTimeline'], success(res){ console.log(res) }, fail(e){ console.log(e) }, }) //方法二:小程

使用 Taro 开发鸿蒙原生应用 —— 快速上手,鸿蒙应用开发指南

随着鸿蒙系统的不断完善,许多应用厂商都希望将自己的应用移植到鸿蒙平台上。最近,Taro发布了v4.0.0-beta.x版本,支持使用Taro快速开发鸿蒙原生应用,也可将现有的小程序转换为鸿蒙原生应用。在《使用Taro开发鸿蒙原生应用》系列文章中,我们已经介绍了鸿蒙的基本概念和Taro适配鸿蒙的原理。本文作为该系列的第三篇,将正式为开发者提供一份完整的鸿蒙应用开发指南,帮助大家使用Taro开发自己的第一个鸿蒙应用。一、环境配置首先要准备鸿蒙运行所需的环境,根据参考文档提示的步骤在HUAWEIDevEcoStudio的IDE中完成MyApplication项目的创建,熟悉鸿蒙开发者工具的预览查看等

使用 Taro 开发鸿蒙原生应用 —— 快速上手,鸿蒙应用开发指南

随着鸿蒙系统的不断完善,许多应用厂商都希望将自己的应用移植到鸿蒙平台上。最近,Taro发布了v4.0.0-beta.x版本,支持使用Taro快速开发鸿蒙原生应用,也可将现有的小程序转换为鸿蒙原生应用。在《使用Taro开发鸿蒙原生应用》系列文章中,我们已经介绍了鸿蒙的基本概念和Taro适配鸿蒙的原理。本文作为该系列的第三篇,将正式为开发者提供一份完整的鸿蒙应用开发指南,帮助大家使用Taro开发自己的第一个鸿蒙应用。 一、环境配置首先要准备鸿蒙运行所需的环境,根据参考文档提示的步骤在HUAWEIDevEcoStudio的IDE中完成MyApplication项目的创建,熟悉鸿蒙开发者工具的预览查看