❶ Taro填坑记
由于之前在Vue项目中写过一套CSS,于是便照搬丢到了Taro的项目当中,编译之后在浏览器中发现px居然被自动转换成了rem,在微信小程序中运行之后亦是如此,于是将项目查了个底朝天,确定是Taro搞的鬼,后来又怀疑是postcss造成的原因,但苦于小弟前端的菜鸟级别水平,不能确定也找不到修改的地方,最后还是在某度看到了一位老兄的回答帮好搏助我解决了这个问题。
按照理解都是 src='图片地址' 即可,后来发现图片一直显示不出来,那么只能怀疑地址不正确或者src的使用不正确了。最后发现本地图片帆兆的加载必须使用 src={require('图片地址')} 的形式才能显示出来。
准确地说也不算是坑,但是还是有必须提一下,因为很容易漏写
我以为的写法:
正确的写法:
其友轿祥实是受app.jsx的影响
大家细品吧
❷ taro 打包命令详细使用教程
taro-cli
安装好 NPM 或 Yarn 后,就可以全局安装 Taro 开发工具 @tarojs/cli 了。
如果你是使用 NPM 安装,使用如下命令:
$ npm install -g @tarojs/cli
taro -V 打印版本号
taro init myapp 创建模板项目
微信小程序编译预览及打包:
# npm script
$ npm run dev:weapp
$ npm run build:weapp
# 仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp
# npx 用户也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp
网络小程序编译预览及打包:
# npm script
$ npm run dev:swan
$ npm run build:swan
# 仅限全局安装
$ taro build --type swan --watch
$ taro build --type swan
# npx 用户也可以使用
$ npx taro build --type swan --watch
$ npx taro build --type swan
支付宝小程序编译预览及打包:
# npm script
$ npm run dev:alipay
$ npm run build:alipay
# 仅限全局安装
$ taro build --type alipay --watch
$ taro build --type alipay
# npx 用户也可以使用
$ npx taro build --type alipay --watch
$ npx taro build --type alipay
H5 编译预览及打包:
# npm script
$ npm run dev:h5
# 仅限全局安装
$ taro build --type h5 --watch
# npx 用户也可以使用
$ npx taro build --type h5 --watch
React Native
React Native 端运行需执行如下命令,React Native 端相关的运行说明请参见 React Native 教程。
# npm script
$ npm run dev:rn
# 仅限全局安装
$ taro build --type rn --watch
# npx 用户也可以使用
$ npx taro build --type rn --watch
更新 Taro
Taro 提供了更新命令来更新 CLI 工具自身和项目中 Taro 相关的依赖。
更新 taro-cli 工具:
# taro
$ taro update self
# npm
npm i -g @tarojs/cli@latest
# yarn
yarn global add @tarojs/cli@latest
更新项目中 Taro 相关的依赖,这个需要在你的项目下执行。
$ taro update project
❸ (1)taro每日n坑---taro init myapp 在选择默认模板的时候报错
taro init myapp
网络搜不到类似的问题,
在官方issue上搜氏败到明搭一样的问题, but没有解决方案
总结原因是默认模板下缺少.npmrc文件,导致模板的时候报错了,
出现此问题时本人的taro版本为1.3.9
npm install -g @tarojs/cli
想更换版本,又报错如下激核拿
cnpm install -g @tarojs/cli
此时taro的版本变成了3.0.7
再执行 taro init appname 即可
❹ taro-ui 与 taro 的版本问题
使用 taro-hooks的模板生成了一个项目,然后手动安装山激了 taro-ui.
相应依赖:
执行裤链
控制台报错:
网上查询了下,说是 taro 的版本逗纯袜与 taro-ui 版本不兼容。
解决方案
taro 升级后的版本为 ^3.0.0-alpha.10 再编译则正常通过。
❺ 关于小程序的坑之Taro框架
公司产品试水小程序,做了几个独立功能模块的demo试下可行性,主键察闭要是这个框架和react语法基本相同,避免大家学习成本过高,以下记录几个容易粗心的点和坑,maybe很弱智。
由于日常用的axios请求参数的头是headers,复制粘贴大法引发了一个弱智bug,该bug会引发 content-type 设置失效,变成默认的 application/json 。
微信模板语言中,监听自定义组件事件的稿裂方法与监听基础组件事件的方法完全一致:
因此Taro中监听自定义组没迅件事件的方法要写成
渲染成微信小程序模板语言时变成
以自定义导航为例:()
使用方法:
例:res.model在iPhone X模拟器输出"iPhone X",在真机输出 "iPhone X (GSM+CDMA)<iPhone10,3>" ,所以此处用indexOf而不能用 "==="
Taro.request()支持get和post请求,通过异步的方式进行回调。主要有3个回调方法
所以,对statusCode !== 200 的情况,都应在success回调方法中处理,可以写个拦截器,在微信原生方法wx.request()中存在相同情况。
npm提示某某包undefined,一个一个重新安超浪费时间,目前我的解决办法是退出编译后删掉渲染成微信小程序模板语言的dist文件夹和node_moles文件夹,然后重新运行 npm i 和 npm run dev:weapp
还遇到挺多问题。。想不起来了。。待更新吧。。。
下水了,后续问题记录口以看这里 https://www.jianshu.com/p/5a6fd7fdaf4f
❻ Taro3.4开发微信小程序示例
安装脚手架
初始化如下图,选择Vue3、Less、vue3-NutUI模板:
安装后可能会出现一些告警提示,并提示npm audit ,如下敏芹图
如果忽略它,在run dev时会报错,并且报错提示还比较难懂。
这个报错的原因是taro的版本不一致所引起,需要运行 npm audit fix 进行修复,修复后再运行就正常了。枝梁
3.1 引入组件
3.2 页面使用组件
NUTUI几个有意思的组件,如table, card,fixednav
4.1 init初始化
app.js中初始化,输入云开发ID
4.2 编写云函数(另说明)
4.3调用云函数
用于多端展示,taro应该是有其之桥搭毕长处的。如果仅是用于微信小程序开发,不如用微信开发者工具。
❼ Taro 编译成h5遇到的一些问题
2.Failed to construct 'Image': Please use the 'new' operator, this DOM object constructor cannot be called as a function
像上面这种错误都是罩拿颤使用物败了元素,但没有import到文件导致。敏尺
❽ 记taro编译微信小程序失败的坑
该文档写于2021.6.25
在cmd命令行里面查看 taro --version 没有任何输出
使用Git Bash Here查看, No such file or directory
这就表示taro没装上...
在cmd里面查看
在Git Bash Here里面
各种错误,各种依赖问题,报错最多的是:
这一堆也不知道是啥,网络很多说法是什么版本不统一,使劲升版本,降版本,都不行
终于看看了官方文档,再回过头去看自己的项目运行明白了
(1)项目依赖的taro版本与运行项目时候不一致
官方文档说:
(2)taro多版本共存
那就使用taro命令!!!