taro使用小记 —— 持续更新

这篇具有很好参考价值的文章主要介绍了taro使用小记 —— 持续更新。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、在 taro 中使用 axios

taro 3.6 版本已经支持了网络请求库。 需安装插件 @tarojs/plugin-http
使用和注意事项说明:
https://www.npmjs.com/package/@tarojs/plugin-http
和平常使用 axios 的方式一致
taro使用小记 —— 持续更新

2、在 taro 中添加全局组件自动引入和方法自动引入

使用 unplugin-vue-componentsunplugin-auto-import
taro使用小记 —— 持续更新

// webpack 配置
const commonChain = (chain) => {
  // 自动导入
  // https://github.com/antfu/unplugin-auto-import
  chain.plugin('unplugin-auto-import').use(
    AutoImport({
      imports: [
        'vue',
        // https://vuejs.org/guide/extras/reactivity-transform.html#refs-vs-reactive-variables
        'vue/macros',
      ],
      // 自动生成 ts 声明文件的位置
      dts: 'types/auto-imports.d.ts',
      // 自动导入方法所在的文件目录- 这里添加 utils 和 store
      dirs: ['src/utils', 'src/store'],
      vueTemplate: true,
    }),
  )
  chain.plugin('unplugin-vue-components').use(Components({
    resolvers: [NutUIResolver({ taro: true })]
  }))

}
3、在 taro 中使用 pinia

注:使用 pinia@2.0.22 及以上版本时, 已经不需要 taro-plugin-pinia 这个插件了。官方原文说明如下:https://taro-docs.jd.com/docs/pinia

安装 npm install pinia
在 入口文件 app.ts 中修改如下:

import Taro from '@tarojs/taro'
import { createApp } from 'vue'
import { createPinia } from 'pinia'

import './app.scss'

const App = createApp({
  // 程序启动或者由后台切换到前台时触发
  onShow() {
  },
  // 入口组件不需要实现 render 方法,即使实现了也会被 taro 所覆盖
})

App.use(createPinia())

export default App

4、webpack 提示打包产物过大警告提示

⚠️ Warnings:

AssetsOverSizeLimitWarning: asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
vendors.js (247 KiB)
at Generator.next ()

webpack 默认打包产物不能超过244 kb.
解决:修改webpack 打包产物大小的配置 taro 项目 config > index.js 中配置如下
taro使用小记 —— 持续更新
官方说明: https://github.com/NervJS/taro/discussions/13503

5、使用 vue3 时,事件中使用 @ 代替微信原生事件名中的 bind。例如:

此处 input 的 @confirm 等价于微信原生 input 的 bindconfirm 事件
taro使用小记 —— 持续更新文章来源地址https://www.toymoban.com/news/detail-486694.html

到了这里,关于taro使用小记 —— 持续更新的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 嵌入式工程师常见面试题(持续更新版本)

    前言: 鄙人于学堂求学十余载,终是要踏足江湖求一寸安身处!以前都忙着学习新东西以及做项目,现如今也需要面对找工作的压力。此篇博客是作者准备的嵌入式工程师常见的面试题目汇总, 其答案包含网络搜索和作者自己感悟总结的 ,可能存在问题, 如有大的纰漏希望

    2024年02月08日
    浏览(46)
  • Android & iOS - Android Studio/Xcode历史版本下载(持续更新)

    最近升级开发工具老是遇到各种兼容性问题导致需要降回老版本,Xcode历史版本下载方便倒还好,Android Studio就麻烦了,一开始找到的官方历史版本下载还不全。这里整理一些历史版本信息方便下载,后续会持续更新。 历史版本数据来源Android Studio官方(语言必须选English,不

    2024年02月16日
    浏览(56)
  • Wordpress升级版本后插件和主题常见出错及处理方法整理【持续更新】

    一般常用的排查方法: 暂时禁用所有插件; 将主题更改为默认主题;  修改wp-config.php文件; 更新固定链接设置,确保设置正确; 检查.htaccess文件是否存在且是否可写; 检查主题的页面模板文件是否存在;7、检查wp-config.php文件的数据库凭据是否正确; 使用phpMyAdmin等工具检

    2024年02月14日
    浏览(40)
  • iOS问题记录 - Xcode 14安装低版本iOS模拟器(持续更新)

    最近客服跟我反馈说,有一个用户打开老项目的iOS App闪退,我回顾了下这项目上次发布改了啥,发现就改了一些文本和链接,这就很奇怪。到后台查了下这个用户的设备信息和应用版本,用的是手机型号是iPhone X,系统版本是iOS 11.2,以及最新版的应用。 很长时间都忙着Flu

    2024年02月15日
    浏览(54)
  • iOS问题记录 - Xcode 15安装低版本iOS模拟器(持续更新)

    最近新需求很多,项目改动很大,开发完成后想测一遍在低版本iOS系统上的兼容性,没想到低版本的iOS模拟器设备突然无法创建了。 在去年年底我研究过这个问题,写下了这篇文章iOS问题记录 - Xcode 14安装低版本iOS模拟器(持续更新),虽然当时没有完全解决,但暂时也够用

    2024年02月13日
    浏览(57)
  • taro之小程序持续集成

    Taro 小程序端构建后支持 CI(持续集成)的插件  @tarojs/plugin-mini-ci 。 目前已支持(企业)微信、京东、字节、支付宝、钉钉、百度小程序 功能包括: 构建完毕后自动唤起小程序开发者工具并打开项目 上传代码作为开发版并生成预览二维码 上传代码作为体验版并生成体验二

    2024年02月12日
    浏览(48)
  • Dockerfile小记(持续)

    Alpine 系统 useradd命令参考 在大多数情况下,Alpine Linux并不提供rc-service命令。rc-service是OpenRC init系统的命令,而Alpine Linux通常使用OpenRC作为其init系统。 如果你的Alpine Linux系统没有rc-service命令,而你需要使用OpenRC命令,你可以尝试安装openrc软件包,这样就可以获取rc-service命令

    2024年02月12日
    浏览(33)
  • Pandas.DataFrame.loc[ ] 筛选数据-标签法 详解 含代码 含测试数据集 随Pandas版本持续更新

    关于Pandas版本: 本文基于 pandas2.2.0 编写。 关于本文内容更新: 随着pandas的stable版本更迭,本文持续更新,不断完善补充。 传送门: Pandas API参考目录 传送门: Pandas 版本更新及新特性 传送门: Pandas 由浅入深系列教程 Pandas.DataFrame.loc[] 方法用于通过 索引、列名 筛选 DataF

    2024年01月19日
    浏览(39)
  • Pandas.DataFrame.groupby() 数据分组(数据透视、分类汇总) 详解 含代码 含测试数据集 随Pandas版本持续更新

    关于Pandas版本: 本文基于 pandas2.2.0 编写。 关于本文内容更新: 随着pandas的stable版本更迭,本文持续更新,不断完善补充。 传送门: Pandas API参考目录 传送门: Pandas 版本更新及新特性 传送门: Pandas 由浅入深系列教程 DataFrame.groupby() 方法用于使用映射器或指定的列,对 D

    2024年01月16日
    浏览(51)
  • BurpSuite使用手册(持续更新)

    目录 一.简介 二.下载burp 三.burp 入门 1设置代理 2.Proxy(代理) 3.Target 4.Spider Burp Suite 是用于攻击web 应用程序的集成平台,包含了许多工具。Burp Suite代理工具是以拦截代理的方式,拦截所有通过代理的网络流量,如客户端的请求数据、服务器端的返回信息等。Burp Suite主要拦截

    2024年02月04日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包