代码从0到1创建小程序项目详解流程

网友投稿 536 2023-11-08

目录1 搭建开发工具2 创建项目3 功能开发4 后端实现总结

我们使用代码编程的时候,前端是写标签,后端是写if/else、for循环来执行逻辑处理。

低代码从0到1创建小程序项目详解流程

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

1 搭建开发工具

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

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

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

2 创建项目

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

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

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

3 功能开发

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

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

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

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

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

?
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
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 

总结

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

到此这篇关于低代码从0到1创建小程序项目详解流程的文章就介绍

您可能感兴趣的文章:从0到1搭建element后台框架优化篇(打包优化)从0到1搭建Element的后台框架的方法步骤JS定时器实现数值从0到10来回变化JS实现环形进度条(从0到100%)效果微信小程序HTTP请求从0到1封装

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:电子政务内涵(电子政务内涵是什么)
下一篇:信创系统改造
相关文章

 发表评论

暂时没有评论,来抢沙发吧~