随着网络和科技的倒退,利用小程序来服务外部职工的机构也越来越多。本文就应用 微搭低代码 来疾速制作一款每日菜谱小程序,机构外部的负责人能够保护每周的菜谱,职工通过关注小程序来查看每周的菜谱信息。
一、定义数据源
任何一款小程序都须要将数据存储起来,咱们个别会将数据存储到数据库中,微搭 给咱们提供了一款在线的文档数据库,能够不便咱们进行数据的读取和存储操作。
能够在数据源治理中创立咱们的自定义数据源,菜谱。
二、创立利用
数据源定义好后,咱们须要创立利用,一个利用就对应线上的一个小程序,根底版能够创立 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
技术交换群、最新资讯关注微信公众号【腾讯云低代码】