taro项目初始化及总结

一、项目初始化

npm install -g @tarojs/cli

npm info @tarojs/cli

 

taro init myApp

 

 

 cd myApp

yarn install

yarn dev:weapp   //h5

由于taro-ui 使用的less 所以css预处理器最好选择less

 

二、项目配置

1.配置alias

在config/index.js中增加

import path from 'path';

alias: {
    '@/components': path.resolve(__dirname, '..', 'src/components'),
    '@/utils': path.resolve(__dirname, '..', 'src/utils'),
    '@/service': path.resolve(__dirname, '..', 'src/service'),
    '@/assets': path.resolve(__dirname, '..', 'src/assets'),
    '@/config': path.resolve(__dirname, '..', 'src/config'),
  },

但是在ts文件中会报红

需要在 tsconfig.json文件中的 compilerOptions 中加入

"baseUrl": ".",
 "paths": {
      "@/components/*": ["./src/components/*"],
      "@/utils/*": ["./src/utils/*"],
      "@/service/*": ["./src/service/*"],
      "@/assets/*": ["./src/assets/*"],
      "@/config/*": ["./src/config/*"]
}，

　　

2. 在项目中使用taro-ui / taro-skeleton

yarn add taro-ui@3.0.0-alpha.10

yarn add taro-skeleton

由于引用 node_modules 的模块，默认不会编译，所以需要额外给 H5 配置 esnextModules，在 taro 项目的 config/index.js 中新增如下配置项

h5:{
    esnextModules:['taro-ui', 'taro-skeleton']
}

在app.tsx 中引入

import 'taro-ui/dist/style/index.scss'

import 'taro-skeleton/dist/index.css'

当designWidth 配置为 375 ，taro-ui样式会被放大

解决办法：

(1)yarn add postcss-px-scale --save-dev

(2)在config/index.js中添加配置

designWidth: 375,
deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    375: 2 / 1,
    828: 1.81 / 2,
},
mini:{
    postcss:{
         "postcss-px-scale": {
        "enable": true,
        "config": {
          "scale": 0.5, // 缩放为 1/2
          "units": "rpx",
          "includes": ["taro-ui"]
        }
      }
 }
},
h5:{
 postcss:{
   "postcss-px-scale": {
        "enable": true,
        "config": {
          "scale": 0.5, // 缩放为 1/2
          "units": "rem",
          "includes": ["taro-ui"]
        }
      }
 }
}

3.在项目中使用taro-skeleton

import Skeleton from 'taro-skeleton';
const Index = (props: any) => {
    return (
        <Skeleton
            designWidth={375}
            {...props}

        ></Skeleton>
    )
}
export default Index;

4.在项目中使用dva

(1) yarn add dva-core dva-loading --save

(2)yarn add redux react-redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger --save

(3)在utils新建dva.ts 文件

import { create } from "dva-core";
import { createLogger } from "redux-logger";
import createLoading from "dva-loading";
let app: any;
let store: any;
let dispatch: any;
let registered: any;
function createApp(opt) {
   // redux日志
   opt.onAction = []
   if (opt.enableLog) {
       opt.onAction.push(createLogger())
   }
   app = create(opt)
   app.use(createLoading())
   // 注入model
   if (!registered) {
       opt.models.forEach(model => app.model(model));
   }
   registered = true;
   app.start()
   // 设置store
   store = app._store;
   app.getStore = () => store;
   app.use({
       onError(err: any) {
           console.log(err);
       }
   })
   // 设置dispatch
   dispatch = store.dispatch;
   app.dispatch = dispatch;
   return app;
}

export default {
   createApp,
   getDispatch() {
       return app.dispatch
   }
};

(4)新建models文件夹 新建index.ts. user.ts

//index.ts
import user from './user';
export default [
  user
]

//user.ts
import Taro from '@tarojs/taro';
import { fetchLogin, fetchUserInfo, fetchUpdateUserInfo } from '@/service/user';
export default {
    namespace: 'user',
    state: {
        token: Taro.getStorageSync('token') || '',
        openId: Taro.getStorageSync('openId') || '',
        userInfo: {}
    },
    effects: {
        *fetchLogin({ payload, callback }, { put, call }) {
            const _code = Taro.getStorageSync('code');
            let data = yield call(fetchLogin, payload);
            yield put({
                type: 'updateState',
                payload: {
                    token: data.token,
                    openId: data.openid
                }
            })
            Taro.setStorageSync('token', data.token);
            Taro.setStorageSync('openId', data.openid);
            callback && callback()
        },
        *fetchLoginOut({ payload, callback }, { put, call }) {
            yield put({
                type: 'updateState',
                payload: {
                    token: '',
                    openId: ''
                }
            })
            Taro.removeStorageSync('token')
            Taro.removeStorageSync('openId')
            callback && callback()


        },
        *fetchUpdateUserInfo({ payload, callback }, { put, call }) {
            let data = yield call(fetchUpdateUserInfo, payload);
            yield put({
                type: 'fetchUserInfo',
                payload: {}
            })
            callback && callback()
        }

    },
    reducers: {
        updateState(state, { payload }) {
            return { ...state, ...payload }
        },
        updateUserInfo(state, { payload }) {
            return {
                ...state,
                userInfo: {
                    ...state.userInfo,
                    ...payload
                }
            }
        }
    }
}

（5）修改app.js

import React, { Component } from 'react'
import Taro from '@tarojs/taro';
import { Provider } from 'react-redux'
import dva from '@/utils/dva';
import models from './models';
import 'taro-ui/dist/style/index.scss'
import './app.less'
import 'taro-skeleton/dist/index.css' 
const dvaApp = dva.createApp({
  initialState: {},
  models: models,
})
const store = dvaApp.getStore();

class App extends Component {

  componentDidMount () {
    
  }

  componentDidShow () {}

  componentDidHide () {}

  componentDidCatchError () {}

  // this.props.children 是将要会渲染的页面
  render() {
    return <Provider store={store}>
      {this.props.children}
    </Provider>
  }
}

export default App

　　

三、项目中使用的方法

1.获取不同平台的窗口高度

export const getPageHeight = (showTabBar = true) => {
    const NAVIGATOR_HEIGHT = 44
    const TAB_BAR_HEIGHT = 50
    const info: any = Taro.getSystemInfoSync()
    const { windowHeight, statusBarHeight, titleBarHeight } = info
    const tabBarHeight = showTabBar ? TAB_BAR_HEIGHT : 0
    if (process.env.TARO_ENV === 'rn') {
        return windowHeight - statusBarHeight - NAVIGATOR_HEIGHT - tabBarHeight
    }

    if (process.env.TARO_ENV === 'h5') {
        return windowHeight - tabBarHeight
    }

    if (process.env.TARO_ENV === 'alipay') {
        // NOTE 支付宝比较迷，windowHeight 似乎是去掉了 tabBar 高度，但无 tab 页跟 tab 页返回高度是一样的
        return windowHeight - statusBarHeight - titleBarHeight + (showTabBar ? 0 : TAB_BAR_HEIGHT)
    }

    return windowHeight
}

2.复制文本

const handleCopy = (e)=>{
    Taro.setClipboardData({
      data: logisticNo,
      success: function () {
        Taro.getClipboardData({
          success: function (res) {
            console.log(res.data) // data
          }
        })
      }
    })
  }

3.设置自定义navigationStyle

在页面index.config,js中

export default definePageConfig({
  navigationStyle:'custom'
})

4.设置小程序中chekbox自定义样式

checkbox .wx-checkbox-input {
  width: 18PX;
  height: 18PX;
  border-radius: 50%;
  border-color: #eee;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #F8C200;
  border-color: #F8C200;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 12PX;
  height: 12PX;
  line-height: 12PX;
  text-align: center;
  font-size: 12PX;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

5.iphonex兼容样式

  /* iphonex 兼容方案
  https://aotu.io/notes/2017/11/27/iphonex/index.html */
  
  html,
  body,
  #root {
    height: 100%;
    overflow: hidden;
  }
  
  /* iphonex 安全区域 */
  body {
    margin: 0;
    overflow-x: hidden;
    background-color: #fff !important;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  /* iphonex fix底部元素适配 */
  :global(.fixed_bottom) {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    position: fixed;
    z-index: 10;
    background-color: #fff;
  }