微信内h5页面打开小程序
相关配置
微信js文件版本大于等于1.6.0
https://res.wx.qq.com/open/js/jweixin-1.6.0.js
微信授权配置
window.wx.config({
...otherConfig,
openTagList: ['wx-open-launch-weapp']
})调用示例
const style = {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
};
function OpenWeapp({ originId, pagePath }) {
return (
<wx-open-launch-weapp username={originId} path={pagePath} style={style}>
<script type="text/wxtag-template">
<div style={style} />
</script>
</wx-open-launch-weapp>
);
}
// 使用方式
<div style={{ position: 'relative' }}>
点击跳转小程序
<OpenWeapp originId="gh_xxxxxxxx" pagePath="pages/home/index?user=123&action=abc" />
</div>
为什么给div添加position: relative呢？
由于wx-open-launch-weapp设置样式比较困难，故放弃设置样式，将wx-open-launch-weapp作为一个透明的占位元素，撑满父元素，也能达到预期的功能
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
