记录 wx-open-launch-weapp 使用react开发微信环境h5打开微信小程序-Toy模板网

这篇具有很好参考价值的文章主要介绍了记录 wx-open-launch-weapp 使用react开发微信环境h5打开微信小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

准备工作

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'], // 填入打开小程序的开放标签名
    });

我的点击区域

react微信h5开发,前端,微信小程序,微信,前端