其实你已经知道了小程序的文件结构

上一节讲到,小程序的页面由三部分组成:

视图(.wxml)、逻辑(.js)、样式(.wxss)。

我们这次重新展开文件结构:

小程序用到的文件类型只有四种,正如你所看到的那样。

可是我还是要展开说一下,但这里就不做很细的分析了,直接说出结论:

根目录的app.js、app.json、app.wxss的代码作用域是全局的。

app.js

这个文件的内容是全局的程序逻辑,也可以理解为程序的入口,但是我这样说肯定不是很好理解,还是惯例,用前端的思维去认识小程序的全局app.js。

我有如下文件:

这里的base.js就相当于小程序的app.js,它里面声明的是其他页面可能会用到的变量。与前端不同的是,小程序的app.js不需要每个页面都去手动引用就可以访问。

我们上一节中提到的userInfo就是在这个app.js中定义的全局变量。

 

app.json

它是全局的配置文件。

Pages是一个数组,它声明了小程序有哪些页面,如上图我们看到,当前这个程序有index和log两个页面。

需要注意的是:我们新建一个页面之后,需要手动到app.json里将刚刚新建的页面添加到pages数组中才能被访问。

window是一个json对象,通过代码我们不难看出,它配置的是应用程序全局的样式以及标题。

 

这些样式要在这里配置,而不是在wxss里面用css控制的原因是:

wxml没有定义顶部标题的标签,无法用css控制其样式。

 

app.wxss:

就是一个全局的css样式,不过多介绍了,大家都看得懂的。

 

 

该是时候看文档了

之所以没有从一开始就照着文档照本宣科,是因为我自己也是一个新人,我当初就是上来就看文档,相当于直接从前端,嗖的一下就转到了小程序,wxml和数据驱动这块就足以让我喘不过气,所以,才带领大家从前端缓慢过渡到小程序。

 

不废话,直接看文档。

文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/

 

从上一节到说到现在,说了这么多,其实只是说了“简易教程”部分的内容。

 

“框架”是对小程序整体框架的详细介绍。

“组件”可以理解是对HTML标签功能的拓展和封装,一些常用的进度条、表单、轮播等都在里面有详细的说明,还是比较强大。

“API”是调用微信功能和系统功能模块用的,有网络请求、媒体控制、画布、调用手机硬件等。

 

写到这里我已经不知道怎么去更加清晰地去介绍后面的内容了,因为文档已经十分详尽,我怕我按照自己的理解去写教程,会有所遗漏,误人子弟,毕竟我写出来的东西,肯定是没有官方这么原汁原味的。

 

这个系列我之后还是会持续更新,但是可能很多还是会按照文档来,但会把之后每一节讲到的东西,都循序渐进地做一些小Demo。

 

本节完…

 

微信小程序开发系列(二)小程序的全局文件的更多相关文章

  1. WordPress版微信小程序开发系列(二):安装使用问答

    自WordPress版微信小程序发布开源以来,受关注的程度超过我原来的想象.这套程序主要面对的用户是wordpress网站的站长,如果wordpress站想在微信的生态圈得到推广,小程序成为一种重要的 ...

  2. 微信小程序开发系列二:微信小程序的视图设计

    大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...

  3. 微信小程序开发系列五:微信小程序中如何响应用户输入事件

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

  4. 微信小程序开发系列六:微信框架API的调用

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

  5. 微信小程序开发系列七:微信小程序的页面跳转

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

  6. 微信小程序开发系列教程三:微信小程序的调试方法

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hel ...

  7. 微信小程序开发系列四:微信小程序之控制器的初始化逻辑

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 这个教程的前两篇文章,介绍了如何 ...

  8. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  9. 微信程序开发系列教程(二)使用JavaScript给微信用户发送消息

    我之前的文章 微信程序开发系列教程(一)开发环境搭建 介绍了微信开发环境的搭建,这篇文章我们就来一步步开发一些具体的功能. 功能需求:当有微信用户关注了您的公众号之后,您用JavaScript发送一个 ...

  10. ASP.NET4.5Web API及非同步程序开发系列3

    ASP.NET4.5Web API及非同步程序开发系列(3) 接着上一篇博客的内容做一个补充,正好是一个大哥提出来的,我们看看一个有趣的现象. 请求相关问题的补充: 我们先在Controller中的定 ...

随机推荐

  1. Linux内核源代码目录树结构

    Linux内核源代码目录树结构. arch:包含和硬件体系结构相关的代码,每种平台占一个相应的目录.和32位PC相关的代码存放在i386目录下,其中比较重要的包括kernel(内核核心部分).mm(内 ...

  2. iOS开发——实时监控网速(仅作参考,发现一点问题)

    开发中用到获取网速的地方,应该就两种: 1.下载速度,这种可以直接在接受数据的地方统计计算.这个就不讲了. 2.获取手机网卡的数据,可以监控网卡的进出流量,下面就是. #import "Vi ...

  3. sublime text 配置文件中文说明

    原文地址:http://www.feelcss.com/sublime-text-2-settings.html // While you can edit this file, it's best ...

  4. android测试之——Instrumentation(一)

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 感谢您支持我的博客,我的动力是您的支持和关注!如若转载和使用请注明转载地址 ...

  5. Seajs是什么及其优缺点&如何使用?

    这篇文章主要介绍了Seajs的相关知识和和学习心得,适合刚接触SeaJS的同学,需要的朋友可以参考下,有更好的新手教程或文档,欢迎推荐.分享! 1.Seajs简介   Seajs,一个Web模块加载框 ...

  6. (一)Javascript基础知识

    一,五种基本数据类型和一种复合数据类型. 五种基本数据类型 1,undefined 2,null 3,string 4,number 5,boolean 6,复合数据类型(Object,Array,D ...

  7. Android线程之Thread 、Runnable 的两个例子

    Thread例子: package fy.test; import android.app.Activity; import android.os.Bundle; import android.os. ...

  8. 学习c++语言应该牢记的50条准则,同样学习其他语言也一样

    1.把C++当成一门新的语言学习(和C没啥关系!真的.): 2.看<Thinking In C++>,不要看<C++变成死相>: 3.看<The C++ Programm ...

  9. 【 bzoj4537】HNOI2016 最小公倍数

    首先将边按a的值分组,每$\sqrt{m}$一组. 对于每一组,将符合一组a的询问选出来,将这些询问和这一块之前的边(a一定小于这些询问)按b排序,然后交替插入,询问,对于一个询问,在当前块也有可能有 ...

  10. md5-linux_shell

    linux shell提供md5sum用于计算校验MD5值. md5sum - compute and check MD5 message digest md5sum [OPTION]... [FIL ...