taro 重新加载小程序_Taro 小程序采坑

Taro 简介

Taro 是一套遵循 React 语法规范的 多端开发的解决方案。

Taro 开发微信小程序

首次使用必须安装 Taro 命令行工具

# 使用 npm 安装 CLI

$ npm install -g @tarojs/cli

# OR 使用 yarn 安装 CLI

$ yarn global add @tarojs/cli

复制代码

项目初始化

$ taro init myApp

复制代码

运行

# yarn

$ yarn dev:weapp

# npm script

$ npm run dev:weapp

复制代码

Taro 项目结构

├── config 配置目录

| ├── dev.js 开发时配置

| ├── index.js 默认配置

| └── prod.js 打包时配置

├── src 源码目录

| ├── components 公共组件目录

| ├── pages 页面文件目录

| | ├── index index 页面目录

| | | ├── banner 页面 index 私有组件

| | | ├── index.js index 页面逻辑

| | | └── index.css index 页面样式

| ├── utils 公共方法库

| ├── app.css 项目总通用样式

| └── app.js 项目入口文件

└── package.json

复制代码

Taro 设计稿及尺寸单位

需要在项目配置 config/index.js 中进行设置

# 目前 Taro 支持 750、 640 、 828 三种尺寸设计稿

const config = {

projectName: 'businessAC',

date: '2019-9-23',

designWidth: 750,

deviceRatio: {

'640': 2.34 / 2,

'750': 1,

'828': 1.81 / 2

},

# 行内样式可通过 Taro.pxTransform 来进行转换

Taro.pxTransform(10) // 小程序：rpx，H5：rem

# 默认配置会对所有的 px 单位进行转换，有大写字母的 Px 或 PX 则会被忽略。

{

onePxTransform: true, # 设置 1px 是否需要被转换

unitPrecision: 5, # REM 单位允许的小数位。

propList: ['*'], # 允许转换的属性。

selectorBlackList: [], # 黑名单里的选择器将会被忽略。

replace: true, # 直接替换而不是追加一条进行覆盖。

mediaQuery: false, # 允许媒体查询里的 px 单位转换

minPixelValue: 0 # 设置一个可被转换的最小 px 值

}

复制代码

Taro 路由跳转

// 保留当前页面，跳转到应用内的某个页面，调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，使用wx.navigateBack可以返回到上一级页面。

Tar