使用微搭低代碼製做每日菜單小程序

隨着網絡和科技的發展，利用小程序來服務內部職工的機構也愈來愈多。本文就使用微搭低代碼來快速製做一款每日菜譜小程序，機構內部的負責人能夠維護每週的菜譜，職工經過關注小程序來查看每週的菜譜信息。

一 、定義數據源

任何一款小程序都須要將數據存儲起來，咱們通常會將數據存儲到數據庫中，微搭給咱們提供了一款在線的文檔數據庫，能夠方便咱們進行數據的讀取和存儲操做。

能夠在數據源管理中建立咱們的自定義數據源，菜譜。

2、建立應用

數據源定義好後，咱們須要建立應用，一個應用就對應線上的一個小程序，基礎版能夠建立50個小程序，足夠咱們使用了。具體方法點擊應用管理，點擊建立空白應用按鈕。

輸入應用名稱和標識點擊肯定就能夠

3、頁面開發

應用建立成功後，咱們點擊編輯應用按鈕就能夠進行頁面的具體開發了

默認會建立一個首頁，就是咱們打開小程序看到的第一個頁面

通常的小程序首頁會放置具體能夠操做的功能，咱們以圖標的形式引導用戶進行點擊，首先咱們開發菜譜管理的功能，圖標的話咱們能夠去iconfont上下載，能夠無償使用

在搜索框輸入菜譜，點擊png下載就能夠

下載好了以後，咱們須要把圖標上傳到咱們的素材庫以備後續進行使用，能夠點擊左側菜單欄的資源管理，將下載好的素材上傳上去

素材有了咱們就須要考慮功能的實現了，首頁的功能須要選擇合適的佈局，佈局就是規定了頁面的結構，由於是圖標加文字的形式因此咱們選擇柵格佈局，有四列就足夠了。具體的操做方式是選擇對應的組件，能夠點擊也能夠拖入編輯區

初學者可能對插槽不是特別理解，其實就像積木同樣，有插槽的地方說明繼續能夠放置其餘組件，這裏咱們在第一個插槽裏先放置一個容器組件，我通常的習慣是切換到大綱視圖，而後選中插槽再往裏放組件，這樣比較精準。

放置容器組件的目的是爲了讓圖片和文字描述垂直排列，因此咱們須要設置一下容器的樣式爲flex佈局，主軸方向爲垂直，主軸和副軸都是居中對齊

而後在容器組件裏放置圖片組件，圖片組件放置後咱們改一下圖片的寬和高各爲100

而後增長一個文本組件，將內容修改成菜譜管理

按照相同的方法咱們依次在其他的插槽中放置圖片和文本組件，修改標題爲每週菜譜、評論管理、發佈評論

如今圖片是默認圖片，咱們能夠將圖片修改爲使用素材庫的圖片，選中圖片組件點擊雲朵的圖片使用素材庫的圖片便可

圖標定義好後，咱們須要爲圖標定義事件，咱們選擇容器組件，定義點擊事件，選擇tap點擊，咱們選擇平臺方法中的導航方法

導航事件須要選擇導航的頁面，咱們須要建立一個頁面，在頁面管理建立新頁面便可

頁面建立成功後咱們回到首頁上，選中咱們的容器組件，切換到事件頁籤選擇咱們剛剛建立的頁面，這樣事件就定義好了

4、預覽發佈

搭建好頁面後，在編輯器裏是看不到頁面跳轉的，爲了測試一下咱們的設置是否正確，咱們點擊預覽發佈按鈕，將代碼提交到生產環境看一下效果

選擇實時預覽就能夠

咱們能夠掃碼訪問也能夠直接在瀏覽器打開

產品介紹

騰訊雲微搭低代碼是高效、高性能的拖拽式低代碼開發平臺，向上鏈接前端的行業業務，向下鏈接雲計算的海量能力，助力企業垂直上雲。騰訊雲微搭低代碼將繁瑣的底層架構和基礎設施抽象化爲圖形界面，經過行業化模板、拖放式組件和可視化配置快速構建多端應用（小程序、H5應用、Web 應用等），免去了代碼編寫工做，讓您可以徹底專一於業務場景。騰訊雲微搭低代碼以雲開發做爲底層支撐，雲原生能力將應用搭建的全鏈路打通，提供高度開放的開發環境，且時刻爲您的應用保駕護航。
開通微搭：https://cloud.tencent.com/product/weda?tdl_anchor=techsite
產品文檔：https://cloud.tencent.com/product/weda/details?from=12763技術交流羣、最新資訊關注微信公衆號【騰訊雲低代碼】