taro+taroUI开发小程序

最新推荐文章于 2024-08-15 17:58:06 发布

ddmq12420

最新推荐文章于 2024-08-15 17:58:06 发布

阅读量2.5k

点赞数 1

文章标签： ui 前端 javascript ViewUI

原文链接：http://www.cnblogs.com/ccadd1120/p/11547836.html

版权

　　最近刚开发完一款小程序，心血来潮想试试京东这个号称一套代码能兼容多平台的小程序开发框架Taro踩坑踩得我好心累啊，好了废话不多说直接进入正题。

　　下面我就给大家分享一下我在这才开发中遇到的坑，希望能给各位同仁带来些许的帮助。

https://nervjs.github.io/taro/docs/README.html（先贴出网址）这是taro的官方文档，安装和创建项目都很简单官网也介绍的很清楚，关于node的安装和npm的使用网上资料也很多大家不知道的稍微问一下度娘就知道了。下面我列出几个容易出现而且不容易排查的坑，慎入。。。

有绑定事件传参需求时，请全部使用 bind 来处理。定义的监听函数，事件对象 e 要排在所传递参数的后面
不能在包含 JSX 元素的 map 循环中使用 if 表达式
退出编译（ctrl+C）后重新运行（npm run dev:weapp）经常会发生丢包的问题，目前我的解决办法是退出编译后删掉渲染成微信小程序模板语言的dist文件夹和node_modules文件夹，然后重新运行npm i和npm run dev:weapp
暂不支持在 render() 之外的方法定义 JSX
不允许在 JSX 参数(props)中传入 JSX 元素
不能在 JSX 参数中使用对象展开符
taro的所有数据请求都是异步的所以在用map循环之前要判断数据是否初始化完成，这里推荐三元运算（条件？true是执行：false时执行）

taroUI（https://taro-ui.aotu.io/#/）前端ui库

能用框架的组件完成的功能就最好用框架提供的组件，在事件处理的时候会非常方便。特别是在取值传值的时候比我们自己封装的组件会好用很多。
缺点就是文档还很不完善，很多时候满足不了开发的需求，组件优化的空间还很大

微信下程序官方文档（https://developers.weixin.qq.com/miniprogram/dev/framework/）：这才是真正的葵花宝典，真正的武学高深功法走在这里。

在产看taro文档时很多组件讲的不是很清楚，这里就推荐在微信小程序官方文档产看这里你不光能找到详细的参数说明还有代码案例，剪纸不要太好看得我打心底里往外乐。再次提醒开发时一定要结合者微信官方分档切记！！！
小程序有的api在taro里面也都能找到，他会将小程序的api进行二次的封装用法和参数是一样是，就是taro的api的文档说明没有微信的文档说的清楚，毕竟还是一个新的框架进步空间还很大。

这里列举几个开发中常用的api我自己感觉比较好用
路由

wx.switchTab(Object object) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面；用于登陆成功后跳转到首页，不会出现顶部导航栏的回退按钮。
wx.navigateTo 用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转，以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用。
wx.redirectTo 当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的 5 层页面栈。这时，我们应该考虑选择 wx.redirectTo。wx.redirectTo()用于关闭当前页面，跳转到应用内的某个页面。这样的跳转，可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间。
wx.reLaunch()先关闭了内存中所有保留的页面，再跳转到目标页面；用于退出登录返回登录页面，不会出现顶部导航栏的回退按钮。
wx.navigateBack 用于关闭当前页面，并返回上一页面或多级页面。开发者可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。这个 API 需要填写的参数只有 delta，表示要返回的页面数。若 delta 的取值大于现有可返回页面数时，则返回到用户进入小程序的第一个页面。当不填写 delta 的值时，就默认其为 1（注意，默认并非取 0），即返回上一页面。