热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

了解小程序的构成

2019独角兽企业重金招聘Python工程师标准前言最近发布了一批搞笑的文字类小程序;故记录一下有关小程序的一些开发心得。开篇就拿样例工程入手。此篇主要是介绍一

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

前言

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

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

样例工程

小程序样例工程(QuickStart)目录结构

│ 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

注意:因我使用了vscode作为小程序的开发工具,故会自动增加.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 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等

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

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

工具配置 project.config.json

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

页面配置 page.json

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

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

WXML 模板

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

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

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

WXSS 样式

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

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

JS 交互逻辑

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

小程序的启动

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

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

整个小程序只有一个 App 实例,全部页面共享

App实例相关回调函数说明

对于样例工程中,callback的理解

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

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

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

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

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

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

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

结合app.js、index.js的代码,可以得出callback的作用:


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

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

后续将介绍,在小程序中使用Promise。


转:https://my.oschina.net/u/1863616/blog/1833694



推荐阅读
author-avatar
爱在西元前2502938591
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有