準(zhǔn)備工作?

1、微信簽名配合后端
2、必須已認(rèn)證的公眾號(開發(fā)模擬器不行,測試號不行)

遇見的問題:

本地調(diào)試麻煩,用的手機(jī)修改dns,和電腦一致,通過電腦代理,編譯時配置host代理運行調(diào)試(因為本地開發(fā)沒辦法簽名認(rèn)證)

1、在微信編輯器,測試號內(nèi)怎么試都不生效,最后發(fā)現(xiàn)正式環(huán)境可以
2、點擊跳轉(zhuǎn)區(qū)域需要圖片,寫好后發(fā)現(xiàn)有時候生效有時候不能點擊
3、修復(fù)前兩個功能后發(fā)現(xiàn)ios點擊沒反應(yīng)
4、最終ios,安卓手機(jī)的h頁面都正常顯示并且可以點擊

我是react?taro開發(fā)

封裝了組件 ,支持按鈕,彈框,自定義內(nèi)部內(nèi)容

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("跳轉(zhuǎn)小程序成功：", e.detail);
  }

  const errorHandel = (e: any) => {
    console.log("跳轉(zhuǎn)小程序失?。?, e.detail);
  }

  const readyHandel = () => {
    console.log("跳轉(zhuǎn)小程序準(zhǔn)備完成");
  }

  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'], // 填入打開小程序的開放標(biāo)簽名
    });

我的點擊區(qū)域

?

?最終可正常使用

文章來源地址http://www.zghlxwxcb.cn/news/detail-594782.html

到了這里，關(guān)于記錄 wx-open-launch-weapp 使用react開發(fā)微信環(huán)境h5打開微信小程序的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！