欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

h5 跳轉(zhuǎn)微信小程序 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價值，我們在追求其視覺表現(xiàn)的同時，更側(cè)重于功能的便捷，營銷的便利，運營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序為后期升級提供便捷的支持！

您當前位置>首頁 » 新聞資訊 » 小程序相關(guān) >

h5 跳轉(zhuǎn)微信小程序

發(fā)表時間：2021-1-5

發(fā)布人：葵宇科技

瀏覽次數(shù)：225

概述

普通的H5是無法跳轉(zhuǎn)小程序的。在手機微信內(nèi)打開的H5網(wǎng)頁可通過開放標簽跳轉(zhuǎn)微信小程序（目前電腦微信不會渲染跳轉(zhuǎn)按鈕）。具體使用、權(quán)限說明，請閱讀微信官方文檔。

使用步驟文檔有詳細說明，這里簡單概括如下：

  1. 登錄微信公眾平臺進入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名” 。
  2. 后端開發(fā)提供獲取簽名相關(guān)字段的接口。
  3. 微信公眾平臺查看所需跳轉(zhuǎn)的小程序原始id，注意是gh_開頭的。
  4. 按官方文檔準備html文件，部署到綁定域名的服務(wù)器上。（文末有完整的示例代碼，供參考）
  5. 在手機微信內(nèi)打開部署好的html文件。正常情況下，會出現(xiàn)小程序的按鈕，點擊可跳轉(zhuǎn)小程序。

可能遇到的錯誤

這些都時我開發(fā)遇到的錯誤，下面列出了原因和解決辦法。如果你也遇到了，希望對你有幫助。

非法簽名

錯誤描述：jssdk 報錯 config:invalid signature。如下圖：

原因：簽名用的url是后端自己取，

解決辦法：前端動態(tài)獲取location.href.split('#')[0]，傳給服務(wù)端就正確啦。

const url = encodeURIComponent(location.href.split('#')[0]); 
fetch(`/wechat/index?url=${url}`).then(res => {
    return res.json()
})
復(fù)制代碼

如果不是url的問題，就麻煩后端同學對照文檔，閱讀附錄1-JS-SDK使用權(quán)限簽名算法、附錄5-常見錯誤及解決方法，確認簽名算法是否正確。

信息不完整，無法啟動

錯誤描述：點擊打開小程序的按鈕，點擊允許后，toast提示 “信息不完整，無法啟動”。

原因：開發(fā)標簽的 username 不正確。我當時就是寫成了配套公眾號的原始id。/(ㄒoㄒ)/~~

解決：請再次你的確定 標簽的 username 參數(shù)是 gh_開頭的目標小程序的原始id。

jweixin引入時報錯

錯誤描述：uni-app 項目中，vue文件 require('../../common/jweixin-1.6.0.js')，報錯。

原因：jweixin里執(zhí)行this.document.title，this期望指向window，但uni-app打包構(gòu)建后this指向了undefined。

解決辦法：

  1. 改jweixin-1.6.0.js源碼文件，將第一個this 改成window。
  2. uni-app h5 支持自定義模板，在模板中直接使用script標簽引入就沒有這個問題啦。
  3. 更多解法參考這個回答。

vue 文件template標簽沖突

錯誤描述：將如下內(nèi)容粘貼到vue文件的template出現(xiàn)一大堆報錯。


    

復(fù)制代碼

官方說明如下：

對于Vue等視圖框架，為了避免template標簽沖突的問題，可使用 復(fù)制代碼

wx-open-launch-weapp 里標簽樣式問題

問題描述：打開小程序按鈕，要固定在屏幕右下方，使用fixed定位，發(fā)現(xiàn)標簽不見了？按鈕line-height設(shè)置為100rpx，不生效？

官方說明如下：

頁面中與布局和定位相關(guān)的樣式，如position: fixed; top -100;等，盡量不要寫在插槽模版的節(jié)點中，請聲明在標簽或其父節(jié)點上。

除了官方說明，實踐總結(jié)如下幾點：

  1. 插槽模版的節(jié)點，不能使用rpx，定義的scss變量名當然也不可以（復(fù)制粘貼注意下/(ㄒoㄒ)/~~）。
  2. 插槽模版的節(jié)點，設(shè)置寬高100%無效。
  3. 父節(jié)點可設(shè)置fixed等，定位、布局類樣式可寫在父節(jié)點上，插槽節(jié)點放在里面就能實現(xiàn)你想要的布局。
  4. 父節(jié)點使用flex 布局，可能會出現(xiàn)樣式。（本來想用flex布局實現(xiàn)居中的，結(jié)果不行）

html 示例代碼 
<html>
<head>
    <meta charset="utf-8">
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js">script>
head>
<body>
    <script>
        // 動態(tài)獲取當前頁面 url， 傳給后端用于簽名 
        const url = encodeURIComponent(location.href.split('#')[0]); 
        fetch(`/wechat/index?url=${url}`).then(res => {
            return res.json()
        }).then(({ signPackage }) => {
            const { timestamp, nonceStr, signature, appId } = signPackage
            wx.config({
                debug: true, // 調(diào)試時可開啟，調(diào)用的所有api的返回值會在客戶端alert出來
                appId, // 必填，公眾號的唯一標識
                timestamp, // 必填，生成簽名的時間戳
                nonceStr, // 必填，生成簽名的隨機串
                signature, // 必填，生成簽名的隨機串
                jsApiList: ['openLocation'], // 必填，需要使用的JS接口列表
                openTagList: ['wx-open-launch-weapp'], // 需要使用的開放標簽列表
            })
        })
    script>

    <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxx" path="pages/brand/brand.html">
        <template>
            <style>
                .btn {
                    padding: 10px;
                }
            style>
            <button class="btn">打開小程序button>
        template>
    wx-open-launch-weapp>

    <script>
        var btn = document.getElementById('launch-btn');
        btn.addEventListener('launch', function (e) {
            console.log('success');
        });
        btn.addEventListener('error', function (e) {
            console.log('fail', e.detail);
        });
    script>
body>
html>
復(fù)制代碼
uni-app 項目的 vue 示例代碼

相關(guān)案例查看更多