记录微信开发的坑（Taro小程序和公众号H5）

Taro小程序(2.x)

（注：项目用的是taro框架，没有去深究是微信的坑还是taro的坑）

1、Taro.createSelectorQuery无法获取子组件的选择器。

解决方案：

// 子组件
// 子组件获取选择器，通过父子通信的方式传递给父组件
const query = Taro.createSelectorQuery().in(this.$scope);

2、pageScrollTo无法跳转子组件的selector，应该还是无法获取子组件的选择器 。

解决方案：通过上面1的解决方案获取子元素的选择器距离顶部的高度，然后通过scrollTop跳转

3、position：fixed定位，底层页面依然可以滚动的问题

解决方案：在遮罩层添加catchtouchmove="return"属性
不足：在微信开放工具会报Component "pages/xx/xx" does not have a method "return" to handle event "touchmove".的警告，应该是taro没有支持这个属性，直接当做原生属性处理，不过不影响使用。

Taro H5（2.x）

1、redux无法正常使用

描述：按照官方文档的代码，无法在H5模式下正常使用，会出现store无法传值到props、Cannot read property 'dispatch' of undefined at....等问题。
解决方案：store的context没有传到当前组件，解决代码如下：

// ...
export default class Index extends Component {
	constructor() {
		super(...arguments);
	}

	// ...
}

参考链接

2、非页面组件接入redux的connect装饰器后导致父组件无法通过ref操控子组件

原因分析：根据官方 issuue 分析，可能是@tarojs/redux修改子组件的实例时，并没有继承原组件的属性，原生redux的connect装饰器有四个参数，第四个参数options的 forwardRef 字段就是控制ref引用，但@tarojs/redux的connect装饰器只支持前两个参数。

解决方案：1、Taro的消息机制（管理Events比较麻烦） 2、HOC （未经测试）
3、wrappedInstance，实际上connect装饰器是对组件进行了HOC封装，我们可以通过ref拿到Connect组件，然后通过它的wrappedInstance属性拿到我们想要的组件。

3、非页面组件无法触发componentDidShow钩子

原因分析：官方在H5没有适配非页面组件的componentDidShow钩子，因此只能手动触发。尝试过页面组件在componentDidShow时通过ref来触发，但在某些情况并不能触发（使用了redux的connect装饰器后）。根据多次测试发现，父子组件的钩子触发顺序为父组件componentDidMount、父组件componentDidShow、子组件componentDidMount、子组件compnentDidShow，且子组件compnentDidShow仅在子组件compnentDidMount后才能被调用（否则找不到这个实例方法），因此我们只要在子组件compnentDidMount之后就可以在父组件里触发子组件compnentDidShow钩子了。

解决方案：

// 父组件
class Parent extends Component {
	construtor() {
		this.childRef = Taro.createRef();
	}
	componentDidShow() {
		if (this.childRef.current.getIsMount()) {
			this.childRef.current.componentDidShow();
		}
		// 如果子组件使用redux的connect装饰器，代码如下：
		if (this.childRef.current.wrappedInstance.getIsMount()) {
			this.childRef.current.wrappedInstance.componentDidShow();
		}
	}
	render () {
		return (
			<Child ref='childRef' />		
		)
	}
}


// 子组件
class Child extends Component {
	construtor() {
		this.state = {
			isMount: false
		};
	}
	componentDidMount() {
		this.setState({
			isMount: true,
		});		
		this.componentDidShow();
	}
	componentDidShow() {
		// ...
	}
	getIsMount() {
		return this.state.isMount;
	}
}

公众号H5

1、正则表达式反向捕获不支持，只能另寻方案解决。

2、微信不支持pushState的特性，在某些页面调用wx.config会报invalid signature错误。

微信文档有说明：

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

解决方案可参考：调用微信扫一扫功能，踩坑’invalid signature

3、History.pushState()实现的SPA导致微信jssdk配置签名失败

微信开放社区

4、微信分享图片不显示的问题

微信分享链接的缩略图和标题

注：微信内分享的方法一无效

微信开发

1、ios使用new Date('2020-07-09 00:00:00')转化出错，显示0NaN-NaN...。
解决方案：字符串不要带有-符号

参考链接

微信jssdk文档
ios new Date的坑
小程序显示弹窗时禁止下层的内容滚动