利用低代码从0到1开发一款小程序(代码片段)

低代码布道师 低代码布道师     2022-10-20     142

关键词:

目录


上周在交流群里和一位低码厂商的技术负责人交流,他认为低代码作为开发工具类的产品,需要有从0到1体系化的教程才可以,而且还得有教师进行辅助。否则,学习低代码是有难度的,入门很难。

对于技术负责人的见解,我也深有体会。因为大家习惯了用代码编程,一下子过度到可视化编程,有一个思路上的转变。我们使用代码编程的时候,前端是写标签,后端是写if/else、for循环来执行逻辑处理。

那低代码如何体系化的学习呢?这里我们按照代码方式学习做个对照。

1 搭建开发工具

一般如果我们使用微信开发者工具,开发小程序需要安装工具。低码工具不需要安装,是在线进行编程。但和开发者工具一样,低码也是需要绑定小程序的。我们在开发者工具里一般是需要配置自己小程序的appid,如果使用了云开发的,还需要开通云开发。

我们使用低码开发需要在小程序认证那块,绑定自己的小程序。

我这里一个绑定成功了,一个绑定失败了。失败的原因是小程序和我们的低码账号不是同主体,意思是必须以你自己的微信号申请,不能绑定别人的小程序。

2 创建项目

我们使用微信开发者工具,打开工具的时候就要求创建项目,所谓的创建项目是在你本地新建一个文件夹,然后按照小程序项目的要求生成对应的目录结构。比如有js、json、wxml、wxss等。

低码中我们讲的创建项目是指创建应用,一个应用就相当于一个项目。不同于小程序,低码的外延更广,可以创建PC端的项目,也可以创建移动端的项目。移动端的项目不仅可以创建小程序,也可以创建H5。

而且比小程序方便的是,低码是可以根据模板创建项目的。所谓的模板是指事先已经开发好的项目,就像我们从github上clone一样。当你clone完毕后整个工程的源代码就都下载到了本地。低码中依据模板新建是将做好的项目安装到你自己的空间里。这样你就有了一套成熟的模板,可以在此基础上进行修改。这样做无疑大大的提高了开发效率。


3 功能开发

微信小程序独创了一套语法,分别是wxjs、wxml、wxss。如果我们希望开发难免增加了不少难度,因为又得单独学习一套语法。低码的话组件是使用的react,低码编辑器里是用的javascript。后台方法是用的云函数,学习nodejs即可。总体你只要学会了Js开发低码应用是没啥问题的。

低码中也有页面的概念,但是是可视化创建的。

页面开发的时候完全是可视化的拖拽,并不需要学习啥语法知识

如果需要给组件设置事件的,可以使用平台方法,也可以使用自定义方法

自定义方法是按照Js语法进行编程

export default 
  async onAppLaunch(launchOpts) 
    //console.log('---------> LifeCycle onAppLaunch', launchOpts)
    const  OPENID, FROM_OPENID  = await app.utils.getWXContext()
    let userId = FROM_OPENID || OPENID
    if (!userId) 
      const  wedaId  = await app.cloud.getUserInfo()
      userId = wedaId
    
    app.dataset.state.openid = userId
    console.log(app.dataset.state.openid)
    const result = await app.cloud.callModel(
      name: 'user_h4la7ee',
      methodName: 'wedaGetRecords',
      params: 
        "where": [
          
            "key": "openid",
            "rel": "eq",
            "val": app.dataset.state.openid
          
        ]
      , // 方法入参
    );
    console.log(result.total)
    if(result.total ===1)
      app.dataset.state.islogin = true
      app.dataset.state.imageUrl = result.records[0].imageUrl
      app.dataset.state.nickName = result.records[0].nickName
    
    console.log(app.dataset.state.islogin,app.dataset.state.imageUrl,app.dataset.state.nickName)
    const adminresult = await app.cloud.callModel(
      name: 'admin_qohkmr5',
      methodName: 'wedaGetRecords',
      params: 
        "where": [
          
            "key": "openid",
            "rel": "eq",
            "val": app.dataset.state.openid
          
        ]
      , // 方法入参
    );
    console.log(app.dataset.state.openid)
    console.log(adminresult)
    if(adminresult.total===1)
      app.dataset.state.isadmin = true
    
    console.log("isadmin",app.dataset.state.isadmin)
  ,
  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)
  

4 后端实现

小程序一般只能解决前端交互的功能,后端你必须自己开发功能,安装到服务器上还需要暴露接口。但是一般我们的后台服务都是需要鉴权的,不可能像网站一样公开使用。低代码提供了后端的云函数,直接使用就可以。如果官方提供的不满足要求,还可以自己编写代码

/**
* 使用 npm 包 request 发送http请求, 详细使用文档可以参考
*  https://github.com/request/request#readme
*/
const cloud = require('wx-server-sdk')
cloud.init(
  env: cloud.DYNAMIC_CURRENT_ENV,
)

module.exports =async function (params, context) 
  // params 即为入参定义的结构, 可以在 request 的请求配置中使用 params
  try 
    console.log("cloud",params.templateid)
    const result = await cloud.openapi.subscribeMessage.send(
        "touser": params.openid,
        "page": 'my',
        "lang": 'zh_CN',
        "data": 
          "thing2": 
            "value": params.thing2
          ,
          "date3": 
            "value": params.date3
          
        ,
        "templateId": params.templateId,
        "miniprogramState": 'trial'
      )

    console.log("result",result)
    return result
   catch (err) 
    return err
  
;

5 大龄人员想入门编程,年龄是个问题么

有些人可能随着年龄的增长,一个是希望学个技能,另外也是看到IT行业薪水比较高,希望学习编程。问年龄是学习编程的限制条件么?如果只是兴趣,我还是建议你学习低码,因为工具解决了编程的门槛问题,也可以快速开发出应用来。如果是希望就业,其实低码也是一个不错的入门方向,毕竟老板们只是提出需求,你提供给他一套可用的软件即可。至于你是用拖拽开发,还是手写代码,老板是不太关心的。将来自己在某个行业积淀够了,养活自己不是太大的问题。

总结

我们今天用了一定的篇幅概要的介绍了一下使用低码是如何从0到1构建应用的。当然就像我开篇讲的,如果想要熟练开发出应用,找一套体系化的教程,外加老师的辅助还是有必要的。那些想跨行业进入软件开发领域的,不防尝试一下低码的解决方案,希望能给你带来不一样的体验。

利用gitdiff比较excel-推荐一款小工具(代码片段)

PowerShellDiffExcelisanopen-sourceandtext-basedtooltocompareexcel,itsupportsGitdiff.【前言】ExcelBDD把Excel存储到Git(参见ExcelBDDGuidelineByJavaExample,实现ExcelBDD的三部曲),多位网友担心Excel文件是 查看详情

利用gitdiff比较excel-推荐一款小工具(代码片段)

PowerShellDiffExcelisanopen-sourceandtext-basedtooltocompareexcel,itsupportsGitdiff.【前言】ExcelBDD把Excel存储到Git(参见ExcelBDDGuidelineByJavaExample,实现ExcelBDD的三部曲),多位网友担心Excel文件是 查看详情

小程序如何开发属于自己的一款小程序(代码片段)

...概念小程序与普通网页开发的区别微信开发者工具小程序代码构成项目结构JSON配置文件WXML模板WXSS样式JS逻辑交互小程序的宿主环境宿主环境简介通信模型运行机制组件常用的视图容器类组件常用的基础内容组件其它常用组件API... 查看详情

利用rust与flutter开发一款小工具(代码片段)

1.起因起因是年前看到了一篇Rust+iOS&Android|未入门也能用来造轮子?的文章,作者使用Rust做了个实时查看埋点的工具。其中作者的一段话给了我启发:无论是LookinServer、Flipper等Debug利器,还是Flutter/WebDeb... 查看详情

利用gitdiff比较excel-推荐一款小工具(代码片段)

PowerShellDiffExcelisanopen-sourceandtext-basedtooltocompareexcel,itsupportsGitdiff.【前言】ExcelBDD把Excel存储到Git(参见ExcelBDDGuidelineByJavaExample,实现ExcelBDD的三部曲),多位网友担心Excel文件是二进制,Git本身不能Diff,出现... 查看详情

简单5步,从0开始搭建你的第一款小程序

...,腾讯生态在一次又一次影响用户行为习惯的同时,也为开发者提供了新的思路和技能发展方向。无可置疑,微信小程序开发浪潮已经来临,也将在2018年成为各行业流量红利的集中爆发入口。4月28日,腾讯云联合InfoQ举办的云+... 查看详情

实战|使用微搭低代码3分钟开发表单应用(代码片段)

本文从0到1,以循序渐进的方式利用腾讯云微搭低代码平台搭建出常见的表单展示应用,让您快速上手腾讯云微搭低代码平台核心功能。步骤1:创建应用登录腾讯云微搭低代码控制台。单击新建应用-从空白新建,填写应用信息... 查看详情

小程序如何开发属于自己的一款小程序(代码片段)

...概念小程序与普通网页开发的区别微信开发者工具小程序代码构成项目结构JSON配置文件WXML模板WXSS样式JS逻辑交互小程序的宿主环境宿主环境简介通信模型运行机制组件常用的视图容器类组件常用的基础内容组件其它常用组件API... 查看详情

利用reactnative从0到1开发一款兼容ios和android的app(仿造京东)

...对的~所以~啥事都得谦虚!好了今天介绍的是如何从0到1利用ReactNative开发一款兼容IOS和android的仿造京东的APP,是不是很激动?我保证我说的很通俗易懂,当然,大神请滚蛋,这个不适合你看ok!扯犊子结束,下面开始!第一步:... 查看详情

微搭低代码从入门到精通06-代码编辑器(代码片段)

有初学的同学一直有个疑问,什么叫低代码。低代码的特点是提供了大量的前端组件,我们在开发小程序的时候可以直接拖拽就完成了界面的开发。但是一款APP的开发只有界面是不够的,还需要有交互逻辑,比如... 查看详情

微搭低代码从入门到精通06-代码编辑器(代码片段)

有初学的同学一直有个疑问,什么叫低代码。低代码的特点是提供了大量的前端组件,我们在开发小程序的时候可以直接拖拽就完成了界面的开发。但是一款APP的开发只有界面是不够的,还需要有交互逻辑,比如... 查看详情

在线预约小程序搭建教程4-首页的制作(代码片段)

...的开发5.课费标准、联系人的开发6.数据绑定总结2021年低代码技术火爆,网上的争议也颇多。面对争议,有时候实地的考察一下就可以体会各家争议的地方究竟是什么。本文就结合笔者过往的经验,以一款在线预约小... 查看详情

一个人开发一个产品,小程序从0到1,第4章页面文件(代码片段)

一个小程序应用,由index,logs等多个页面组成。一个页面,包含4个同名,不同后缀的文件,它们分别是负责配置的json,布局的wxml,样式的wxss和业务逻辑的js。其中,wxml和js是不可删除,是必须有的文件。4.1index.json每一个小程... 查看详情

一个人开发一个产品,小程序从0到1,第6章常量变量(代码片段)

程序总得要处理数据,处理数据就要用到内存,至于内存的大小和地址,由变量指定。变量,就是在程序运行过程中它的值是允许改变的量。常量被视为与常规变量一样,不同的是常量的值在定义之后就不能进行改变。6.1常量在... 查看详情

一个人开发一个产品,小程序从0到1,第3章应用文件(代码片段)

...,他也知道你的喜怒哀乐。不懂你的人呢,就给你一大堆代码 查看详情

从0到1,开发一个动画库(代码片段)

...数关系,完成“由帧到值”的计算过程。这一节将在上节代码的基础上谈谈如何给一个完整的动画添加各类事件。在添加各类事件之前,我们先对_loop循环函数进行一些改进:_loop()constt=Date.now()-this.beginTime,d=this.duration,func=Tween[thi... 查看详情

flutter开发从0到1源码(代码片段)

Flutter开发从0到1明天开始又要上班了,你的假期任务完成如何啊?由于平时加班太多了,实在挤不出更多时间,从开始想用Flutter《Flutter开发从0到1(一)需求与准备》写一个完整的APP已经过去三个月了ÿ... 查看详情

从0到一开发微信小程序—小程序框架配置(代码片段)

文章目录其他相关文章1、小程序框架1.1、全局配置1.1.1、Pages1.1.1.1、entryPagePath1.1.1.2、生成页面方式1.1.2、window1.1.3、tabBar与属性1.1.4、常用其他配置1.1.4.1、sitemapLocation1.1.4.2、style1.1.4.3、networkTimeout1.1.4.4、debug1.1.4.5、functionalPages1.... 查看详情