了解小程序的构成

最近发布了一批搞笑的文字类小程序&＃xff1b;故记录一下有关小程序的一些开发心得。开篇就拿样例工程入手。

此篇主要是介绍一下小程序样例工程的目录结构&＃xff0c;以及小程序的文件构成。另外还对于自己认为callback获取用户信息的疑点做出了一些说明。

小程序样例工程&＃xff08;QuickStart&＃xff09;目录结构

│ app.js
│ app.json
│ app.wxss
│ jsconfig.json
│ project.config.json
│
├─.vscode
│ settings.json
│
├─pages
│ ├─index
│ │ index.js
│ │ index.wxml
│ │ index.wxss
│ │
│ └─logs
│ logs.js
│ logs.json
│ logs.wxml
│ logs.wxss
│
├─typings
│ wx.d.ts
│
└─utilsutil.js


注意&＃xff1a;因我使用了vscode作为小程序的开发工具&＃xff0c;故会自动增加.vscode以及typings(vscode小程序开发插件自动增加)目录

官网中的API文档有提到不同文件的含义

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件


JSON文件

在项目中有以下几个JSON文件 app.json、project.config.json、pages/logs/logs.json

app.json

app.json 是对当前小程序的全局配置&＃xff0c;包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等

pages用于描述当前小程序所有页面路径&＃xff08;让微信客户端知道当前你的小程序页面定义在哪个目录&＃xff09;

window定义小程序所有页面的顶部背景颜色。

工具配置 project.config.json

project.config.json 是指个性化的配置信息&＃xff1b;如配置版本库、该小程序是发布到哪个appId&＃xff0c;以及工程名等...

页面配置 page.json

为每个page定义顶部颜色、是否允许下拉刷新等

该文件在page中可有可无&＃xff0c;如果不存在&＃xff0c;则默认为app.json的配置&＃xff1b;存在则以该文件的配置为准。

WXML 模板

WXML&＃xff08;WeiXin Markup Language&＃xff09;是框架设计的一套标签语言&＃xff0c;结合基础组件、事件系统&＃xff0c;可以构建出页面的结构。简单来说&＃xff1a;WXML 充当类似 HTML 的角色。

而且小程序是基于MVVM的开发模式&＃xff0c;对于已经熟悉Vue、React等前端开发框架的话&＃xff0c;会很容易上手。另外有个WXML的一些数据绑定、事件等可参考官网API&＃xff1a;WXML

需要注意的是小程序本身已经封装了属于自身的标签: view, button, text 等等&＃xff1b;具体用法可以在官网API中了解&＃xff1a;组件说明

WXSS 样式

也就是小程序的页面样式&＃xff0c;官网有提到app.wxss 作为全局样式&＃xff0c;会作用于当前小程序的所有页面&＃xff0c;局部页面样式 page.wxss 仅对当前页面生效。

另外WXSS 在底层支持新的尺寸单位 rpx &＃xff0c;开发者可以免去换算的烦恼。也就是说&＃xff0c;rpx是类似于rem等单位尺寸&＃xff1b;但rpx不需要要增加根大小&＃xff0c;直接使用即可。

JS 交互逻辑

该文件是作为小程序的交互逻辑文件&＃xff1b;处理相关交互逻辑。 在此可查看与小程序交互逻辑API&＃xff1a;交互逻辑API

小程序的启动

微信客户端在打开小程序之前&＃xff0c;会把整个小程序的代码包下载到本地。

小程序启动之后&＃xff0c;在 app.js 定义的 App 实例的 onLaunch 回调会被执行

整个小程序只有一个 App 实例&＃xff0c;全部页面共享

App实例相关回调函数说明

对于样例工程中&＃xff0c;callback的理解

下面先看看样例工程中的app.js

//app.js
App({onLaunch: function () {// 展示本地存储能力var logs &＃61; wx.getStorageSync(&＃39;logs&＃39;) || []logs.unshift(Date.now())wx.setStorageSync(&＃39;logs&＃39;, logs)// 登录wx.login({success: res &＃61;> {// 发送 res.code 到后台换取 openId, sessionKey, unionId}})// 获取用户信息wx.getSetting({success: res &＃61;> {if (res.authSetting[&＃39;scope.userInfo&＃39;]) {// 已经授权&＃xff0c;可以直接调用 getUserInfo 获取头像昵称&＃xff0c;不会弹框wx.getUserInfo({success: res &＃61;> {// 可以将 res 发送给后台解码出 unionIdthis.globalData.userInfo &＃61; res.userInfo// 由于 getUserInfo 是网络请求&＃xff0c;可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}}})},globalData: {userInfo: null}
})


上面有关callback的的疑问大多都在

if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)
}


其实 userInfoReadyCallback 可以换成你想要的命名。

我们在index.js中可以看到有这样的代码:

const app &＃61; getApp()
......// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback &＃61; res &＃61;> {
this.setData({userInfo: res.userInfo,hasUserInfo: true
})
}
......


结合app.js、index.js的代码&＃xff0c;可以得出callback的作用&＃xff1a;


//app.js
if (this.userInfoReadyCallback) { //是否定义了userInfoReadyCallbackthis.userInfoReadyCallback(res) //定义后就调用该函数&＃xff0c;并且传入res的参数信息
}//index.js
//此处定义了function userInfoReadyCallback(res)&＃xff0c;注意app.userInfoReadyCallback&＃xff1b;也就是在app.js中定义了userInfoReadyCallback&＃xff1b;故在执行获取用户信息的时候&＃xff0c;会将用户信息设置到index.wxml页面的data中
app.userInfoReadyCallback &＃61; res &＃61;> {
this.setData({userInfo: res.userInfo,hasUserInfo: true
})
}


最后有关 js 的 callback 可以参考一下&＃xff1a;Understand Javascript Callback Functions and Use Them 文章。

后续将介绍&＃xff0c;在小程序中使用Promise。