Wechat applet webview embedded uniapp H5, H5 can jump to a specified page in the applet

 Use uniapp to develop small programs, and use uniapp to develop h5. At this time, the internal jump to uni.navigateTo may not be able to tell which is which. The official solution is given:

 1. Use webview to embed H5 in the applet

<template>
  <view style="width: 100%; height: 100%;">
    <web-view v-if="url" :src="url"></web-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        url: '',
      }
    },
    onLoad: function(option) {
      this.url='https://syzhtc.syjtgroup.com/hitest/test/reserve?uid=aaa12345&phone=15588687004&startLocation=1'
    },
  }
</script>

<style lang="scss" scoped>
</style>

1. Use uniapp to develop H5, and the entry file reserve.html is set as follows:

 2. The H5 page is as follows:

3. Jump from H5 to the applet, jump to a specified page in the applet, such as: /pages/interfacemap/interfacemap page

    <button class="btn-long test">试验试验试验</button>
    <button class="btn-long test" @click="ditu()">地图map-uni.webView-加函数 </button>
    <button class="btn-long test" @click="pay()">支付pay2-jWeixin.miniProgram </button>

 uni.webView.navigateTo or jWeixin.miniProgram.navigateTo realizes jumping from H5 to Mini Program, as follows:

methods: {
      ditu(){
        console.log("uni.webView",uni.webView)
        uni.webView.navigateTo({
          url: '/pages/interfacemap/interfacemap?test=map',
          success: res => {
            console.log("success")
          },
          fail: () => {
             console.log("fail")
          },
          complete: () => {
             console.log("complete")
          }
        });
      },
      pay(){
        console.log("jWeixin.miniProgram",jWeixin.miniProgram)
        jWeixin.miniProgram.navigateTo({
          url: '/pages/interfacemap/interfacemap?test=pay'
        });
      },

Guess you like

Origin blog.csdn.net/LzzMandy/article/details/122845839