准备工作
1、微信签名配合后端
2、必须已认证的公众号(开发模拟器不行,测试号不行)
遇见的问题:
本地调试麻烦,用的手机修改dns,和电脑一致,通过电脑代理,编译时配置host代理运行调试(因为本地开发没办法签名认证)
1、在微信编辑器,测试号内怎么试都不生效,最后发现正式环境可以
2、点击跳转区域需要图片,写好后发现有时候生效有时候不能点击
3、修复前两个功能后发现ios点击没反应
4、最终ios,安卓手机的h页面都正常显示并且可以点击
我是react taro开发
封装了组件 ,支持按钮,弹框,自定义内部内容
import {View} from "@tarojs/components";
import {ReactNode, useEffect, useLayoutEffect, useRef} from "react";
import WeChat from "@/utils/WeChat";
import Taro from "@tarojs/taro";
interface WxOpenWxAppProps {
width: number,
height: number,
backgroundImg?: string,
path: string,
children?: ReactNode,
}
const WxOpenWxApp = (props: WxOpenWxAppProps) => {
const ref = useRef<HTMLInputElement>();
useEffect(() => {
return () => {
ref.current?.removeEventListener('ready', readyHandel)
ref.current?.removeEventListener('launch', launchHandel)
ref.current?.removeEventListener('error', errorHandel)
}
}, [])
useLayoutEffect(() => {
console.log('ref.current',ref.current);
if (ref.current) {
setTimeout(()=>{
(async () => {
//await WeChat.getInstance()
// 这里是签名逻辑
})()
},0)
}
ref.current?.removeEventListener('ready', readyHandel)
ref.current?.removeEventListener('launch', launchHandel)
ref.current?.removeEventListener('error', errorHandel)
ref.current?.addEventListener('ready', readyHandel)
ref.current?.addEventListener('launch', launchHandel)
ref.current?.addEventListener('error', errorHandel)
}, [ref.current])
const launchHandel = (e: any) => {
console.log("跳转小程序成功:", e.detail);
}
const errorHandel = (e: any) => {
console.log("跳转小程序失败:", e.detail);
}
const readyHandel = () => {
console.log("跳转小程序准备完成");
}
return <View style={{
width: Taro.pxTransform(props.width),
height: Taro.pxTransform(props.height),
background: props.backgroundImg ? `url("${props.backgroundImg}") no-repeat center center / 100% 100%` : ''
}}>
<wx-open-launch-weapp
ref={ref}
style={{
display: "block",
width: "100%",
height: "100%"
}}
username="gh_小程序原始id"
env-version="release"
path={props.path}
>
<script
type="text/wxtag-template"
>
<button style={{
width: parseFloat(Taro.pxTransform(props.width))*parseFloat(getComputedStyle(document.body).fontSize),
height: parseFloat(Taro.pxTransform(props.height))*parseFloat(getComputedStyle(document.body).fontSize),
background: "none",
border: "none",
outline: 'none',
position:"relative",
margin:0,
padding:0,
left:0,
right:0,
opacity:0,
}}>
{props.children}
</button>
</script>
</wx-open-launch-weapp>
</View>
}
export default WxOpenWxApp;
使用案例
import WxOpenWxApp from "引入存放WxOpenWxApp的路径";
<WxOpenWxApp
path={`pages/home/index/index.html?id=1}`}
width={335}
height={86}
backgroundImg={"这是个图片url"}
/>
wechart.js
wx.config({
debug: false,
appId: APP_ID,
timestamp: params.timeStamp,
nonceStr: params.nonceStr,
signature: params.signature,
// 这里是把所有的方法都写出来了 如果只需要一个方法可以只写一个
jsApiList: ["scanQRCode", "getLocation", 'wx-open-launch-weapp', "chooseImage", 'previewImage',],
openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
});
我的点击区域
最终可正常使用文章来源:https://www.toymoban.com/news/detail-594782.html
文章来源地址https://www.toymoban.com/news/detail-594782.html
到了这里,关于记录 wx-open-launch-weapp 使用react开发微信环境h5打开微信小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!