草庐IT

taro框架开发小程序经验总结

Latitia Gu 2023-04-03 原文

最近这一年来,做了三个小程序。第一个小程序用的原生框架,所有的样式和js都要自己写,不好看还写得头疼死。写第二个小程序的时候正觉得VUE3流行,想熟悉一下VUE3,因此找到了taro框架。这个框架好不好我也无从分辨,暂时能用就行。

一.搭建项目

1.taro 客户端安装,想用taro开发小程序这个必须要先安装

npm install -g @tarojs/cli

此处参考官方文档:安装及使用 | Taro 文档

2.创建项目

taro init myApp

我的选择如下:

3.项目会自动安装依赖包,然后用微信开发者工具导入这个新创建的项目

4.引入Taro UI Vue3

在项目根目录下输入命令:npm install taro-ui-vue3

参考:快速上手 | Taro UI Vue3 | b2nil

5.总结:以上就是搭建taro项目的全部过程了,接下来就可以参考taro ui vue3以及taro API进行开发了。通过这次摸索有及网上查阅资料,我意识到查阅官方API是非常有用的,有很多资料都是对官方API 的二次解读。

在开发过程中,我觉得对我帮助最大的是介绍里面提供的实例:介绍 | Taro UI Vue3 | b2nil

6.因为在网上vue2的资料相对更多,而 vue3加入了一些语法的新特性,因为我本身对vue2也不是很了解,在写js的时候不确定怎么写,这个示例让我确定了页面语法和代码风格,以及各种组件的引入。每当我遇到组件样式不生效时,就去这个示例项目里找,总是能找到答案,虽然这个示例项目并没能运行成功,看不到效果,但并不妨碍借鉴。

二.项目发布

遇到的坑:在继续做第二个taro小程序的时候,因为我没搞清楚taro运行机制,按照官方文档重新执行了一下npm install -g @tarojs/cli,这是安装taro客户端命令,会默认安装新新版。这下就坏事了,因为之前的项目是用的taro3.4.1,现在默认安装了最新版3.4.7,这个错误不仅使新创建的taro项目无法运行,一直报错,还导致原来运行正常的taro小程序无法正确运行。

仅管我重试了各种卸载,安装taro客户端,试图把它退回到3.4.1,也参照网上提供的各种命令,逐一尝试之后 ,依然没有使taro小程序正常运行。

这段时间正逢上海疫情,居家办公,一直是远程公司电脑办写代码。没有办法之下,我只好把项目下载到自己的笔记本,重新搭了一套开发环境。项目从git上拉下来之后能够运行成功。但是有一个新的问题,真机调试或预览或者发布体验版时,提示项目包超过2M,这在原来公司电脑上是没有遇到的,我也不知道为什么会发生这样的变化。

但是至少至此为止,项目能够正常运行了,要解决的只剩下项目包过大的问题。因此我对项目进行了分包。我觉得我的分包做得不是太严谨,不过有一点效果。主包小了一点,但是还是超过2M。下图是分包之后的项目包大小,比分包之前小了200M左右。

这时候我已经黔驴技穷了,只好把实际情况和同事说一下,一起想办法。他搭好环境,问我为什么登录那个页面那么大,我去文件夹里看了一下,不大呀,都是差不多4KB。我不明白他为什么说login.vue很大。

然后我就点了一下代码依赖分析。看到了他为什么说login.vue很大,确实login这个页面就有934KB。

由于他给我提供了这个思路,我就在网上找taro项目包过大怎么解决,找到了一条靠谱的命令。参考资料在这里:小程序包大小超过2M的解决方法 - 百度文库

我按照文档所说的步骤,最终解决了项目包过大的问题。

最后,我在项目的README.md里总结了一下拉取项目后需要执行的步骤,以及项目发布遇到包过大问题时应该执行什么命令。

三.支付

调起别人写的接口往往是比较容易的,只要规则正确,参数正确,结果就会正确。以前说起小程序支付,我就只知道前端的wx.requestPayment,当然在taro中,语法变成了Taro.requestPayment。

以前我是调用别人写的接口返回的参数来拉起微信支付,这次不一样,后台调用微信预支付交易单和生成签名的方法都要自己写。还是前面那位同事,他在之前帮我捋清了微信支付的思路,先调用统一下单在微信支付服务后台生成预支付交易单。然后自己写一个方法封装Taro.requestPayment所需要的参数。

具体的对接微信支付流程及前后端代码参考我写的另一文章:小程序支付流程总结_Latitia Gu的博客-CSDN博客_小程序支付流程

就算框架不一样,导致语法上有差别,整体逻辑和思路是一样的。

虽然思路正确,但在调通支付接口的过程依然会遇到各种各样的问题,我在网上找到一篇章很好的阐述了遇到问题怎么排查:签名错误讨论区-V2版 - 知乎

有关taro框架开发小程序经验总结的更多相关文章

  1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep,它会中断应用程序。否则,计算机将持续运行数周,直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗?欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数,使应用程序能够通知系统它正在使用中,从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  2. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时,rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  3. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后,Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用,我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  4. ruby - 使用 C 扩展开发 ruby​​gem 时,如何使用 Rspec 在本地进行测试? - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时,我会遵循TDD的过程,我会写一个失败的规范,然后处理代码直到它通过,等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb,如何运行我的规范并仍然加载我的C扩展?当我更改C代码时,我需要采取哪些步骤来重新编译代码?这可能是个愚蠢的问题,但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时,我确实得到了一个Makefile(在整个项目的根目录中),然后当

  5. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如,一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情,所以我什至不知道从哪里开始。任何帮助,将不胜感激。谢谢! 最佳答案 无论Rails是什么,几乎所有Web应用程序都有您的要求,大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去,网站不应直接访问彼此

  6. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器,然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  7. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗? - 2

    刚入门rails,开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗?有哪些用例。您如何为Rails应用程序使用应用程序Controller?我不想在那里放太多代码,因为据我了解,每个请求都会调用此Controller。这是真的? 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度,尽管在某些情况下ApplicationContr

  8. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容? - 2

    我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  9. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序,它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择,是开发还是生产,一些方法的逻辑应该改变,这取决于部署类型。是否有任何想法,如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现? 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  10. ruby - 是否可以覆盖 gemfile 进行本地开发? - 2

    我们的git存储库中目前有一个Gemfile。但是,有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它,我必须将它添加到我们的Gemfile中,但每次我checkout到我们的master/dev主分支时,由于与跟踪的gemfile冲突,我必须删除它。我想要的是类似Gemfile.local的东西,它将继承从Gemfile导入的gems,但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗? 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

随机推荐