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

Happy柠檬 · 发布于 2023-6-16 10:27:58

上周在交流群里和一位低码厂商的技术负责人交流，他认为低代码作为开发工具类的产品，需要有从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语法停止编程

exportdefault{asynconAppLaunch(launchOpts){//console.log('---------> LifeCycle onAppLaunch', launchOpts)const{OPENID,FROM_OPENID}=await app.utils.getWXContext()let userId =FROM_OPENID||OPENIDif(!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=asyncfunction(params, context){// params 即为入参定义的构造, 可以在 request 的恳求配置中使用 paramstry{
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构建应用的。当然就像我开篇讲的，假设想要熟练开发出应用，找一套体系化的教程，外加教师的辅助还是有必要的。那些想跨行业进入软件开发领域的，不防尝试一下低码的处置方案，希望能给你带来不一样的体验。