0
0

uniapp 小程序嵌套H5开发总结

项目需求是在uniapp小程序项目中嵌套H5页面，H5返回小程序需要传值给小程序进行通信。

好,百度一查确实可以实现 用的uniapp提供的web-view（https://uniapp.dcloud.io/component/web-view.html#web-view经验证实，做功能之前先看官网， 能少走很多弯路 ）就可以与外部链接通信。

那如何实现呢？

1.在uniapp小程序项目创建web-view页面

项目代码 

<!-- 外链,webview -->
<template>
    <view><web-view  :src="webviewPath" @message="message"></web-view></view>
</template>

<script>
export default {
    data() {
        return {
            webviewPath: '',
            hackReset:false
        };
    },
    mounted(){
    },
    onLoad() {
        // console.log("来到自定义页面")
        console.log(this.$Route.query.webviewPath,"地址")
        this.webviewPath = this.$Route.query.webviewPath;
    },
    methods:{
        message(event) {
            console.log('接收从小程序传过来的id',event.detail.data)
        }
    }
};
</script>

<style></style>

2.创建一个html项目写H5页面

H5首页代码 

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <!-- <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    .flex-div{
        display: flex;
        flex-wrap: wrap;
    }
        
    </style>
</head>
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<body>
    <div id="app" class="good-wrap" style="max-width: 100%;">
        <div class="top-img" style="width: 100%;">
            <img src="img/top.png" style="width: 100%;" >
        </div>
        <!-- 限量优惠 -->
        <img src="img/img1.png" style="width: 100%;">
        <!-- 优惠券领取 -->
        <div class="mk1-1 flex-div" >
            <img class="mk1img" :data-id="item.id"  @click="goCoupon(item.id)" v-for="(item,index) in goodsdata.xlyh" :src="item.imgUrl" style="width: 100%;">
        </div>
        <div class="mk1-2 flex-div" >
            <img class="mk1img" :data-id="item.id"  @click="goX(item.id)" v-for="(item,index) in goodsdata.xlyh" :src="item.imgUrl" style="width: 100%;">
        </div>
        <!-- 年份茅台 -->
        <img src="img/img5.png" style="width: 100%;">
        <div class="mk2 flex-div">
            <img  :data-id="item.id"  @click="goX(item.id)" v-for="(item,index) in goodsdata.nfmt" :src="item.imgUrl" style="width: 50%;">
        </div>
        <!-- 颜色茅台 -->
        <img src="img/img12.png" style="width: 100%;">
        <div class="mk3 flex-div">
            <img  :data-id="item.id"  @click="goX(item.id)" v-for="(item,index) in goodsdata.ysmt" :src="item.imgUrl" style="width: 50%;">
        </div>
        <!-- 整箱囤购 -->
        <img src="img/img18.png" style="width: 100%;">
        <div class="mk4-1 flex-div">
            <img  :data-id="item.id"  @click="goX(item.id)" v-for="(item,index) in goodsdata.zxtg1" :src="item.imgUrl" style="width: 100%;">
        </div>
        <div class="mk4-2 flex-div">
            <img  :data-id="item.id"  @click="goX(item.id)" v-for="(item,index) in goodsdata.zxtg2" :src="item.imgUrl" style="width: 50%;">
        </div>
        <!-- 精品陈亮 -->
        <img src="img/img26.png" style="width: 100%;">
        <div class="mk5-1 flex-div">
            <img  :data-id="item.id"  @click="goX(item.id)" v-for="(item,index) in goodsdata.jpcl1" :src="item.imgUrl" style="width: 50%;">
        </div>
        <div class="mk5-2 flex-div">
            <img  :data-id="item.id"  @click="goX(item.id)" v-for="(item,index) in goodsdata.jpcl2" :src="item.imgUrl" style="width: 100%;">
        </div>
        <div class="mk5-3 flex-div">
            <img  :data-id="item.id"  @click="goX(item.id)" v-for="(item,index) in goodsdata.jpcl3" :src="item.imgUrl" style="width: 50%;">
        </div>
        <!-- 更多推荐 -->
        <img src="img/img36.png" style="width: 100%;">
        <div class="mk6-1 flex-div">
            <img  :data-id="item.id"  @click="goX(item.id)" v-for="(item,index) in goodsdata.gdtj1" :src="item.imgUrl" style="width: 50%;">
        </div>
        <div class="mk6-2 flex-div">
            <img  :data-id="item.id"  @click="goX(item.id)" v-for="(item,index) in goodsdata.gdtj2" :src="item.imgUrl" style="width: 100%;">
        </div>
        <div class="mk6-3 flex-div">
            <img  :data-id="item.id"  @click="goX(item.id)" v-for="(item,index) in goodsdata.gdtj3" :src="item.imgUrl" style="width: 50%;">
        </div>
        <img src="img/img48.png" style="width: 100%;">
        
        
        
    </div>
    
    <!-- 微信 JS-SDK  -->
    <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>  
    <!-- uni 的 SDK -->
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    <script type="text/javascript" src="data1.json"></script> 
    <script type="text/javascript">
    console.log(goodsdata,"shuju")   
    var app = new Vue({
                  el: '#app',
                  data: {
                      // wxdata: "abc",
                      goodsdata:[]
                  },
                 
                  mounted() {
                      console.log("goodsdata",goodsdata)
                      this.goodsdata=goodsdata;
                      this.$nextTick(() => {
                          document.addEventListener('UniAppJSBridgeReady', function() {
                              uni.getEnv(function(res) {
                                  console.log('当前环境：' + JSON.stringify(res));
                              });  
                          });
                      })
  
                  },
                  created() {
                      // this.wxdata = this.getQueryString('wxdata') || 'abc'
                      // console.log(this.wxdata)
                  },
                  methods: {
                      // 跳转商品详情页面
                      goX(id) {
                          console.log(id,"传给小程序的id")
                          uni.navigateTo({
                              url: '/pages/goods/detail?id='+id
                          });
                      },
                      // 跳转领取优惠卷页面
                      goCoupon(id){
                              uni.navigateTo({
                                  url: '/pages/app/coupon/detail?id='+id
                              });  
                      }
                     /* 接收小程序传参的方法 */
                      getQueryString: function(name) {
                          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                          var r = window.location.search.substr(1).match(reg);
                          if (r != null) {
                              return decodeURIComponent(r[2]);
                          }
                          return null;
                      }
                  }
              })  
    </script>
</body>
</html>

几个关键点

1.引入JS-SDK uniSDK 必须引入，顺序不能错

2.调用uniapp api之前 先加载一段代码

3.跳转传值

小程序在onload(options)里接收

这里其实官网推荐@message传值 但是

@message: 网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。 H5 暂不支持（可以直接使用）

我做的时候用的uni.naviageTo跳转会小程序 小程序端并不会立即打印 而是在跳转一个页面才打印，所以我才用了路由传参 。（其实把naviageTo变成redirectTo或者switchTab 也可以在web-view拿到传值，这也是后来才知晓的 ）

标签： 小程序 前端 html5
本文转载自: https://blog.csdn.net/gyl_sunshine/article/details/123430324
版权归原作者 gyl_sunshine 所有， 如有侵权，请联系我们删除。
登录后发布评论

“uniapp 小程序嵌套H5开发总结”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

C#与C++交互开发系列（二十）：跨进程通信之共享内存（Shared Memory）

hadoop技术实验- 第4章 HBase 开发：使用Java操作HBase

智能对话微信前端小程序设计与开发

前端配置开发环境：新电脑配置前端开发环境，Vue开发环境配置的详细过程

SpringBoot集成MQTT服务器和客户端并通过WebSocket将消息实时发送到前端（本地搭建MQTT服务器）

idea | 搭建 SpringBoot 项目之配置 Maven

Python毕业设计选题：基于django+vue的全国民宿信息管理系统

文章导航