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

2023-11-16

最近这一年来,做了三个小程序。第一个小程序用的原生框架,所有的样式和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版 - 知乎

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐

  • ubuntu14.04安装CUDA7.0、CUDNN7.0详细步骤

    一 安装CUDA7 0 CUDA 7 0在Linux下的安装步骤参见官网手册 CUDA Getting Started Linux 其中提及了 run deb 等安装 1 检查你的电脑是否支持CUDA 检查GPU是否支持 输入如下命令 如果
  • uniapp运行到小程序报错之[ app.json 文件内容错误] app.json: app.json 未找到

    解决方法 在project config json文件下面新增如下代码 unpackage dist dev mp weixin是你自己的代码 打包下dist文件夹下的项目名称 和pages同级的文件夹 miniprogramRoot un
  • Angular学习笔记48:响应式表单-FormArray 和 FormGroup的多层嵌套

    继Angular学习笔记46 响应式表单 使用FormBuild快速构建表单 可以使用FormBuilder快速便捷的构建出需要的表单 有时候 在FormArray中 不仅仅是一个控件 有可能是多个 这个时候 这个FormArray中的元素
  • Dynamics CRM on premise 和 Skype for Business 集成显示用户状态

    Applies To Dynamics 365 online Dynamics 365 on premises Dynamics CRM 2016 Dynamics CRM Online Using Skype for Business w
  • EMC一些常见问题(面试也会稍微提及)

    什么是EMC测试 如何进行EMC测试 什么是EMC测试 如何进行EMC测试 EMC EMI设计 电子发烧友网 elecfans com 1 为什么要对产品做电磁兼容设计 答 满足产品功能要求 减少调试时间 使产品满足电磁兼容标准的要求 使产
  • STMF103学习笔记(三)——按键输入

    实验三 按键输入 注意输入模式的设置 按下时为高电平设置为下拉模式 按下时为低电平设置为上拉模式 这样输入时 上拉模式的得到高点平 下拉模式得到低电平 具体原理还不是很懂 按键IO输入初始化参考代码 void KEY Init 这里初始化k
  • 图像分割与目标检测与区别

    检测与分割的区别 https www leiphone com category yanxishe Fah5xOL3Qb96k1NL html 1 目标检测 预测包围盒 YOLO Fast RCNN 似乎还有个SSD 输入 一个矩阵 输入图
  • 6-python异常、错误、模块、包

    文章目录 1 异常 2 错误 3 模块 4 包 综合练习 1 异常 打开一个不存在的文件会引发异常 FileNotFoundError Errno 2 No such file or directory D 不存在的文件 txt f ope
  • Error querying database. Cause: org.springframework.jdbc.CannotGetJdbcConnectionException

    spring boot mybaits 出现异常 The error may exist in file F javatext basi code frame springboot query2 target classes mapper
  • 刷脸作为数据入口应用在新零售领域上

    日常生活中 我们所常见的人脸识别大多应用在安防领域 例如刷脸门禁 刷脸签到和刷脸考勤等 将人脸识别技术应用在零售消费领域 可能要从支付宝推出蜻蜓刷脸支付收银机开始 人脸识别技术在零售消费领域上作为支付凭证 除了刷脸支付 人脸识别技术应用在零
  • VUE 之 Jspreadsheet CE电子表格数据处理

    需求 将表格内容作为list集合 向后端传递 注意 需求默认展示表格为30行空表格 后端接口会拦截空值 所以需将未输入的行去掉 默认的Jspreadsheet 实现步骤 获取Jspreadsheet 数据并处理成后端所需参数格式 var t
  • 如何查看在rabbitMQ里面堆积的消息

    回顾上一节的内容 通过配置了stream来对MQ的简单的封装 主要定义接口 里面定义input以及output来绑定交换机 获取消息通道MessageChannel以及订阅通道SubscribableChannel对象 而消费端配置 str
  • Python编程基础之三对象

    一 简介 Python使用对象模型来存储数据 构造任何类型的值都是一个对象 再加上内建类型 标准类型运算符和内建函数 有助于更好的理解Python是如何工作的 二 详解 1 Python的对象 所有的 Python 对像都拥有三个特性 身份
  • Windows与网络基础22-数据封装与解封装

    数据的封装和解封装 目标 理解数据的封装与解封装过程 针对于一个简单的网络环境 能够独立讲解出网络传输过程 目录 一 数据封装过程 二 数据解封装过程 三 每一层对应的网络设备 四 简单网络数据封装解封装实例 一 数据封装过程 应用层 将原
  • 12、文件链接、磁盘阵列、文件系统、网络协议、数据封装过程

    一 文件链接 ln s 软链接 ln 硬链接 区别 1 软链接产生新的inode号 硬链接不产生新的inode号 ls i 看inode 2 源文件删除后 软链接文件不可以用 硬链接文件可用 3 软链接可以跨分区 硬链接不可以跨分区 4 不
  • 关于扫描二维码拒绝获取摄像头权限导致的错误解决方法

    这个问题烦了我2天 在网上查阅资料 也许是自己的理解错误 怎么改都不行 今天换了一种思维 解决了这个问题 废话不多说 先上代码 try mCameraManager openDriver catch IOException e e prin
  • ROS集成开发环境搭建【安装VScode】

    1 下载 注意 下载操作是在虚拟机中的Ubuntu中进行的 可以下载到 home 下载 文件夹中 vscode 下载链接 最新版本 Documentation for Visual Studio CodeFind out how to se
  • (c/c++)——STL

    文章目录 一 迭代器 iterator 二 容器 1 string 2 Vector 最常用 3 list 4 map 5 unordered map 6 queue 三 算法 1 for each 2 find if 3 sort 一 迭
  • 大数据毕业设计 人脸识别与疲劳检测系统 - python opencv 图像识别

    文章目录 0 前言 1 课题背景 2 Dlib人脸识别 2 1 简介 2 2 Dlib优点 2 3 相关代码 2 4 人脸数据库 2 5 人脸录入加识别效果 3 疲劳检测算法 3 1 眼睛检测算法 3 2 打哈欠检测算法 3 3 点头检测算
  • taro框架开发小程序经验总结

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