Analisis ringkas tentang cara melompat dari applet ke halaman H5? (Contoh analisis)

Bagaimana untuk melompat dari applet ke halaman H5? Artikel berikut akan memperkenalkan kepada anda cara untuk melompat ke halaman H5 Program Mini WeChat Saya harap ia akan membantu anda!

Program Mini WeChat: Walaupun kaedah pembangunan serupa dengan laman web, ia sebenarnya kaedah yang dibangunkan sendiri yang hanya boleh dijalankan pada WeChat Halaman web khas dalam penyemak imbas, semua fungsi yang boleh digunakan mesti disediakan oleh Pelayar WeChat

H5 halaman: Ini adalah aplikasi web sebenar, berjalan dalam; penyemak imbas umum , walaupun pelbagai pelayar mempunyai perbezaan yang ketara, ia pada umumnya adalah sama Pelayar WeChat juga merupakan pelayar umum yang boleh menyokong aplikasi web sebenar.

Itulah sebabnya kita boleh melompat antara applet WeChat dan halaman H5, tetapi lompatan ini dikawal ketat oleh penyemak imbas WeChat, jadi adalah perlu untuk kita memahami bahawa kawalan ini termasuk yang mana.

Nama domain di mana halaman H5 terletak: Katakan URL halaman H5 yang anda perlu pindahkan ialah https://www.mysite.com/h5page, maka nama domain yang disebut di sini ialah www.mysite.com Selain itu, anda membacanya dengan betul , URL ini mestilah https Jika anda belum menambahkan SSL pada tapak web anda, kemudian mohon sijil terlebih dahulu (perhatikan bahawa ia mestilah sijil yang digunakan secara umum, bukan yang ditandatangani sendiri, WeChat tidak akan mengenalinya!)

Baiklah, Dengan semua itu, mari kita mula membangunkan contoh kecil.

Memandangkan komponen web-view ialah komponen skrin penuh dan tidak boleh digunakan dengan komponen program mini yang lain, ia perlu menduduki halaman yang berasingan, jadi dalam contoh kami, kami menambah pautan ke halaman A program mini dan lompat ke halaman B. halaman, dan kemudian gunakan komponen web-view pada halaman B untuk memuatkan halaman H5.

Sebuah halaman

<view class="answerer flex-wrp" bindtap=&#39;jumpToH5&#39;>
        <view class="avatar flex-item">
            <image src="/images/logo-small.jpg"></image>
        </view>
        <view class="answerer-info flex-item">
            <text class="answerer-name">文章标题</text>
            <text class="answerer-des">文章摘要</text>
        </view>
        <view class="follow flex-item">
            <text>十 关注</text>
        </view>
</view>

jumpToH5: function () {
    wx.navigateTo({
      url: '/pages/B'
    })
  },

B halaman

<web-view src="{{link}}" bindmessage="getMessage"></web-view>

  data: {
    link: "https://www.mysite.com/h5page"
  },

Pada masa ini apabila anda Apabila anda mengklik pada pautan dengan penuh harapan, halangan pertama akan muncul: Pembangun web yang tidak terikat

Ternyata orang yang menggunakan web-view komponen bukan orang lain Ia dibenarkan untuk digunakan apabila ia muncul Pada masa ini, kebenaran pertama diperlukan, iaitu memberi kebenaran kepada pembangun untuk menggunakan komponen tersebut. Apa yang lebih tidak masuk akal di sini ialah walaupun komponen ini digunakan oleh program mini, ia tidak boleh ditetapkan dalam akaun pembangunan program mini Ia mesti ditetapkan dalam 订阅号 atau 服务号 Tangkapan skrin di bawah selalunya boleh didapati di Internet . Anda hanya boleh melihatnya jika anda log masuk 订阅号 atau 服务号.

Selepas menetapkan dan mengikat ID WeChat pembangun di sini, akhirnya kami boleh menggunakan komponen web-view, tetapi kali ini masalah baharu timbul: pembukaan tidak disokong Bukan perniagaan nama domain

Ternyata anda tidak boleh menggunakan mana-mana URL sahaja untuk menyediakan lompatan Anda tidak boleh melompat terus ke Baidu dalam program mini anda boleh melompat. Nama domain yang dipindahkan mesti didaftarkan dalam 业务域名 Akhirnya, kali ini ia ditetapkan dalam akaun pembangunan program mini, tetapi sila ambil perhatian bahawa terdapat juga tetapan nama domain perniagaan dalam tetapan 服务号, jadi. jangan keliru (ia juga terlalu mudah untuk menamakan WeChat).

Selepas menyediakan nama domain perniagaan ini, saya dengan gembira membuka program mini, klik pada pautan, dan apa! Sekali lagi, masalah kali ini menjadi: ralat parameter redirect_uri

Pada masa ini, kawalan telah dipindahkan daripada applet ke halaman H5, tetapi mekanisme dalaman halaman WeChat melompat adalah agak Ia rumit dan melibatkan pengesahan OAuth dan seumpamanya, jadi ralat ini telah dilaporkan pada halaman H5 Ini memerlukan penetapannya dalam 服务号 yang dikaitkan dengan halaman H5 yang ditetapkan kali ini dipanggil 网页授权域名 , yang boleh didapati pada akaun rasmi Selepas menambah nama domain yang perlu diubah hala dalam tetapan fungsi

, anda akhirnya boleh melihat halaman H5 muncul dalam penyahpepijat !

Akhir sekali, mari popularkan perbezaan antara tiga jenis akaun pada platform awam WeChat

Akaun perkhidmatan: menyokong kebanyakan antara muka pembangunan Web dan pembangunan JS antara muka, dan merupakan akaun pembangunan Aplikasi yang paling konvensional;
Program mini: Akaun pembangunan eksklusif untuk aplikasi program mini Ia hanya menyokong pembangunan program mini Banyak tetapan mesti ditetapkan dalam dua jenis akaun pertama.
[Cadangan pembelajaran berkaitan: Tutorial Pembangunan Program Mini

]

Atas ialah kandungan terperinci Analisis ringkas tentang cara melompat dari applet ke halaman H5? (Contoh analisis). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!