Taro 总结

1. 页面切换刷新
   1.1 采用将useEffect里面的请求内容修改为在useDidshow里面请求
   1.2 可以采用在页面跳转函数的complete参数里获取要跳转的路由，执行该路由的onLoad方法
2. 小程序的模板配置内容，可以让后台生成ext.json，前端可以通过Taro.getExtConfigSync()获取配置文件
3. Taro请求封装，可以将需要写进headers的内容，在拦截器里面写

// interceptorFun .ts
import Taro from '@tarojs/taro'
interface Res {
    code: number
    data: any
    msg: string
}
const interceptorFun = function(chain) {
    const requestParams = chain.requestParams
    let errCodeGoSuccess = [50006, 40016]
    return chain.proceed(requestParams).then((res: Taro.request.SuccessCallbackResult<Res>) => {
        const { data, code, msg } = res.data
        if (Number(code) === 0) {
            return data || null
        } else if (errCodeGoSuccess.indexOf(code) > -1) {
            return data || null
        } else {
            Taro.showToast({
                title: msg,
                icon: 'none',
                duration: 2000
            })
            return Promise.reject(msg)
        }
    })
}

export default interceptorFun
// req.ts
Taro.addInterceptor(interceptorFun)
export const $req: reqFun = params => {
    let contentType = 'application/x-www-form-urlencoded'
    let token = getToken()
    contentType = params.contentType || contentType
    let head = { 'content-type': contentType, 'Store-Id': getStoreId(), 'User-Type': 2 } //'User-Type': 2
    if (token) {
        head['X-Auth-Token'] = token
    }
    const option: Taro.RequestParams = {
        isShowLoading: false,
        loadingText: '正在加载',
        timeout: 15000,
        header: head,
        ...params
    }

    return Taro.request(option)
}

4. 微信登录。
   4.1 Taro.login({sucess:function(res){console.log(res.code)}})
   4.2 登录是需要校验code是否过期，通过Taro.checkSession()，如果没过期，就执行登录逻辑，过期就需要在调用Taro.login(),重新获取code
   4.3 获取手机号需要给button的openType设置为getPhoneNumber
5. 路由传参，可以通过在路径添加参数，如果内容过多，可以采用redux，在页面内获取。
6. 路由获取参数，可以通过useRouter，也可以通过getCurrentInstance().router.params 获取
7. 图片显示，采用require或者import 的方式引入，名字为英文的，中文会出现在真机上看不了
8. taro分包，主包的页面和内容置于app.config.ts的pages属性里。副包内容置于subPackages
9. 诱导用户开启权限

export const authorize = (name, content) => {
    return new Promise(resolve => {
        Taro.getSetting({
            success(setRes) {
                if (!setRes.authSetting[name]) {
                    Taro.authorize({
                        scope: name,
                        success() {
                            //用户已经同意小程序使用该功能，后续调用 接口不会弹窗询问
                            resolve(true)
                        },
                        fail() {
                            Taro.showModal({
                                title: '提示',
                                content: content,
                                success(modalRes) {
                                    if (modalRes.confirm) {
                                        Taro.openSetting({
                                            success(openRes) {
                                                if (openRes.authSetting[name]) {
                                                    resolve(true)
                                                }
                                            },
                                            fail() {
                                                Taro.showToast({
                                                    title: '调用微信接口失败',
                                                    icon: 'none',
                                                    duration: 2000
                                                })
                                                resolve(false)
                                            }
                                        })
                                    }
                                },
                                fail() {
                                    Taro.showToast({
                                        title: '调用微信接口失败',
                                        icon: 'none',
                                        duration: 2000
                                    })
                                    resolve(false)
                                }
                            })
                        }
                    })
                } else {
                    resolve(true)
                }
            },
            fail() {
                Taro.showToast({
                    title: '调用微信接口失败',
                    icon: 'none',
                    duration: 2000
                })
                resolve(false)
            }
        })
    })
}

10. 开发地图获取经纬度需要在app.config.ts中配置

permission: {
        'scope.userLocation': {
            desc: '你的位置信息将用于小程序位置接口的效果展示' // 高速公路行驶持续后台定位
        }
    },

11. taro小程序自动上传部署
    11.1 安装miniprogram-ci
    11.2 在微信小程序管理后台配置IP白名单以及下载上传密钥
    11.3 添加upload.js

// upload.js
const ci = require('miniprogram-ci')
let { version, desc, appid } = require('./wxConfig')

if (!version) version = 'v1.0.0'
if (!desc) desc = new Date() + '上传'
;(async () => {
    const project = new ci.Project({
        appid: appid,
        type: 'miniProgram',
        projectPath: process.cwd() + '/dist',
        privateKeyPath: process.cwd() + `/private.${appid}.key`,
        ignores: ['node_modules/**/*']
    })
    const uploadResult = await ci.upload({
        project,
        version,
        desc,
        setting: {
            es6: true,
            minify: true
        },
        onProgressUpdate: console.log
    })
    console.log('结果：', uploadResult)
})()

11.4 package.json 添加脚本命令 "upload": "taro build --type weapp && node config/upload.js"
12. useState
12.1 赋初始值不想其他内容改变初始化内容，可以将复杂的内容置于回调函数里return出来，这样就不会频繁变动
12.2 setState为异步操作，如果需要用到useState后的state值，可以将炒作置于setState里面或者将state设置为该操作的useCallback参数
13. useEffect
13.1 初始化请求可以置于里面，类似mounted的生命周期，依赖为[]
13.2 对于需要destory的操作可以将操作置于useEffect的return 函数，并且依赖为[]
13.3 如果想update，缓存函数，将函数用useCallback包裹，并置于useEffect里面，可以减少执行次数
14. useMemo
14.1 页面子组件不想因为父组件的某个变化了就要重新渲染，可以通过useMemo将组件包裹，减少不必要的开销
15. redux useReducer useSelect dispatch