基于taro|基于taro ui的小程序(总结) 基于taroui的小程序(总结)

【基于taro|基于taro ui的小程序(总结)】1.路由跳转
第一种,行内跳转
onClick={()=>Taro.redirectTo({url:’/pages/mainPage/homePage/homePage’})} //不可回退
第二种,编程式跳转.在写js代码的地方 //可回退
toHome() {
Taro.navigateTo({
// 绝对路径
url: ‘/pages/mainPage/homeList/homeList’,
})
}
2.多类名选择器,并且其中有一个是变量(用到三元表达式)
className={title ${index === this.state.active ? 'active' : ''}}
**3.**map地图上,有CoverView,在map标签中写标签,会造成,真机调试CoverView样式出不来,解决方法是
将CoverView标签写到,map标签的外面即可.
4.组件封装及使用(参考Taro文档)
4.1/*CustomComp.js(这是自定义的组件) */ 引入需要引入的文件(import) import Taro, { Component, } from '@tarojs/taro' import { View, Form, Button } export default class CustomComp extends Component { static externalClasses = ['my-class'] render () { return 这段文本的颜色由组件外的 class 决定 } }

4.2/* MyPage.js */(要引入的页面) export default class MyPage extends Component { render () { return } } /* MyPage.scss */(这是根据需要自定义的样式) .red-text { color: red; } 4.3注意：externalClasses 需要使用短横线命名法 (kebab-case)，而不是 React 惯用的驼峰命名法 (camelCase)。否则无效。

5.遍历数据,用map函数,必须要加key(字符串)

const numbers = [...Array(100).keys()] // [0, 1, 2, ..., 98, 99] const listItems = numbers.map((number) => { return 我是第 {number + 1} 个数字 })

6.canvas 使用
// 控制绘制的图案颜色,默认黑色
context.setStrokeStyle("#50B7EA")
// 图案内容填充色
context.setFillStyle("#50B7EA")
// 绘制的各个小图案
// 边线的宽度
context.setLineWidth(2)
context.beginPath()
// context.arc(x,y,r,sAngle,eAngle,counterclockwise);
// 分别对应 x=圆的中心的 x 坐标
// y=圆的中心的 y 坐标
// r=圆的半径
// sAngle=起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）
// eAngle=结束角，以弧度计
// counterclockwise=可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
7.创建新页面的指令
taro create page – newLineCharging
Taro create name – newLineCharging
8.taro框架容易导致一个报错，即开发者工具打开后会出现如下报错
‘‘未找到入口 app.json 文件,或者文件读取失败,请检查后重新’’
解决方法：将project.config.json文件中
“miniprogramRoot”: “dist”,
改为"miniprogramRoot": “dist/weapp”,
注意：原生的小程序有不同，原生小程序改为：
“miniprogramRoot”: “dist/wx”,
9.taro小程序项目从1.0版本升级到2.0.4版本,问题汇总
(1),更新参照taro 官网迁移指南 https://taro-docs.jd.com/taro/docs/migrate-to-2.html#%E6%9B%B4%E6%96%B0-taro-cli-%E5%92%8C%E4%BE%9D%E8%B5%96%E7%89%88%E6%9C%AC
(2)步骤?taro update self 2.0.4
b:taro update project 2.0.4
c:npm install --save-dev @tarojs/mini-runner@2.0.4
d:编译配置调整 babel、csso、uglify 等配置从 plugins 配置中移出来
(3)错误1:Function(…) is not a function,执行npm i --save regenerator-runtime@0.11.1
错误2:runtime isundefined 执行npm install --save-dev @tarojs/mini-runner@2.0.4