1、在 taro 中使用 axios
taro 3.6 版本已经支持了网络请求库。 需安装插件 @tarojs/plugin-http
使用和注意事项说明:
https://www.npmjs.com/package/@tarojs/plugin-http
和平常使用 axios
的方式一致
2、在 taro 中添加全局组件自动引入和方法自动引入
使用 unplugin-vue-components
和 unplugin-auto-import
// 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 中配置如下
官方说明: https://github.com/NervJS/taro/discussions/13503文章来源:https://www.toymoban.com/news/detail-486694.html
5、使用 vue3 时,事件中使用 @
代替微信原生事件名中的 bind
。例如:
此处 input 的 @confirm
等价于微信原生 input 的 bindconfirm
事件
文章来源地址https://www.toymoban.com/news/detail-486694.html
到了这里,关于taro使用小记 —— 持续更新的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!