小程序頁(yè)面動(dòng)態(tài)配置實(shí)現(xiàn)方法

更新時(shí)間：2019年02月05日 09:17:19 作者：worldant

這篇文章主要介紹了小程序頁(yè)面動(dòng)態(tài)配置實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

小程序可以根據(jù)管理后臺(tái)配置動(dòng)態(tài)更新展示內(nèi)容，如實(shí)現(xiàn)下面新鮮事欄目圖片的來(lái)源的可配置，點(diǎn)擊跳轉(zhuǎn)url的可配置。

實(shí)現(xiàn)方案

1后端創(chuàng)建一個(gè)map結(jié)構(gòu)的數(shù)據(jù)表，表結(jié)構(gòu)如下：

2 管理后臺(tái)根據(jù)不同業(yè)務(wù)設(shè)定不同的key和value，更新數(shù)據(jù)庫(kù)

如key：ad1url value：a.png

如果需要更新頁(yè)面圖片，只需更新ad1url對(duì)應(yīng)的value

3 小程序根據(jù)對(duì)應(yīng)業(yè)務(wù)key獲取對(duì)應(yīng)的配置項(xiàng)，更新頁(yè)面顯示

技術(shù)棧

后端接口服務(wù)：SpringBoot Mybatis MySql

管理后臺(tái)：vue

前端：小程序

代碼實(shí)現(xiàn)

后端接口

為了保證key的唯一性，key在數(shù)據(jù)庫(kù)設(shè)置為unique屬性，新增和更新功能通過(guò)以下sql語(yǔ)句實(shí)現(xiàn)，主要通過(guò)replace into實(shí)現(xiàn)配置項(xiàng)的唯一

@Insert("<script>" +
   "REPLACE INTO `rental`.`t_config`(`key`, `value`) VALUES" +
   "<foreach" +
   " collection=\"list\" item=\"item1\" index=\"index\" separator=\",\">" +
   "(#{item1.key}, #{item1.value})" +
   "</foreach>" +
  "</script>")
 @Options(useGeneratedKeys = true, keyProperty = "configId", keyColumn = "configId")

api設(shè)計(jì)

一開(kāi)始想通過(guò)傳如list數(shù)據(jù)給后端實(shí)現(xiàn)配置項(xiàng)的批量插入功能，發(fā)現(xiàn)后端數(shù)據(jù)一直接受不到，故而退而求其次，通過(guò)json字符串實(shí)現(xiàn)vue（網(wǎng)絡(luò)庫(kù)使用axios）調(diào)用后端接口

@ApiOperation(value = "新增或更新配置列表")
@RequestMapping(value = "/add_or_update_config_list", method = RequestMethod.POST, 
    produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
public ResponseBean<String> addOrUpdateConfigList(String list) {
 long result = configService.batchInsertOrUpdate(JSONObject.parseArray(
  list,Config.class));
 ......
}

管理平臺(tái)

管理平臺(tái)用vue開(kāi)發(fā)，網(wǎng)絡(luò)框架采用axios，列表數(shù)據(jù)通過(guò)json字符串傳遞給后端

let config1 = {key: "ad1Url", value: this.formData.ad1Url};
let config2 = {key: "ad2Url", value: this.formData.ad2Url};
let config3 = {key: "adClick1", value: this.formData.adClick1};
let config4 = {key: "adClick2", value: this.formData.adClick2};
let configList = [config1, config2, config3, config4];
let result = await addConfigList({list: JSON.stringify(co
nfigList)});
......

小程序

小程序調(diào)用后端接口返回所有配置項(xiàng)，具體業(yè)務(wù)根據(jù)具體業(yè)務(wù)key獲取配置項(xiàng)

getConfigList: function () {
 var that = this;
 wx.request({
  url: constant.HOST + '/config/get_config_list',
  method: 'GET',
  header: {
  'content-type': 'application/json'
  },
  complete: function (res) {
 
  },
  success: function (res) {
  console.log("config list response:" + JSON.stringify(res));
  that.setData({ configList: res.data.data});
  }
 });
 },
  
goAd1: function(){
 wx.navigateTo({
  url: '/pages/webview/webview?url=' + this.data.configList.adClick1
 })
},

總結(jié)

這個(gè)功能我在自己的小程序開(kāi)發(fā)過(guò)程中設(shè)計(jì)的頁(yè)面配置實(shí)現(xiàn)思路，主要遇到了兩個(gè)小問(wèn)題：1 如果保證key的唯一性 2 前后端批量數(shù)據(jù)的傳輸問(wèn)題；希望能給遇到同樣問(wèn)題的小伙伴一些啟示，如果有更好的方案，歡迎一起討論

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: