taro 缺点_Taro实践和踩坑
Taro实践
从临时接到任务要做一个答题微信小程序，为什么快速上手选用Taro到现在实践了3个小程序，也算是有些经验和总结，在此记录一下
选择原因
基于React语法规范，上手几乎0成本，满足基本开发需求
支持TS，支持ES7/ES8或更新的语法规范
支持CSS预编译器，Sass/Less等
支持Hooks(日常开发几乎不需要redux场景)
支持状态管理，Redux/MobX
一套代码多端运行，开发成本低
Taro UI基于Taro开发的UI组件
支持多端wechat小程序 、alipay小程序、tt小程序、H5
组件丰富，API、文档友好
开发准备
# >=8.0.0
$ yarn global add @tarojs/cli
$ taro init myApp
$ yarn
编译配置
alias
// config/index
alias: {
"@/components": "src/components",
"@/utils": "src/utils",
"@/styles": "src/styles",
"@/apis": "src/apis",
"@/store": "src/store",
"@/images": "src/assets/images"
}
多端调试
// config/index
outputRoot: `dist/${process.env.TARO_ENV}`
Taro-UI
// config/index
h5: {
esnextModules: ['taro-ui']
}
CSS Module
// 小程序
mini: {
postcss: {
// css modules 功能开关与相关配置
cssModules: {
enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
config: {
namingPattern: 'module', // 转换模式，取值为 global/module，下文详细说明
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
}
// h5
h5: {
postcss: {
// css modules 功能开关与相关配置
cssModules: {
enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
config: {
namingPattern: 'module', // 转换模式，取值为 global/module，下文详细说明
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
}
// import styles from './style.scss'
样式
设计稿及尺寸单位
默认750px为设计稿标准，可在config/index
weapp px → \rightarrow→ rpx
h5 px → \rightarrow→ rem
覆盖主题
// custom-variables.scss
/* 改变主题变量，具体变量名可查看 taro-ui/dist/style/variables/default.scss 文件 */
$color-brand: #6190E8;
/* 引入 Taro UI 默认样式 */
@import "~taro-ui/dist/style/index.scss";
css预编译器
默认支持sass
styled-component
不支持, 有点难受
字体图标
Iconfont
阿里图标
地址
Iconfont-阿里巴巴矢量图标库
插件
GitHub - iconfont-cli/taro-iconfont-cli
配置
将icon 添加到仓库
获取Symbol链接
更新iconfont.json
{
"symbol_url": "//at.alicdn.com/t/font_1707845_k4b717hruv.js", // Symbol url
"save_dir": "./src/components/iconfont",
"use_typescript": false,
"platforms": "*",
"use_rpx": true,
"trim_icon_prefix": "icon",
"default_icon_size": 18,
"component_name": "IconFont"
}
// npx iconfont-taro
// 更新 @/component/iconfont
使用
pages
import Taro from "@tarojs/taro"
import IconFont from ""@/components/iconfont"
const Check = () => {
return (
)
}
export default Check;
.icon {
&::before {
font-family: "iconfont";
content: "\e687";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
}
}
AtIcon
Taro UI | Icon
踩坑
SPA页面间样式互相影响，采用CSS Module
获取小程序原生作用域this.$scope，使用命名函数或者class, 不能使用箭头函数
父组件向子组件传递函数，函数名以on开头
Taro.navigateBack无法传参
场景
通用平面图拾取页面，拾取成功将数据返回上个页面
解决方案：
使用getCurrentPages // this page
const pages = Taro.getCurrentPages()
const pre = pages[pages.length - 2]
pre.setData(myData)
// pre page
// useDidShow
const page = Taro.getCurrentPages().pop()
console.log(page.data)
维护一个全局变量，如存在Redux
Object.fromEntries支持不完善
转wechat微信小程序
获取坐标，转换为百度坐标系BD09，wx默认支持WGS84, 支持GCJ02
GitHub - hujiulong/gcoord: 地理坐标系转换工具，支持WGS84/GCJ02/BD09等常用坐标系互转
根据单位名称、地址、坐标实现地图导航
使用微信小程序第三方插件腾讯位置服务路线规划
注册：小程序管理后台 → \rightarrow→ 设置 → \rightarrow→ 第三方设置 → \rightarrow→ 插件管理 → \rightarrow→ 添加插件 → \rightarrow→ 腾讯位置服务路线规划
申请腾讯位置服务申请的KEY
注册：src/app.tsx config = {
permission: {
'scope.userLocation': {
desc: '你的位置信息将用于创建单位的位置采集'
}
},
plugins: {
routePlan: {
version: "1.0.5",
provider: "wx50b5593e81dd937a" // 腾讯位置服务路线规划appid
}
},
}
使用 Taro.requirePlugin('routePlan');
const key = KEY; //使用在腾讯位置服务申请的key
const referer = MINI NAME; //调用插件的app的名称
const endPoint = JSON.stringify({ //终点
name,
longitude,
latitude,
});
Taro.navigateTo({
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
});
能实现功能：步行、公交、驾车路径规划
缺点：不能进行导航
使用wx.openLocation拉起内置地图，点击地图导航按钮，拉起第三方地图软件
图片默认没有长宽锁定, 要使用widthFix
转H5
多端开发不要使用& > view {} & > image {} & > text {}
突然接到将微信小程序转h5, 然后就炸了
没想到什么好方案，用的全局替换
& > view {} → \rightarrow→ & > view, & > div {}
& > image {} → \rightarrow→ & > image, & > img {}
& > text {} → \rightarrow→ & > text, & > span {}
默认没有头部导航
转alipay支付宝小程序
获取元素高度
onst query = Taro.createSelectorQuery();
query.select('.conatiner')
.boundingClientRect(function (rect) {
setbase({ img: e.detail, container: rect }) // wechat
})
.exec(rects => setbase({ img: e.detail, container: rects[0] })); // alipay
图片上传使用Taro.uploadFile无法成功(微信小程序可行)使用my.uploadFile