小程式頁面動態配置實現教程

2022-09-20 10:48:12 字數 1476 閱讀 7155

小程式可以根據管理後台配置動態更新展示內容,如實現下面新鮮事欄目的**的可配置,點選跳轉url的可配置。

1後端建立乙個map結構的資料表,表結構如下:

2 管理後台根據不同業務設定不同的key和value,更新資料庫

如key:ad1url value:a.png

如果需要更新頁面,只需更新ad1url對應的value

3 小程式根據對應業務key獲取對應的配置項,更新頁面顯示

後端介面服務:springboot mybatis mysql

管理後台:vue

前端:小程式

為了保證key的唯一性,key在資料庫設定為unique屬性,新增和更新功能通過以下sql語句實現,主要通過replace into實現配置項的唯一

@insert("")

@options(usegeneratedkeys = true, keyproperty = "configid", keycolumn = "configid")

複製**

api設計

一開始想通過傳如list資料給後端實現配置項的批量插入功能,發現後端資料一直接受不到,故而退而求其次,通過json字串實現vue(網路庫使用axios)呼叫後端介面

@apioperation(value = "新增或更新配置列表")

@requestmapping(value = "/add_or_update_config_list", method = requestmethod.post,

produces = mediatype.application_json_utf8_value)

public responsebean addorupdateconfiglist(string list)

複製**

管理平台用vue開發,網路框架採用axios,列表資料通過json字串傳遞給後端

let config1 = ;

let config2 = ;

let config3 = ;

let config4 = ;

let configlist = [config1, config2, config3, config4];

let result = await addconfiglist();

......

複製**

小程式呼叫後端介面返回所有配置項,具體業務根據具體業務key獲取配置項

getconfiglist: function () ,

complete: function (res) ,

success: function (res) );

}});

},

goad1: function())

},複製**

這個功能我在自己的小程式開發過程中設計的頁面配置實現思路,主要遇到了兩個小問題:1 如果保證key的唯一性 2 前後端批量資料的傳輸問題;希望能給遇到同樣問題的小夥伴一些啟示,如果有更好的方案,歡迎一起討論。

練習 小程式動態生成頁面

1.資料放入data檔案中的data.js title1 最好的華俱 title2 副標語 title1 標語2 title2 副標語2 url images 5.jpeg title1 標語3 title2 副標語3 2.在data.js中設定出口 module.exports template ...

微信小程式頁面傳值新手教程

微信小程式頁面傳值新手教程。最近組裡開發小程式,遇到了乙個前端亙古不變的話題 頁面傳值。剛開始使用路徑傳參解決,但是眾所周知 各瀏覽器http get請求url最大長度並不相同,幾類常用瀏覽器最大長度及超過最大長度後提交情況如下 ie6.0 url最大長度2083個字元,超過最大長度後無法提交。ie...

python實現小程式推送頁面收錄指令碼

小程式搜尋推送介面 developers.weixin.qq.com miniprogram 小程式獲取assess token developers.weixin.qq.com miniprogram 當時看到小程式頁面收錄的時候也是很恍然,一直都沒有怎麼注意到這個東西,直到加了微信小程式社群的官...