隨着網絡和科技的發展,利用小程序來服務內部職工的機構也越來越多。本文就使用微搭低代碼來快速制作一款每日菜譜小程序,機構內部的負責人可以維護每周的菜譜,職工通過關注小程序來查看每周的菜譜信息。
一 、定義數據源
任何一款小程序都需要將數據存儲起來,我們一般會將數據存儲到數據庫中,微搭給我們提供了一款在線的文檔數據庫,可以方便我們進行數據的讀取和存儲操作。
可以在數據源管理中創建我們的自定義數據源,菜譜。
二、創建應用
數據源定義好后,我們需要創建應用,一個應用就對應線上的一個小程序,基礎版可以創建50個小程序,足夠我們使用了。具體方法點擊應用管理,點擊創建空白應用按鈕。
輸入應用名稱和標識點擊確定就可以
三、頁面開發
應用創建成功后,我們點擊編輯應用按鈕就可以進行頁面的具體開發了
默認會創建一個首頁,就是我們打開小程序看到的第一個頁面
一般的小程序首頁會放置具體可以操作的功能,我們以圖標的形式引導用戶進行點擊,首先我們開發菜譜管理的功能,圖標的話我們可以去iconfont上下載,可以免費使用
在搜索框輸入菜譜,點擊png下載就可以
下載好了之后,我們需要把圖標上傳到我們的素材庫以備后續進行使用,可以點擊左側菜單欄的資源管理,將下載好的素材上傳上去
素材有了我們就需要考慮功能的實現了,首頁的功能需要選擇合適的布局,布局就是規定了頁面的結構,因為是圖標加文字的形式所以我們選擇柵格布局,有四列就足夠了。具體的操作方式是選擇對應的組件,可以點擊也可以拖入編輯區
初學者可能對插槽不是特別理解,其實就像積木一樣,有插槽的地方說明繼續可以放置其他組件,這里我們在第一個插槽里先放置一個容器組件,我一般的習慣是切換到大綱視圖,然后選中插槽再往里放組件,這樣比較精准。
放置容器組件的目的是為了讓圖片和文字描述垂直排列,所以我們需要設置一下容器的樣式為flex布局,主軸方向為垂直,主軸和副軸都是居中對齊
然后在容器組件里放置圖片組件,圖片組件放置后我們改一下圖片的寬和高各為100
然后增加一個文本組件,將內容修改為菜譜管理
按照相同的方法我們依次在其余的插槽中放置圖片和文本組件,修改標題為每周菜譜、評論管理、發布評論
現在圖片是默認圖片,我們可以將圖片修改成使用素材庫的圖片,選中圖片組件點擊雲朵的圖片使用素材庫的圖片即可
圖標定義好后,我們需要為圖標定義事件,我們選擇容器組件,定義點擊事件,選擇tap點擊,我們選擇平台方法中的導航方法
導航事件需要選擇導航的頁面,我們需要創建一個頁面,在頁面管理創建新頁面即可
頁面創建成功后我們回到首頁上,選中我們的容器組件,切換到事件頁簽選擇我們剛剛創建的頁面,這樣事件就定義好了
四、預覽發布
搭建好頁面后,在編輯器里是看不到頁面跳轉的,為了測試一下我們的設置是否正確,我們點擊預覽發布按鈕,將代碼提交到生產環境看一下效果
選擇實時預覽就可以
我們可以掃碼訪問也可以直接在瀏覽器打開
產品介紹
騰訊雲微搭低代碼是高效、高性能的拖拽式低代碼開發平台,向上連接前端的行業業務,向下連接雲計算的海量能力,助力企業垂直上雲。騰訊雲微搭低代碼將繁瑣的底層架構和基礎設施抽象化為圖形界面,通過行業化模板、拖放式組件和可視化配置快速構建多端應用(小程序、H5應用、Web 應用等),免去了代碼編寫工作,讓您能夠完全專注於業務場景。騰訊雲微搭低代碼以雲開發作為底層支撐,雲原生能力將應用搭建的全鏈路打通,提供高度開放的開發環境,且時刻為您的應用保駕護航。
開通微搭:https://cloud.tencent.com/product/weda?tdl_anchor=techsite
產品文檔:https://cloud.tencent.com/product/weda/details?from=12763
技術交流群、最新資訊關注微信公眾號【騰訊雲低代碼】