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

初探“微信小小程序”

最近,“微信小程序”这个词占据了朋友圈,大有一番风起云涌之势,当然,还不可能夸张到使原生App开发人员失业这种程度。当然,作为一名技术人员,时刻保持对新技术...

最近,“微信小程序”这个词占据了朋友圈,大有一番风起云涌之势,当然,还不可能夸张到使原生App开发人员失业这种程度。当然,作为一名技术人员,时刻保持对新技术的好奇心是必须的,所以在网上找大神的教程,搭建了一下开发环境,来学习一下这个新的开发框架。

一 项目文件结构

当打开微信小程序的Demo的时候,我个人习惯是先看整个项目的文件结构,先大致弄清这部分是干什么的,那部分又是干什么的,微信小程序基本的文件结构如下图:

图1-微信小程序基本文件结构

首先我们一眼就可以看到,在项目根目录有三个文件,app.js,app.json,以及app.wxss,下面来谈谈我对这三个文件的理解。

1 . app.js

app.js中包含一个App()函数,我把它理解为微信小程序真正意义上的入口,也就是说当启动一个小程序的时候,首先会执行到这里。App()函数用来注册一个小程序,参数为Object类型,可以在其中指定小程序的生命周期函数(理解还不是很透彻), 当然,也可以定义一个全局的数据和函数,

我们可以在页面中调用全局的getApp()方法,获得小程序实例,从而来调用我们定义的全局数据和函数。

2 . app.json

app.json可以对小程序进行全局的配置,比如我们可以配置小程序有哪些页面、窗口表现形式、设置网络超时时间、设置多tab等。下面就是一个简单的配置:

{ 
"pages": [ 
"page/index/index", 
"page/logs/index" 
], 
"window": { 
"navigationBarTitleText": "Demo" 
}, 
"tabBar": { 
"list": [{ 
"pagePath": "page/index/index", 
"text": "首页" 
},{
"pagePath": "page/logs/logs",
 "text": "日志" 
}]
 }, 
"networkTimeout": { 
"request": 10000, 
"downloadFile": 10000 
}, 
"debug": true
}

3 .app.wxss

app.wxss文件比较好理解了,它相当于一个全局的样式表,等同于前端中的css文件,任何页面都可以使用这个样式表,当然,如果某个页面重复定义了某个属性的表现形式的话,则会覆盖app.wxss文件中定义的。

以上三个文件中,app.js和app.json是每个微信小程序必须要有的,app.wxss则根据需要来添加。

在图一的文件结构中,还有三个文件夹目录:images,pages,utils,这种形式就类似我们开发中分包的做法(其实就是)-将具有类型性质的文件或者类分目录存放,这样便于维护项目。

我们来关注下pages目录,这个目录存放了小程序的所有页面。

图2-小程序的页面结构

这里我们定义了两个页面,index(首页)和logs(显示某种日志)。

可以看到,在每个页面中,也有类似前边儿我们所说的app.js,app.json等文件,下面我们就来看看它们具体是什么。

以logs页面为例:

1 .logs.js

我们看一下这个文件中简单的代码:

//logs.js
var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})

如果你有过开发经验或者是js开发经验,那么一样就可以看出,这个类的结构很简单:1.引入了一个外部文件,2.有一个函数,进行了某种处理。

我们看一下官方文档是怎么介绍这个以js结尾的文件的:包含一个Page()函数,Page()函数用来注册一个页面。接受一个object参数,其指定页面的初始数据、生命周期函数、事件处理函数等。它是页面的逻辑文件,页面逻辑在这里处理。

在这个文件中,我们可以定义变量,函数等。

2 .logs.json

app.json是小程序的全部配置文件,那么不难理解,logs.json则是logs页面的配置文件,在这里我们可以配置页面标题等属性。

3 .logs.wxml

wxml文件是页面独有的,它相当于界面,它是与用户交互的入口,微信提供了很多基础组件,例如按钮,文本以及进度条等,都可以在这个文件中配置并显示出具体的效果。

4 .logs.wxss

wxss跟app.wxss文件一样,都是样式表文件,不过每个页面下的这个文件时对于某个页面的,而app.wxss则是全局的样式配置,相同属性的话,logs.wxss会覆盖掉app.wxss中的。

对于页面下的文件配置,我们来看一下官方的说明:

图3-页面文件配置

结语

以上就是微信小程序的整体项目文件结构,由宏观到具体,弄清整体框架后,再一步一步学习其中的细节,可能会更加轻松。

以上就是初探“微信小小程序”的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 三周学会小程序第七讲:提交问题
    截止到上一讲可以支持数据库存储了,所以这一讲开始讲解怎么从小程序发布一个问题并存储到服务器端。下面简单罗列一下本讲的知识点。对了老规矩,文末附源码。对小 ... [详细]
  • 在微信小程序中实现外部链接跳转,可以通过微信官方提供的组件来完成。具体而言,有以下两种方法:1. 首先,可以通过创建一个新的 `` 组件来加载外部网页。这个组件允许在小程序内部嵌入一个网页视图,从而实现外部链接的展示和交互。2. 另一种方法是使用 `wx.navigateToMiniProgram` API,通过调用该接口可以跳转到其他已安装的小程序,实现更丰富的跨应用交互功能。这两种方法各有优缺点,开发者可以根据实际需求选择合适的方式。 ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • 在本文中,我们将探讨如何使用 UniApp 封装小程序 API 请求接口的最佳实践。通过创建 `request.js` 文件,定义基础 URL 并传入后端提供的 URL 作为请求参数。同时,配置请求方法(如 GET、POST)和请求头(例如包含 token 的认证信息),以实现高效、安全的 API 调用。此外,我们还将介绍如何处理请求和响应的错误,以及如何优化请求性能,确保应用在不同平台上的兼容性和稳定性。 ... [详细]
  • 如何构建并优化微信小程序页面的设计与功能
    本文将深入探讨微信小程序页面的设计与优化方法,旨在帮助开发者高效构建功能完备且用户体验良好的小程序。通过实例分析与技术详解,读者能够掌握从页面布局到功能实现的全过程,提升开发技能与应用质量。 ... [详细]
  • 手机上编写和运行PHP代码的最佳软件推荐 ... [详细]
  • 本文详细介绍了如何在微信小程序中使用JavaScript实现图片上传至PHP服务器的方法。通过具体的代码示例,帮助开发者掌握从客户端选择图片、处理图片数据到服务器端接收并保存图片的完整流程。同时,文章还提供了常见问题的解决方案和优化建议,确保上传过程的高效性和稳定性。 ... [详细]
  • 个人总结_软件工程课程——个人总结
    本文由编程笔记#小编为大家整理,主要介绍了软件工程课程——个人总结相关的知识,希望对你有一定的参考价值。前言时长4个与的软件工程实践结束。Alpha与B ... [详细]
  • JVM参数设置与命令行工具详解
    JVM参数配置与命令行工具的深入解析旨在优化系统性能,通过合理设置JVM参数,确保在高吞吐量的前提下,有效减少垃圾回收(GC)的频率,进而降低系统停顿时间,提升服务的稳定性和响应速度。此外,本文还将详细介绍常用的JVM命令行工具,帮助开发者更好地监控和调优JVM运行状态。 ... [详细]
  • 在Spring框架中,基于Schema的异常通知与环绕通知的实现方法具有重要的实践价值。首先,对于异常通知,需要创建一个实现ThrowsAdvice接口的通知类。尽管ThrowsAdvice接口本身不包含任何方法,但开发者需自定义方法来处理异常情况。此外,环绕通知则通过实现MethodInterceptor接口来实现,允许在方法调用前后执行特定逻辑,从而增强功能或进行必要的控制。这两种通知机制的结合使用,能够有效提升应用程序的健壮性和灵活性。 ... [详细]
  • 本书《.NET Core 2.* 开发者指南》是面向开发者的全面学习与实践手册,涵盖了从基础到高级的各个层面。书中详细解析了 .NET Core 的核心概念,包括如何创建 .NET Core 网站,并通过视频教程直观展示操作过程。此外,还深入探讨了 Startup 类的作用、项目目录结构的组织方式以及如何在应用中使用静态文件等内容。对于希望深入了解 .NET Core 架构和开发技巧的开发者来说,本书提供了丰富的实践案例和详尽的技术指导。 ... [详细]
  • 后端开发|php教程numbering,addClass,COOKIE,POST,instanceof后端开发-php教程一:php变量商场项目源码,ubuntu安装其他系统,to ... [详细]
  • 如何在UniApp中实现顶部导航栏的按钮与搜索框显示功能
    本文介绍了如何用uni-app实现顶部导航栏显示按钮和搜索框,感兴趣的同学,可以参 ... [详细]
  • 2017-09-07前端日报精选JavaScriptEventLoop机制详解与Vue.js中实践应用Redux基础与实践如何用js获取虚拟键盘高度?( ... [详细]
  • 番茄计时器微信应用小程序
    番茄时钟微信小程序 番茄时钟微信小程序主要实现了番茄时钟、事务便签、效率统计等功能。 使用的UI组件(css库):colorUI 代码地址:https:github.comzhen ... [详细]
author-avatar
KING逊咖
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有