微信小程序是腾讯推出的一种全新的连接用户与服务的方式,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。就在上一年,腾讯公司的微信开发者工具就加入了微信小程序的开发功能,然而,目前网络上存在的微信小程序开发教程屈指可数,而微信公众平台上的官方文档提供的教程又十分简单。这令初学者在开发微信小程序时十分吃力,尤其是前端开发小白,它们在开发的过程中很容易陷入懵逼的状态。所幸的是,笔者在前段时间参与了微信小程序的开发,在微信小程序的开发方面积累了部分经验。因此,本着共同学习的理念,笔者斗胆写下《微信小程序初探》的系列文章,望各位同僚与我共同学习,不足之处还望指正。


    我们先来看一下开发工具提供给我们的案例

       在示例的主界面我们能看到三个最主要的部分,最左边的是程序视图,我们能够直观地看到我们设计出来的程序的面貌。中间就是文件列表。右边就是编辑部分。本文将要主要介绍官方案例中各个文件的功能和作用。

一  认识各种文件格式

       从demo中我们能看到共有三个文件以及两个目录,我们先来看一下放在外面的三个文件。第一个就是 app.js 文件,也就是JavaScript文件,这一类文件的主要作用是充当微信小程序的脚本文件,开发者可以在 .js文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API

       第二个文件就是app.json文件,app.json文件是配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题的重要文件。注意该文件不可添加任何注释。

       第三个文件就是app.wxss文件,app.wxss文件是规定了小程序的样式,它的原理和网页开发当中的css样式相当。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。当然,每个页面也可以有属于自己的私有的样式文件。

       以上三者便是微信小程序中最重要的三个文件,接下来,我就要介绍另外两个目录,而这两个目录组成了微信小程序的各个页面。在本文,我将着重介绍pages目录

      pages目录里面装着的就是微信小程序的各个页面的代码。在这个demo里面总共有两个页面,一个是index,一个是logs。细心的读者会发现,页面的代码文件组成与app的代码文件组成十分类似,它们都有.js,.json以及.wxss文件,唯一不同的是页面代码文件有.wxml文件。.wxml文件的作用跟网页开发里面的HTML有着相似之处。它定义了页面的结构,这些结构包括了按钮,文本等,它们是组成页面必不可少的元素。可以这么说,.json和.wxss文件都是为.wxml文件服务的。

       值得一提的是,页面的代码文件里面,.js和.wxml文件是必不可少的,而.json和.wxss文件则是可选择的。

       OK,那么微信小程序中的各个格式的文件的介绍就到这里了,接下来,笔者就会以官方提供的demo为例子,简要地解释各个文件里面的代码含义。在这里笔者不会逐个逐个字句解释,而是大概讲解代码中函数的含义,在以后的文章中,笔者会详细讲解。

二 简要的代码解释

        首先我们来看一下app.js文件。

       我们由头来分析代码,我们会发现整个app.js文件的代码都包含在了APP({})当中,它的功能是注册一个小程序,用以制定小程序的生命周期。

       往下走,看到onLaunch()函数。还记得我在上文中提到的小程序的生命周期吗?这个函数代表的是小程序刚刚开始运行时所执行的内容。该函数的具体功能可以在官方提供的api中找到,这里我贴上一张图,里面包含了onLaunch在内的多个代表了小程序生命周期的函数。有兴趣的朋友可自行到微信公众平台查阅。

       那么在该app.js文件中,onLaunch函数充当了接收本地数据的角色。

       往下走,我们看到getUserInfo: function(cb)这里,我们只需知道,该函数的作用是接收用户的信息并且调用登录接口。没接触过JavaScript的朋友可以注意一下,函数名:function(形参)是js中函数声明的方式。

       在getUserInfo: function(cb)函数的下方,我们可以看到globalData,顾名思义,他是微信小程序中的全局变量。

       在大致了解了app.js文件的代码后,我们看一下app.json文件的代码

       代码很简单,分为两个部分,一个是pages,一个是window。pages声明了该小程序由什么页面组成的,比如,该小程序由两个页面组成。同时,pages也声明了小程序的起始页面,也就是放在最上面的页面,pages/index/index。我们不妨试一下,改变上下顺序会怎么样。

       可以看到,程序的起始页面改变了。

       我们再来看一下window,它声明了背景文字样式,导航栏的颜色,文字和字体颜色。我们修改一下,把navigationBarBackgroundColor改为#000,然后把navigationBarTitleText改为微信,再把navigationBarTextStyle改为white。

       显而易见地,导航栏发生了变化。不仅如此,所有页面的导航栏都会改变。不过,如果你想要改变单个页面的导航栏样式,你可以单独修改页面的json文件。

       接下来我们稍微了解一下app.wxss

       正如我上文所说,.wxss文件定义的是css样式,而css样式多如牛毛,我也不一一讲述,新手可以自行试着修改demo中的样式,并结合官方api学习。唯一需要知道的是,.container指的是该样式的class名,开发者在wxml标签中通过不同的class名来选择不同的样式。

         接下来,笔者将讲解index.wxml文件。

       wxml文件与HTML的原理其实很接近,它们都是通过一个一个的标签来把页面构造出来的。首先,我们了解一下标签,标签就是上面代码中有尖括号的代码,标签可以声明页面的基本元素如按钮,文本,输入框等。值得注意的是,wxml中的标签和HTML中的

标签意思接近,大概就是指页面的模块,它们把页面分成不同的模块以方便开发者布局。仔细观察可以发现,每个标签中都有class这个东西,正如笔者在前文所说,它们其实是“选择器”,选择不同名字的样式来显示标签元素。


       OK,本文到这里也差不多结束了,本文主要讲述了微信小程序中的文件结构以及部分代码的解析。我在这里没有把所有页面的js,json,wxss和wxml文件都讲解一遍,原因是它们的原理和我上文所讲的四个文件很接近,读者可自行理解。不理解也没关系,我在以后的文章中会详细解析。

       第一次写有关技术的博客,很多东西表达的不够到位,望海涵。各位看官如果有什么好的建议请一定提出,笔者感激不尽。

推荐阅读更多精彩内容

  • Android分享一个开源项目ShapeView
    从效果图中可以看出,覆盖了App中常用的按钮效果,弧度、按压效果、标签选择、按钮渐变色等。如果用shape.xml…
    遇见编程阅读 915评论 1赞 16
  • 创建圆角Dialog风格的Activity
    一、前言: 在开发中有时我们需要用到dialog,可是系统提供的dialog有时不能满足我们的要求,比如显示位置等…
    i小灰阅读 370评论 0赞 8
  • VUE 请求api的封装
    1.常用封装一(跟element-admin相同) * 1.1在脚手架目录utils目录新建一个request.j…
    抽疯的稻草绳阅读 1,521评论 0赞 24
  • 基于vue3的滚动条组件
    最近开始尝试vue3开发项目,用了ant-design-vue框架,但是发现没有滚动条组件,因此自己尝试着写了一个…
    爱扎马尾的小狮子阅读 354评论 7赞 3
  • 搭建小程序项目架构,你需要注意什么?
    What?小程序还需要搭建架构?你这用的是mpvue?相信小程序开发者们看到这标题都会发出这样的疑问。不急,听我慢…
    karl_wei阅读 277评论 0赞 11

文章来源于互联网:微信小程序初探(一)文件结构与代码分析

发表评论