Taro

jd_763895bfa159c

如何区分是小程序码进入还是普通跳转链接进入。如题，因为本身项目用的是 hooks，所以拿参数只能使用useRouter()和Taro.getLaunchOptionsSync()。现在问题来了如何判断是如何区分是小程序码进入还是普通跳转链接进入。难道每次获取这个两个参数进行对比吗。现在问题来了，假如是小程序码进入的话，然后返回其他页面，再次跳转到该页面，这时候里面的代码数据就会冲突。如下面

//useRouter
{"params{"id":"11"},
"path":"/pages/demo/demo",
"onReady":"pages/demo/demo.onReady",
"onShow":"pages/demo/demo.onShow",
"onHide":"pages/demo/demo.onHide"
}
// 小程序码
{"path":"pages/demo/demo",
"query":{"id":"ppp"},
"scene":1001,
"referrerInfo":{}
}

参数id 冲突了，请问这个如何解决。

jd_763895bfa159c

// github demo 拉下来报错
function Header() {
    const store = useLocalStore(() => ({
        counter: 0,
        increment() {
            store.counter++
        },
        decrement() {
            store.counter--
        },
        incrementAsync() {
            setTimeout(() => store.counter++, 1000)
        }
    }))

    const { counter, increment, decrement, incrementAsync } = store;
    return (
        <View>
            <Button onClick={increment}>+</Button>
            <Button onClick={decrement}>-</Button>
            <Button onClick={incrementAsync}>Add Async</Button>
            <Text>{counter}</Text>
        </View>
    )
}

export default observer(Header)

报错信息

VM240:1 [MobX] You haven't configured observer batching which might result in unexpected behavior in some cases. See more at https://github.com/mobxjs/mobx-react-lite/#observer-batching
console.warn @ VM240:1
useObserver @ vendors.js:941
wrappedComponent @ vendors.js:1043
c.render @ vendors.js:8645
(anonymous) @ vendors.js:8694
errorCatcher @ vendors.js:8582
renderComponent @ vendors.js:8693
mountComponent @ vendors.js:8666
init @ vendors.js:9089
createElement @ vendors.js:8313
mountVNode @ vendors.js:8628
mountComponent @ vendors.js:8672
init @ vendors.js:9089
createElement @ vendors.js:8313
mountVNode @ vendors.js:8628
mountComponent @ vendors.js:8672
init @ vendors.js:9089
createElement @ vendors.js:8313
mountChild @ vendors.js:8372
mountVNode$1 @ vendors.js:8362
createElement @ vendors.js:8318
mountVNode @ vendors.js:8628
mountComponent @ vendors.js:8672
init @ vendors.js:9089
createElement @ vendors.js:8313
(anonymous) @ vendors.js:8331
createElement @ vendors.js:8330
patch @ vendors.js:7839
updateComponent @ vendors.js:8800
reRenderComponent @ vendors.js:8745
update @ vendors.js:9096
patch @ vendors.js:7826
updateComponent @ vendors.js:8800
reRenderComponent @ vendors.js:8745
update @ vendors.js:9096
patch @ vendors.js:7826
updateComponent @ vendors.js:8800
reRenderComponent @ vendors.js:8745
update @ vendors.js:9096
patch @ vendors.js:7826
updateComponent @ vendors.js:8800
forceUpdate @ vendors.js:8956
mount @ runtime.esm.js:3159
mount @ runtime.esm.js:3189
onLoad @ runtime.esm.js:2852
(anonymous) @ VM246 WAService.js:2
p.__callPageLifeTime__ @ VM246 WAService.js:2
jt @ VM246 WAService.js:2
(anonymous) @ VM246 WAService.js:2
Mt @ VM246 WAService.js:2
(anonymous) @ VM246 WAService.js:2
(anonymous) @ VM246 WAService.js:2
i.emit @ VM246 WAService.js:2
emit @ VM246 WAService.js:2
(anonymous) @ VM246 WAService.js:2
i.emit @ VM246 WAService.js:2
emit @ VM246 WAService.js:2
(anonymous) @ VM246 WAService.js:2
(anonymous) @ VM246 WAService.js:2
n @ VM244 asdebug.js:1
(anonymous) @ VM244 asdebug.js:1
(anonymous) @ VM244 asdebug.js:1
_ws.onmessage @ VM244 asdebug.js:1
Show 33 more frames
VM240:1 TypeError: react__WEBPACK_IMPORTED_MODULE_1__.d.useDebugValue is not a function
    at useObserver (vendors.js:978)
    at Component.wrappedComponent (vendors.js:1043)
    at Component.c.render (vendors.js:8645)
    at vendors.js:8694
    at errorCatcher (vendors.js:8582)
    at renderComponent (vendors.js:8693)
    at mountComponent (vendors.js:8666)
    at ComponentWrapper.init (vendors.js:9089)
    at createElement (vendors.js:8313)
    at mountVNode (vendors.js:8628)

jd_763895bfa159c

我需要在 taro 配置 dev，test，regress，pro 四个环境请问该怎么配置呢。

jd_763895bfa159c

@全栈工程师低于10k的图片打包成base64了

jd_763895bfa159c

taro2.2.9 函数组件怎么获取路由参数，

         <Navigator url='/pages/demo/index?id=111'>跳转到 demo 页面</Navigator>

// 获取参数页面
useEffect(() => {
        console.log('props', props);
        return () => {
        };
    }, [props]);

jd_763895bfa159c

已解决

jd_763895bfa159c

Taro.showToast({
            title: "title",
            image: '../assets/images/error.png',
            mask: true,
            duration: 1000
        })

使用image组件的src 是成功的。

import alertImg from "../../assets/images/alert.png"

<Image className='pic' src={alertImg}></Image>

jd_763895bfa159c

已解决

jd_763895bfa159c

https://github.com/NervJS/taro/issues/6787

//app.tsx
import Taro, { Config } from '@tarojs/taro'
import { Provider } from '@tarojs/mobx'
import Index from './pages/index'
import counterStore from './store/counter'

const store = {
  counterStore
}

function App() {
  return (
    <Provider store={store}>
      <Index />
    </Provider>
  )
}

App.config = {
  pages: [
    'pages/demo/index',
    'pages/index/index'
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#ff0',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  },
  "networkTimeout": {
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  },
  "debug": false

}
Taro.render(<App />, document.getElementById('app'))

// demo.tsx
import Taro, { useState, useEffect } from '@tarojs/taro'
import { View, Button, Text, Block } from '@tarojs/components'
import ProTypes from 'prop-types';
import { observer, inject } from '@tarojs/mobx'
import { formatTime } from "../../utils/tool"
import { userCenter } from '../../api/demo'

const Demo = (props: any) => {
    const [count, setCount] = useState(0)
    useEffect(() => {
        console.log('props', props);
        console.log(formatTime(new Date().valueOf()));
        userCenter({
            pageNumber: 0,
            pageSize: 10
        }).then((res: any) => {
            console.log(res);
        })

        // const subscription = props.source.subscribe();
        return () => {
            // 清除订阅
            // subscription.unsubscribe();
        };
    }, [props]);
    const getUserInfos = (e: any) => {
        console.log((e));
    }
    return (
        <Block>
            <View>kk</View>
            <Button size='mini' openType='getUserInfo' onGetUserInfo={getUserInfos}>获取用户信息</Button>
            <Text>Count {count}</Text>
            <Button onClick={setCount.bind(this, 0)}>Reset</Button>
            <Button onClick={setCount.bind(this, (prevCount: number) => prevCount + 1)}>+</Button>
            <Button onClick={() => setCount(prevCount => prevCount + 1)}>+</Button>
            <Button onClick={() => setCount(prevCount => prevCount - 1)}>-</Button>
        </Block >
    )
}
export default inject('counterStore')(observer(Demo))

Demo.config = {
    navigationBarTitleText: '测试页面'
}
Demo.proTypes = {
    count: ProTypes.number.isRequired,
    url: ProTypes.string
};
Demo.defaultProps = {
    count: 3
}

系统信息
Taro v2.2.9

Taro CLI 2.2.9 environment info:
System:
OS: macOS 10.15
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.16.3 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
npmPackages:
@tarojs/components: 2.2.9 => 2.2.9
@tarojs/components-qa: 2.2.9 => 2.2.9
@tarojs/mini-runner: 2.2.9 => 2.2.9
@tarojs/mobx: 2.2.9 => 2.2.9
@tarojs/mobx-h5: 2.2.9 => 2.2.9
@tarojs/plugin-sass: 2.2.9 => 2.2.9
@tarojs/plugin-terser: 2.2.9 => 2.2.9
@tarojs/router: 2.2.9 => 2.2.9
@tarojs/taro: 2.2.9 => 2.2.9
@tarojs/taro-alipay: 2.2.9 => 2.2.9
@tarojs/taro-h5: 2.2.9 => 2.2.9
@tarojs/taro-qq: 2.2.9 => 2.2.9
@tarojs/taro-quickapp: 2.2.9 => 2.2.9
@tarojs/taro-swan: 2.2.9 => 2.2.9
@tarojs/taro-tt: 2.2.9 => 2.2.9
@tarojs/taro-weapp: 2.2.9 => 2.2.9
@tarojs/webpack-runner: 2.2.9 => 2.2.9
eslint-config-taro: 2.2.9 => 2.2.9
eslint-plugin-taro: 2.2.9 => 2.2.9
nerv-devtools: ^1.5.5 => 1.5.7
nervjs: ^1.5.5 => 1.5.7
stylelint-config-taro-rn: 2.2.9 => 2.2.9
stylelint-taro-rn: 2.2.9 => 2.2.9

jd_763895bfa159c

不要引入 react的hooks ，要引入taro的hooks
如：import Taro, { Config, useState, useEffect } from '@tarojs/taro'

jd_763895bfa159c

@jd_763895bfa159c

jd_763895bfa159c 发布的帖子