微信小程序的基本文件解析

分类栏目:小程序教程

160

我们下载的微信小程序源码,里面的文件的构建,很多朋友不明白,不知道再那里修改配置信息,今天就这个问题简单的说一下配置信息的构建


进入正题:

开发小程序的第一步,首先我们得有一个小程序的账号。

这些根据官网上面的一直走就行的了,这里就不做多的解释了,下面就来说一下,小程序的页面构建吧,小程序明白了这些页面的构建,都基本上入门了一大半了。

这里我就着重说一下,小程序里面的每一个文件的作用吧。

通常来说,构建好一个小程序,都有这么多的文件,我们就一个个的来介绍他们的作用吧。

Pages 这个文件夹里面是你小程序的每一个页面,比如index这个文件夹,这个规定是你小程序的入口,不可以改变的,里面的index.js 就是这个index页面的JS文件,index.xvml ,相当于index,html,index.wxss 相当于index.css,他们是规定好已经加载进来的了,我们只需要直接在index.wxss里面写样式,index,js写JS就可以了。

(PS:最好是一个文件夹一个页面,因为里面的文件,只是后缀的不同而已,小落觉得,这个应该就是小程序页面不是很多的原因。)

Utils这个文件里面有一个util,js,它相当于一个注入,或者说是一个方法库,里面可以定义一些公用的方法,把这些方法给暴露出来,暴露出来的方法就是最后面。Expores出来即可,然后在你需要这些方法的页面那里,require进来这个JS,创建一个对象存储它,就能使用里面定义好暴露出来的方法了

module.exports就是将里面的方法给暴露出去了;

在使用的时候

在logs需要用到这个JS,只需要引用进来,然后用util保存起来,

我们就可以直接用util来使用上面暴露出来的formatTime方法了。

接下来是 app.js

这里面就是一个app对象,相当于全局的window,通常定义一些所有页面都用到的方法或者对象,变量等,我们可以将跨页面的变量都储存在这里,和公用的css类库一样,在这里定义的app,js,在所有页面都能调用到。

比如我在 app,js里面的定义了一个方法,wxgetName。

当我们在其他页面需要使用这个方法的时候,直接调用这个方法即可,比如:

App.json 这个东西挺重要的,但是也不难记住,它只是用来对微信小程序进行全局配置。比如决定页面文件的路径、窗口表现、设置网络超时时间等。

PS:如果你小程序里面的页面没有在这里设置路径的话,在小程序里面跳转到这个页面,就会报错的。

比如:一开始官网的小程序里面有个logs页面,它就在app.json定义了这个页面的路径。在访问的时候就没有任何问题。

但是,如果我将它注释了的话…..

它就会报错了,所以说,我们在小程序里面的每一个页面,都必须在app.json里面写出来,在小程序里面配置好这个页面,我们才能正常的访问,不然就会报错的。

nav部分

在app,json里面,有一个功能window是配置nav部分的样式,所谓nav部分就是在小程序顶部的样式。

所有的子页面都能有这个json文件,但是子页面的json只会配置你这个页面的,对于其他页面不会受到影响。但是子页面的json高于app,json的配置。

App.js里面,有一个功能是tabBar 的功能,它是定义底部菜单的按钮链接来的,相当于一个a标签的跳转,但是在全局也是有用的,也能被子页面的json给取代。

在我们访问后台的时候,假如接口太慢,导致用户体验不会,因为常规浏览器默认超时时间是30s左右,在小程序里面,我们可以定义超时的时间的 就是networkTimeout,这个到接口的时候再好好讨论一下吧~

project.config.json 这个是配置这个小程序的发布信息来的,比如兼容什么写法,发布公司,appId,版本号,等各种配置,这里不多介绍了。