我们前边两篇介绍了账号的申请、注册，工具的安装，云服务的开通。本篇我们介绍一下基础语法。介绍的方法呢我们会结合上微搭低代码的工具一起做个对比。因为低代码工具也产生了非常多的技术概念，但最终在发布成小程序的时候也是按照微信的规范去生成的，把微信开发者工具学会了也可以更深入的了解低代码的相关概念。
全局文件
小程序中是分为全局和页面级两部分。全局是在小程序的所有页面都有效，页面级是只在当前页面中生效。小程序根目录有三个文件app.js、app.json、app.wxss这三个就是全局的。
在低代码中我们是在低码编辑器里看全局文件
我们这里的lifecycle相当于app.js，style相当于app.wxss，那app.json相当于啥呢？app.json是放的所有可以访问到的页面，相当于我们低码中的页面管理部分
在app.js中我们可以设置全局生命周期和全局变量
// app.js App({ onLaunch: function () { if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础库以使用云能力'); } else { wx.cloud.init({ // env 参数说明： // env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源 // 此处请填入环境 ID, 环境 ID 可打开云控制台查看 // 如不填则使用默认环境（第一个创建的环境） // env: 'my-env-id', env:'env-3gsnzui', traceUser: true, }); } this.globalData = {}; } });
onLanch就是一个全局的生命周期函数，在小程序一启动的时候就会加载。那这里边一般干些啥呢？比如你需要加载用户信息、角色的，就可以在这个函数里添加代码。
和低码中不同的是，我们全局对象在设置属性的时候是用的this关键字，这个关键字指向了对象自身，因为我们是在全局对象里，所以this指向的是全局对象。
低码中的全局对象是在变量中定义的，我们可以打开变量看到全局对象
我们这里的global相当于小程序中的globalData。我们可以看一下微搭中的生命周期函数
export default { onAppLaunch(launchOpts) { //console.log('---------> LifeCycle onAppLaunch', launchOpts) }, 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) } }
上述两个文件理解了之后，我们还需要理解一下app.json
{ "pages": [ "pages/index/index", "pages/getOpenId/index", "pages/getMiniProgramCode/index", "pages/deployService/index", "pages/createCollection/index", "pages/uploadFile/index", "pages/selectRecord/index", "pages/updateRecord/index", "pages/updateRecordResult/index", "pages/updateRecordSuccess/index", "pages/sumRecord/index", "pages/sumRecordResult/index" ], "window": { "backgroundColor": "#F6F6F6", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#F6F6F6", "navigationBarTitleText": "云开发 QuickStart", "navigationBarTextStyle": "black" }, "sitemapLocation": "sitemap.json", "style": "v2" }
这里重点是要知道pages的这个结构，每一个可以访问的页面都有一个路径，可以看一下微信开发者工具页面的结构
微信开发者工具，首页是放在数组里的第一个元素，有的同学会问，为啥会有两个Index呢？因为第一个index是文件夹，第二个index才指向的是具体的index.wxml这个才是具体的页面。
低码中也需要理解这个概念，尤其我们在做分享转发的时候，你需要填写分享的路径，不理解小程序这个概念，有时候你就不知道该写啥。
最后一个就是全局样式，如果公共的样式可以写到这个文件里，方便后续页面的引用
/**app.wxss**/ .container { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; } button { background: initial; } button:focus{ outline: 0; } button::after{ border: none; } page { background: #f6f6f6; display: flex; flex-direction: column; justify-content: flex-start; }
这里的语法是CSS的语法，因此有必要学习一下CSS。低代码中的全局样式是在style文件中编制
// icon .job-icon{ display: inline-flex !important; align-items: center; color: rgba(0, 0, 0, 0.4); .weda-image{ object-fit: cover !important; // height: 100% !important; width: auto !important; } &--location{ } } // 搜索 .job-search { margin: 44px 0 22px; &__input{ .weda-ui .weui-cells { margin-top: 0; } .weui-cells{ &::before,&::after{ display: none; } } .weui-cell_active:active:after{ border-radius: 40px; } .weui-cell__bd{ border-radius: 40px; background-color: #F3F3F3; display: flex; align-items: center; justify-content: center; position: relative; padding: 16px 32px 16px 80px; &::before{ content: ''; width: 36px; height: 36px; margin-left: 30px; position: absolute; left: 0; background-size: cover; background-image: url("https://lowcode-9gu72kpiac8de2d6-1252394733.tcloudbaseapp.com/resources/2022-03/lowcode-182749"); } } .weda-ui.weda-input .weui-btn_input-clear{ padding-right: 0; } .weui-cell.weui-cell_form{ padding: 0; } .weda-ui.weda-input input.weui-input{ padding: 0; font-size: 28px; margin: 0; box-sizing: border-box; text-align: left; height: 48px; line-height: 48px; border-radius: 0px; } } } // 图文排版 .job-media{ &__img{ &-main{ width: 100px; height: 100px; } } &__info{ margin-left: 20px; &-title{ font-size: 48px; } &-desc{ font-size: 28px; } } } // 用户信息 .job-user{ &__media{ display: flex; align-items: center; justify-content: flex-end; &-main{ flex-grow: 1; flex-shrink: 1; display: flex; align-items: center; &__img{ flex-grow: 0; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; margin-right: 20px; } &__name{ flex-grow: 1; flex-shrink: 1; font-size: 28px; text-align: left; color:rgba(0, 0, 0, 0.6); } } } } // 标签 .job-tag{ flex-wrap: wrap; &__item{ margin-bottom: 20px; } } // flex .job-flex{ &__value0{ flex-grow: 0; flex-shrink: 0; padding-left: 12px; color: #2262E6; } } // 上推 .job-scroll__up{ .index-top-title{ display: none; } .index-scroll-inside{ overflow: visible !important; // 以下的js计算 padding-top: 250px; } .job-search{ position: fixed; top: 0; left: 0; z-index: 99; margin: 0; right: 0; background: linear-gradient(rgb(34, 98, 230) 0%, rgb(19, 160, 255) 100%); // 以下的js计算 padding: 28px 200px 28px 24px; } }
可以看到低代码中的样式更复杂，会有嵌套关系，所以写起来难度会更大一点。如果样式这块不是太擅长，建议用可视化的方式进行设置，也节约了不少的学习成本。
总结
我们本篇介绍了微信小程序里的全局文件，和低代码工具做了一个横向的对比。代码的方式通常难度更大，低码工具其实是将这些概念进行提炼，以可视化的方式进行设置，大大的降低了开发门槛。感兴趣的同学可以安装一下两个工具，对比一下各种概念，也可以拓宽知识面。
