微信小程序--雲開發靜態網站h5跳小程序

微信小程序–雲開發靜態網站h5跳小程序
靜態網站h5跳小程序

----首先需要開通小程序的靜態網站功能

1.開通靜態網站、綁定自定義域名，需要在「微信開發者工具 - 雲開發 - 更多 - 靜態網站」里進行，才能擁有免鑒權的能力。
(1) 打開小程序開發工具，點擊雲開發-設置-查看項目資源id
(2) 在微信官方文檔上下載代碼

(3) 將下載下來的代碼打開將html里面含有replace的地方修改成自己小程序的信息

 

 (4) 將html文件上傳到雲開發控制台，打開小程序開發工具–雲開發–更多–靜態網站–上傳文件

 

 

(5) 開始寫雲函數，在上面的html中會調用。。。ps,微信小程序項目最先如果是非雲開發項目，使用以下方法創建雲函數。。。

在微信開發者工具上新建一個雲開發項目，項目的appid要與自己項目的appid一致。

 

 

將之前下載html是文件里面cloudfunctions文件夾里面的public文件夾復制到新建的雲開發項目的cloudfunctions雲函數文件夾下面

 

 將上面的public復制到下面

 

 (6) public里面的index.is就是雲函數的入口文件。在里面寫雲函數的方法

這就要涉及到雲函數的傳參-----因為我們跳轉小程序的時候都會穿一些參數去查詢數據–例如詳情頁

• 首先我們在html里面調用雲函數，

 

 在雲函數中接收參數

 

 (7) 將寫好的雲函數上傳。鼠標右鍵點擊public函數，選擇上傳並部署

 

 

上傳以后在雲開發控制平台的雲函數列表里面，就會出現剛剛我們創建的public雲函數了

 

 點擊雲函數權限–修改–允許所有用戶訪問–確定

 

 

綜上就是所有步驟了，點擊雲函數–靜態網站，之前我們上傳的html，便會出現訪問地址
復制出來就可以看大效果了（或者直接訪問域名）

 

 

 

 

補充：如何跳轉的 頁面需要根據參數顯示內容時，在html 頁面中的wx-open-launch-weapp 標簽上面的path寫成動態的。（首先在標簽上綁定一個id，在等頁面加載完成后設置path ）

 

 

 

 //獲取url 上面的參數 

    function getUrlData() {

        var url = window.location.search;

        console.log('url',url)

        let dataObj = {}

        if (url.indexOf("?") != -1) {

             var str = url.substr(1);

             var strs = str.split("&");

             for (var i = 0; i < strs.length; i++) {

                 dataObj[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);

             }

        }

        let btn = document.getElementById('launch-btn')

        let path = '/pages/shop-car/product-detail/product-detail?id='+dataObj.id;

        btn.setAttribute('path',path);

        btn.addEventListener('launch', function (e) {

          console.log('success',e);

        });

        btn.addEventListener('error', function (e) {

          console.log('fail', e.detail);

        });

         

    }

    // 頁面加載完成事件

    window.onload=function(){ 

        console.log("頁面加載完成！"); 

        getUrlData()

    } 

 

原文鏈接：https://blog.csdn.net/hlc162181/article/details/113502356