Summary of common development problems of WeChat mini programs

1. Forced line breaks in coverview

.wrap{
  word-break: break-all;
  word-wrap:break-word;
  white-space:pre-line;
}

2. IOS prevents page elastic rubber band effect

// taro 为例
import Taro, { Component, Config } from '@tarojs/taro';

export default class HomePage extends Component {
    config: Config = {
        navigationBarTitleText: '首页',       
        disableScroll: true, // 这一句
    };
}

3. Communication method transfer between components, taro requires method name on Starting with

container.js

import Child from 'child';

render(){
    return <View>
        <Child onToggle={this.handleToggle.bind(this)}/>
    </View>
}

child.js

handleClick(){
    this.props.onToggle();
}

render(){
    return <View onClick={this.handleClick.bind(this)}>点击测试</View>
}

4. WeChat Mini Program Map

• When the user manually zooms the map When , the scale change will not be automatically triggered. If you want to zoom the map to the initial size, the scale value will not change and the page update will not be triggered. At this time, you can slightly change the scale value and add a very small number, such as 0.000001

state = {
    scale : 10
}

resetScale(){
    this.setState({
        scale:this.state.scale===10?10.00001:10
    })
}

render(){
    return (
        <Map scale={this.state.scale}/>
    )
}

• The problem of inaccurate map positioning, try to use gcj02 coordinates

Taro.getLocation({
    type:'gcj02' // 这里
})
.then(res=>{
    let { longitude, latitude } = res;
})

Recommended tutorial: "微信小program》

The above is the detailed content of Summary of common development problems of WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!