热门标签 | 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



推荐阅读
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • Android 渐变圆环加载控件实现
    本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件,该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]
  • Android LED 数字字体的应用与实现
    本文介绍了一种适用于 Android 应用的 LED 数字字体(digital font),并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景,能够增强视觉效果。 ... [详细]
  • RecyclerView初步学习(一)
    RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式,除了提供ViewHolder缓存模式,还可以自定义动画,分割符,布局样式,相比于传统的ListVi ... [详细]
  • ASP.NET MVC中Area机制的实现与优化
    本文探讨了在ASP.NET MVC框架中,如何通过Area机制有效地组织和管理大规模应用程序的不同功能模块。通过合理的文件夹结构和命名规则,开发人员可以更高效地管理和扩展项目。 ... [详细]
  • 基于KVM的SRIOV直通配置及性能测试
    SRIOV介绍、VF直通配置,以及包转发率性能测试小慢哥的原创文章,欢迎转载目录?1.SRIOV介绍?2.环境说明?3.开启SRIOV?4.生成VF?5.VF ... [详细]
  • 探讨如何真正掌握Java EE,包括所需技能、工具和实践经验。资深软件教学总监李刚分享了对毕业生简历中常见问题的看法,并提供了详尽的标准。 ... [详细]
  • 本文介绍如何使用布局文件在Android应用中排列多行TextView和Button,使其占据屏幕的特定比例,并提供示例代码以帮助理解和实现。 ... [详细]
  • 本文探讨了在Windows Server 2008环境下配置Tomcat使用80端口时遇到的问题,包括端口被占用、多项目访问失败等,并提供详细的解决方法和配置建议。 ... [详细]
  • Python自动化处理:从Word文档提取内容并生成带水印的PDF
    本文介绍如何利用Python实现从特定网站下载Word文档,去除水印并添加自定义水印,最终将文档转换为PDF格式。该方法适用于批量处理和自动化需求。 ... [详细]
  • 从 .NET 转 Java 的自学之路:IO 流基础篇
    本文详细介绍了 Java 中的 IO 流,包括字节流和字符流的基本概念及其操作方式。探讨了如何处理不同类型的文件数据,并结合编码机制确保字符数据的正确读写。同时,文中还涵盖了装饰设计模式的应用,以及多种常见的 IO 操作实例。 ... [详细]
  • 本文介绍了如何通过 Maven 依赖引入 SQLiteJDBC 和 HikariCP 包,从而在 Java 应用中高效地连接和操作 SQLite 数据库。文章提供了详细的代码示例,并解释了每个步骤的实现细节。 ... [详细]
  • 本文介绍了两种方法,用于检测 Android 设备是否开启了开发者模式。第一种方法通过检查 USB 调试模式的状态,第二种方法则直接判断开发者选项是否启用。这两种方法均提供了代码示例和详细解释。 ... [详细]
  • 解决JAX-WS动态客户端工厂弃用问题并迁移到XFire
    在处理Java项目中的JAR包冲突时,我们遇到了JaxWsDynamicClientFactory被弃用的问题,并成功将其迁移到org.codehaus.xfire.client。本文详细介绍了这一过程及解决方案。 ... [详细]
  • 分享一个简化版的Silverlight链接图项目:Link Map Simplified
    本文介绍了一个使用Silverlight开发的可视化工具,主要用于展示和操作复杂的实体关系图(Graph)。该工具在犯罪调查系统中得到了广泛应用,帮助用户直观地获取和理解相关信息。 ... [详细]
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社区 版权所有