会飞的鱼

2021
分享我的互联网新知
首页 » 微信开发 » 微信小程序内使用web-view嵌套h5站点,并使用h5站点打开其他微信小程序流程

微信小程序内使用web-view嵌套h5站点,并使用h5站点打开其他微信小程序流程

一个比较囧的需求。。。。。。,有一个微信小程序,它是套用h5站点的,用web-view套用进去。。。。一个文件一个小程序哦。。。
现在需要在小程序内的站点加一个导航,导航点击时打开的却是另一个微信小程序。。。。。。我听了脑洞大开啊,这样可以吗?????貌似可以但是不确定呢!!!

经过阅读多个搜索引擎搜索结果。。。。发现有个流程好像可以。。。。
流程
1.使用内嵌的H页面 加载微信的jsdk=====》2.使用函数和原小程序进行参数传递^_^

按这个流程我做了下组合:
1.先准备工具和才来
(1)一套Thinkphp5的程序,原来h5就是这个整的,用view模板的。
(2)微信小程序一个壳,已经上线了~一页小程序
2.动手吧
(1)先在小程序的index.js里面写入(onlaod里面)
onLoad: function (options) {
    var xcx_name = options.xcx_name;
    if(xcx_name=='xmspace.net'){
      wx.showModal({
        title: '温馨提示',
        content: '请确认打开无限星辰工作室',
        showCancel: true,//是否显示取消按钮
        cancelText: "取消",//默认是“取消”
        cancelColor: '#000000',//取消文字的颜色
        confirmText: "确定",//默认是“确定”
        confirmColor: '#3cc51f',//确定文字的颜色
        success: function (res) {
          if (res.cancel) {
            //点击取消,wx.navigateBack
            wx.navigateTo({
              url: '/pages/index/index',
            })
          } else {
            // 使用wx.navigateToMiniProgram跳转到小程序
            //console.info(xcx_name);
      wx.navigateToMiniProgram({
        appId: '目标小程序appid',
        path: 'pages/index/index',
        extraData: {
          foo: 'bar'
        },
        success(res) {
          console.info(res);
          // 打开成功
        }
      });
          }
        },
        fail: function (res) { 
          //接口调用失败的回调函数,wx.navigateBack
        },
        complete: function (res) { 
          //接口调用结束的回调函数(调用成功、失败都会执行)
        },
      })
      
    }
  });
  }

(2)thinkphp添加一个控制器+一个模板
    控制器内容省略,懂的自己写,不懂的~自己找教程。。。。
    view(模板内容如下)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>h5跳转小程序</title>
    </head>
    <body>
        <div align="center">正在跳转到小程序...</div>
        <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
        <script>
                {literal}wx.miniProgram.navigateTo({url: '/pages/index/index?open_xcx_name=xmspace.net'}){/literal}
        </script>
    </body>
</html>

(3)最后把控制器链接放一个模板里面。这样就可以实现,h5在原小程序内就可以通过交互方式打开另一个小程序,流程有点绕,但是最简单。。。。。

文章如无特别注明均为原创! 作者: crx349, 转载或复制请以 超链接形式 并注明出处 crx349博客-智能互联分享博客
原文地址《 微信小程序内使用web-view嵌套h5站点,并使用h5站点打开其他微信小程序流程》发布于2022-7-15

分享到:
打赏

评论

游客

看不清楚?点图切换
切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册