Products
GG网络技术分享 2025-03-18 16:14 0
上周在交流群里和一位低码厂商的技术负责人交流，他认为低代码作为开发工具类的产品，需要有从0到1体系化的教程才可以，而且还得有教师进行辅助。否则，学习低代码是有难度的，入门很难。 对于技术负责人的见解，我也深有体会。因为大家习惯了用代码编程，一下子过度到可视化编程，有一个思路上的转变。我们使用代码编程的时候，前端是写标签，后端是写if/else、for循环来执行逻辑处理。
那低代码如何体系化的学习呢？这里我们按照代码方式学习做个对照。
一般如果我们使用微信开发者工具，开发小程序需要安装工具。低码工具不需要安装，是在线进行编程。但和开发者工具一样，低码也是需要绑定小程序的。我们在开发者工具里一般是需要配置自己小程序的appid，如果使用了云开发的，还需要开通云开发。
我们使用低码开发需要在小程序认证那块，绑定自己的小程序。
我这里一个绑定成功了，一个绑定失败了。失败的原因是小程序和我们的低码账号不是同主体，意思是必须以你自己的微信号申请，不能绑定别人的小程序。
我们使用微信开发者工具，打开工具的时候就要求创建项目，所谓的创建项目是在你本地新建一个文件夹，然后按照小程序项目的要求生成对应的目录结构。比如有js、json、wxml、wxss等。
低码中我们讲的创建项目是指创建应用，一个应用就相当于一个项目。不同于小程序，低码的外延更广，可以创建PC端的项目，也可以创建移动端的项目。移动端的项目不仅可以创建小程序，也可以创建H5。
而且比小程序方便的是，低码是可以根据模板创建项目的。所谓的模板是指事先已经开发好的项目，就像我们从github上clone一样。当你clone完毕后整个工程的源代码就都下载到了本地。低码中依据模板新建是将做好的项目安装到你自己的空间里。这样你就有了一套成熟的模板，可以在此基础上进行修改。这样做无疑大大的提高了开发效率。
微信小程序独创了一套语法，分别是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)
}
}
小程序一般只能解决前端交互的功能，后端你必须自己开发功能，安装到服务器上还需要暴露接口。但是一般我们的后台服务都是需要鉴权的，不可能像网站一样公开使用。低代码提供了后端的云函数，直接使用就可以。如果官方提供的不满足要求，还可以自己编写代码
/**
* 使用 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
}
};有些人可能随着年龄的增长，一个是希望学个技能，另外也是看到IT行业薪水比较高，希望学习编程。问年龄是学习编程的限制条件么？如果只是兴趣，我还是建议你学习低码，因为工具解决了编程的门槛问题，也可以快速开发出应用来。如果是希望就业，其实低码也是一个不错的入门方向，毕竟老板们只是提出需求，你提供给他一套可用的软件即可。至于你是用拖拽开发，还是手写代码，老板是不太关心的。将来自己在某个行业积淀够了，养活自己不是太大的问题。
我们今天用了一定的篇幅概要的介绍了一下使用低码是如何从0到1构建应用的。当然就像我开篇讲的，如果想要熟练开发出应用，找一套体系化的教程，外加老师的辅助还是有必要的。那些想跨行业进入软件开发领域的，不防尝试一下低码的解决方案，希望能给你带来不一样的体验。
更多Android进阶技术，可私信发送暗号“核心笔记”或“手册”即可交流学习，资料领取！
看完微信小程序的前端代码真的让我热血沸腾啊，代码逻辑和设计一目了然，没有多余的东西，真的是大道至简。
废话不多说，直接分析前端代码。个人观点，难免有疏漏，仅供参考。
文件基本结构：
图1
先看入口app.js，app(obj)注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。其他文件可以通过全局方法getApp()获取app实例，进而直接调用它的属性或方法，例如（getApp().globalData）
| //app.jsApp({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync(\'logs\') || [] logs.unshift(Date.now()) wx.setStorageSync(\'logs\', logs) }, getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == \"function\" && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == \"function\" && cb(that.globalData.userInfo) } }) } }) } }, globalData:{ userInfo:null } }) |
我理解app.js为入口初始化文件，也是提供全局API拓展的地方。下边分析下自带的几个方法和属性
onLaunch钩子函数会在小程序初始化完成后会自动执行一次，然后在小程序生命周期里如果你不主动调用onLaunch，它就不会在执行。
| var logs = wx.getStorageSync(\'logs\') || [] 获取本地缓存中的logs属性，如果值为空，那么设置logs=[] 与HTML5中的localStorage作用相似 logs.unshift(Date.now()) 当前登录时间添加到数组中 wx.getStorageSync(\'logs\')获取本地缓存数据 |
getUserInfo函数，顾名思义就是获取登录用户信息，相当于此函数提供了获取用户信息的接口，其他页面不调用自然不会执行。其他页面通过getApp().getUserInfo(function(userinfo){console.log(userinfo);})这种方式调用该方法，获取用户信息。
| getUserInfo:function(cb){//参数为cb,类型为函数 var that = this if(this.globalData.userInfo){//用户信息不为空 typeof cb == \"function\" && cb(this.globalData.userInfo)//如果参数cb的类型为函数，那么执行cb,获取用户信息； }else{//如果用户信息为空，也就是说第一次调用getUserInfo，会调用用户登录接口。 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { console.log(res) that.globalData.userInfo = res.userInfo//把用户信息赋给globalData，如果再次调用getUserInfo函数的时候，不需要调用登录接口 typeof cb == \"function\" && cb(that.globalData.userInfo)//如果参数cb类型为函数，执行cb,获取用户信息 } }) } }) } } |
globalData对象用来存储全局数据，在其他地方调用
然后简要分析下app.json文件,该文件作用是对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等、
最重要的是pages属性，必填，为数组，数组内的元素为字符串性文件路径，指定小程序由哪些页面组成，第一项必须是小程序初始页面。
| { \"pages\":[ \"pages/index/index\", \"pages/logs/logs\" ], \"window\":{ \"backgroundTextStyle\":\"light\", \"navigationBarBackgroundColor\": \"#fff\", \"navigationBarTitleText\": \"WeChat\", \"navigationBarTextStyle\":\"black\" } } |
然后来看下项目index和logs文件夹。微信小程序初始项目把每个页面相关的js、wxss、wxml放在各自的文件，这样看起来结构清晰明朗很多。
先来看index文件夹，即小程序初始页面。index文件夹下为index.js、index.wxml、index.wxss三个小文件。小程序把js、css、html代码分离开来，放在独自的文件里，各司其职。js和样式表文件名必须与当前文件夹的wxml文件名保持一致，这样才能保证js和样式表的效果能够在页面中显现出来。我很欣赏这样的设计理念，整齐划一，职责明确，减轻代码设计复杂度。
index.wxml，这就是常见的模板文件，数据驱动，有过前端mvc、mvvm项目开发的对这个一定不会陌生，毕竟这是基于react开发的。
| <!--index.wxml--> <view class=\"container\">//视图容器 <view bindtap=\"bindViewTap\" class=\"userinfo\"> //bindtap为容器绑定点击触摸事件，在触摸离开时触发bindViewTap事件处理函数，bindViewTap通过index.js page()设置添加 <image class=\"userinfo-avatar\" src=\"{{userInfo.avatarUrl}}\" background-size=\"cover\"></image> //大双括号的变量来自于index.js的data对象解析成对应的值，而且是实时的 <text class=\"userinfo-nickname\">{{userInfo.nickName}}</text> </view> <view class=\"usermotto\"> <text class=\"user-motto\">{{motto}}</text> </view> </view> |
index.js，与reaact用法几无二异，换汤不换药。page()来注册一个页面。接受一个OBJECT 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
| var app = getApp() // 获取入口文件app的应用实例Page({ data: { motto: \'Hello World\', userInfo: {} }, //自定义事件处理函数，点击.userinfo的容易触发此函数 bindViewTap: function() { wx.navigateTo({//全局对象wx的跳转页面方法 url: \'../logs/logs\' }) }, onLoad: function () {//发生页面加载时，自动触发该生命周期函数 console.log(\'onLoad\') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据，页面自动渲染 that.setData({ userInfo:userInfo }) }) } }) |
index.wxss文件只渲染当前所属页面，会覆盖全局app.wxss同一样式。
再分析下logs日志文件夹，logs文件夹下为logs.wxml、logs.js、logs.wxss、logs.json，同理保证同名，才能完成效果渲染。
logs.wxml文件
| <!--logs.wxml--> <view class=\"container log-list\"> <block wx:for=\"{{logs}}\" wx:for-item=\"log\"> //block容器作用，无其他实际含义。wx:for作用：遍历logs数组，遍历多少次，block块就会复制多少次，for-item等同于为 遍历元素起一个变量名，方便引用。 <text class=\"log-item\">{{index + 1}}. {{log}}</text> </block> </view> |
logs.js 文件
| //logs.js var util = require(\'../../utils/util.js\') //util.js相当于一个函数库，我们可以在这个文件内自定义扩展和封装一些常用的函数和方法 Page({ data: { logs: [] }, onLoad: function () { this.setData({ logs: (wx.getStorageSync(\'logs\') || []).map(function (log) { //通过wx.getStorageSync获取本地缓存的logs日志数据 return util.formatTime(new Date(log))//日期格式化 }) }) } }) |
logs.json文件
| { \"navigationBarTitleText\": \"查看启动日志\" //当前页面配置文件，设置window当前页面顶部导航栏标题等相关内容 } |
基本页面结构和逻辑就这么简单，暴露给我们的没有一点令人费解的东西。
以上就是微信小程序前端源码逻辑和工作流程解析的详细内容，更多请关注网站的其它相关文章！
Demand feedback
