低码笔记集01-应用的创建和基本使用

前言

Low-code development platform，指的是低代码开发平台（LCDP）。本身也是一种软件，为开发者提供了一个创建应用软件的开发环境，本质上是服务于开发者的生产力工具。和传统的IDE不同点在于，大多数情况下，开发者并不需要使用传统的手写代码方式进行编程，而是可以通过图形化拖拽、参数配置等更高效的方式完成开发工作。

最近接触了腾讯的一款低代码产品—微搭低代码平台，所以打算写一套学习笔记集，初步预估时长一个月，记录自己从入门到非常熟悉的过程。

1.入门

1.创建和发布

创建应用有三种途径，从场景，空白（最常用），模板新建。新建模型应用时，模型应用通常作为小程序后台，自定义应用通常作为小程序。

有两种发布方式，体验版和正式版，不同版本的数据是隔离的。

2.变量定义

类型，作用域：

微搭中变量类型分为文字，数字，布尔值，数组，对象五种。布尔类型的变量常用于做权限控制。在组件的条件展示时，可以绑定布尔类型的变量，根据变量的值来决定组件是否显示。

微搭中变量作用域分为全局变量和局部变量。

定义数组和对象时可以选择自己定义或从数据源中读取，如果自己指定定义的时候要选择json。对象初始化时要选择一对大括号的语法。

赋值，绑定：

变量赋值分为在代码编辑器的自定义方法中赋值和使用平台的赋值语句。

1
2
$page.dataset.state.*** = *** //局部变量赋值
app.dataset.state.*** = ***   //全局变量赋值

给组件绑定变量时添加表达式。

3.代码编辑器

微搭中生命周期函数分为全局和页面，全局是指小程序级别（小程序启动，切后台，再显示，报错等），页面生命周期指具体页面加载完毕，页面隐藏等。

代码编辑器的第一个lifestyle是指全局生命周期。每个页面的lifestyle是指页面的生命周期，可以在页面生命周期的函数中预加载数据（根据传入的数据标识加载该数据）。

想要自定义方法时，在页面的handler下点击新建。

1
2
3
4
export default function({event, data}) {
    //event表示事件对象，data是调用事件时传入的参数
   console.log(event,data)
}

4.数据容器

  • 数据列表包含空白，简单列表（常用于展示动态信息），详细列表，图文列表，卡片列表。

  • 数据详情对应查看详情的功能（常用于从列表页点击某条数据，跳转到详情页然后展示）。使用数据详情页需要在列表页点击跳转页面时设置数据标识来传递参数，实现数据绑定。在详情页配置筛选条件，将数据标识配置成设置的参数。

2.常用功能

1.页面跳转及传参

  • 在页面中可以给组件绑定打开页面的方法，并通过url传递参数，在跳转的新页面进行接收（一般将数据标识作为要传递的参数）

  • 在代码编辑器的生命周期函数中，可以通过以下方法实现页面跳转：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
export default {
  async onAppLaunch(launchOpts) {
    //console.log('---------> LifeCycle onAppLaunch', launchOpts)
    const result = await app.cloud.callModel({
      name:'yhxx_5wybupo',
      methodName:'wedaGetRecords',
      params:{
        pageNo:1,
        pageSize:1,
        where:[
          {
            key:'openid',
            rel:'eq',
            val:$app.auth.currentUser.openId
          }
        ]
      }
    })
    console.log(result)
    if(result.total>0){
      $page.dataset.state.user = result.records[0]
      app.navigateTo({
        pageId:"index",
        params:{}
      })
    }else{
      app.navigateTo({
        pageId:"u_jiao_se_xuan_ze",
        params:{}
      })
    }
  },
  onAppShow(appShowOpts) {
    //console.log('---------> LifeCycle onAppShow', appShowOpts)
  },
  onAppHide() {
    //console.log('---------> LifeCycle onAppHide')
  },
  onAppError(options) {
    //console.log('---------> LifeCycle onAppError', options)
  },
  onAppPageNotFound(options) {
    //console.log('---------> LifeCycle onAppPageNotFound', options)
  },
  onAppUnhandledRejection(options) {
    //console.log('---------> LifeCycle onAppUnhandledRejection', options)
  }
}

页面传参有两种方式，一是将值保存在全局变量供下一个页面使用，二是通过url参数传递

2.小程序常用

1.宫格导航

小程序中，主页的分类展示部分常需要用到宫格导航。

  • 新建数据源，主要包含的字段有分类名称，序号，图标

  • 将数据源中的数据存储在对象类型的变量中

  • 宫格导航的导航设置通过表达式绑定该变量，或者通过代码实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $page.dataset.state.classify.records.map((item, index) => {
        return {
            title: item.flmc,
            iconSrc: item.tb,
            tapStatus: "inside",
            insideUrl: '',
            withParams: true,
            params: [
            ],
            icon: '自定义图片'
        }
    })
    //title标识导航标题，iconSrc表示导航图标，tapStatus表示点击的相应模式（tap无响应，inside跳转页面，outer打开外链），insideUrl需要设置跳转页的id,params存储传递的参数

    2.侧边栏导航

    常用在小程序中通过侧边栏的方式展示分类的数据。需要建立多表之间的对应关系。

    场景：左侧是分类列表，右侧展示不同分类的商品信息

    • 新建分类数据源和内容数据源

    • 页面中新建对象类型的变量，存储分类表的数据

    • 新建侧边选项卡，关闭启用多个插槽选项，通过表达式绑定该变量

    • 在选项卡的内容插槽里添加数据列表组件，绑定内容数据源

    • 新建变量，侧边选项卡类别切换时给变量赋值为分类的id

    • 给数据列表添加筛选条件，当分类id等于当前变量时显示

2.分类页和详情页

1.分类页

当从首页分类导航跳转到分类详情页时，需要定位在对应的分类类别。实现步骤是在打开页面时增加两个参数，当前的菜单index和数据标识。跳到新页面后在侧边选项卡的选中标签属性进行绑定。

Number($page.dataset.params.index)||0

2.详情页

详情页用于展示商品详情数据，可借助数据详情组件，在进入详情页之前，需要将数据标识传入，然后在详情页根据传入的参数作筛选条件

3.客服接入

打开按钮的微信开放功能，选择打开客服对话。

点击客服图标，执行自定义方法

1
2
3
4
5
6
7
export default function({event, data}) {
wx.openCustomerServiceChat({
  extInfo: {url: 'https://work.weixin.qq.com/****'},//客服接入的url
  corpId: '****',//企业id（可在微信客服后台中使用企业微信登录获取）
  success(res) {}
})
}