一个Taro框架下跨端的图片裁剪组件：taro-cropper

TaroCropper 是Taro小程序框架下使用的裁剪，基于canvasAPI进行实现，支持滑动和缩放，目前测试在微信小程序端, QQ小程序端, 支付宝小程序端, 字节跳动小程序端, 百度小程序端和H5端可以正常使用。

在Taro 物料市场，看到taro-skeleton 骨架屏组件

尝试了一下，编译一直报错

npm  install taro-skeleton

编译报错，因为怀疑是Taro版本的问题，我之前用的是1226，所以升级了一下

再次编译，还是报错，所以还在研究中。。。

解决了再更新。。。

第一次看到Taro是在github搜索React插件时看到(个人习惯,有时候会去搜索一个语言的插件在GitHub再按照Star排名，看看各个插件功能，后期开发时用到这功能有个印象)，感觉挺好的插件，以后开发小程序和快应用应该用的到，因为它直接使用react可以开发多端，相比于去看各个厂家小程序开发文档，使用Taro几乎没有学习成本。

这次使用它开发一个简单的网页 南瓜棋 ，小时候玩的一个游戏，逻辑还是比较简单的，主要是去了解下Taro优缺点，以后开发公司简单小程序、快应用等做好准备，主要是了解他的局限性。

具体看文档，我简单说下感受，我的前端水平:简单的HTML、CSS了解复杂的网页不会(动画啥的还得看文档)，React-Native水平应该还是不错，主流的React-Native框架都会搭建，开发，原生调试，编写没问题,ES6没问题。React看了2周吧，入门。这个Taro，直接写按照文档走，没出现问题。

七分设计感的纯React-Native项目Mung

一个完整小巧的Redux全家桶项目

react-native拖拽排序

多功能React-Native-Toast组件

先全局升级taro到最新版本348

1然后本地init一个项目包，myapp

2把之前1226的项目中的src文件夹，替换到myapp中

3在myapp中，安装 taroui@300-alpha3 版本

4删掉全局中，所有的 ，import '@tarojs/async-await'

5之前引入taro，component的方式，全局都要替换

import Taro, { Component } from '@tarojs/taro'  

替换为以下：

import Taro from '@tarojs/taro'

import React, { Component } from "react";

6 安装redux 

npm install redux react-redux redux-thunk redux-logger

把appts 中， Provider的引入，换成react-redux

 import { Provider } from 'react-redux'

全局pages和自定义组件中，connect的引入，换成react-redux

import { connect } from 'react-redux';

7引入自定义组件的方式，去掉{}

import { XxxxxXxxx } from '//component/xxxxxx'  替换为  

import XxxxxXxxx from '//component/xxxxxx'

8所有文件中，config的部分，都摘出去，放在同一目录下的configjs文件中

改为后的apptsx是这样的

import React, { Component } from 'react'

import { Provider } from 'react-redux'

import configStore from '/store'

import '/appscss'

const store = configStore();

class App extends Component {

  render() {

<Provider store={store} >

{thispropschildren}

</Provider>

  }

}

export default App

然后运行试试。

ps：我这边运行的时候不报错了，但是微信开发者工具，显示有问题。

参考链接：>

1状态更新一定是异步的

2同React一致，更新数据必须要调用setState方法，如果直接赋值是无法更新组件的

3例如：这样 thisstatename=“张三”      无效，改为thissetState({name="张三"})   有效

这次的项目需求是用户存在两种身份，普通用户和师傅用户，那么要根据不同的身份展示不同的tabBar菜单，看了下官方文档，难度不大，但是由于我用的框架是Taro，所以实现起来很难，试了几次Api调不通就放弃了，转为JS大法写了，但是配置方面还是得按照小程序文档来。

做成效果 ：

此文是Taro版，非原生，思路可供参考，毕竟JS是互通的。

此文件编写的组件会作为自定义的tabBar展示出来

以上就是关于一个Taro框架下跨端的图片裁剪组件：taro-cropper全部的内容，包括:一个Taro框架下跨端的图片裁剪组件：taro-cropper、Taro 骨架屏、Taro开发多端应用等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！