微信小程序学习日志:代码结构简介以及配置文件的区别

原创 2018年04月15日 12:22:49

打开小程序的微信开发者工具后,在编辑器界面的可以看到有app.js,app.json,app.wxss,project.config.json这四个文件和pages,utils这两个文件夹。


接下来谈谈每个文件和文件夹的作用

project.config.json

保存微信开发者工具的配置信息。微信小程序开发者工具自动在根目录下生成这个文件,用户可以在需要的时候导入这个文件从而导入文件中包含的个性化配置。

app.js

帮我们的微信小程序注册小程序应用

app.json

进行小程序的全局配置,比如配置网络请求的超时时间,窗口的表现,页面注册路径等。

app.wxss

微信小程序全局的一个样式

pages文件保存了小程序的页面信息,pages文件夹下有js文件,json文件,wxml文件,wxss文件这四种文件


js文件保存了页面逻辑和数据交互,json文件保存了页面配置信息,wxml文件展示了页面元素和内容,wxss文件设置小程序页面的样式。

utils文件夹保存了工具函数,达到工具复用的目的。


从上面我们可以发现配置文件有两种,一种是app.json的全局配置文件,另外一种是页面配置文件。两种配置文件的联系和区别可以由下面的极客科技课程截图来表现,需要注意的是页面配置项如果和全局配置项重复了,那么页面配置项会覆盖掉全局配置项。




作为新手,我对于小程序理解不太到位。我认识多了一丢丢之后发现其实文件夹应该是可有可无的,但以app开头的全局配置文件和四个页面配置文件是会存在的,不一定存放在文件夹里面而已。文件夹的设置是为了更方便简洁地开发小程序。

微信小程序开发手记之一:项目的代码结构

编码前的准备工作 登陆微信开发者账号。 如有账号,直接登陆,没有,申请一个即可。输入账号密码登陆时,需要手机扫码确认。 查看文档 登陆后台后,在网页右上角,点击文档,就能进入文档界面,与我们密切...
  • u013673799
  • u013673799
  • 2017-04-13 11:51:24
  • 2312

微信小程序学习笔记——第一弹:小程序代码结构

    近来被微信小游戏强势刷了一波后,萌生了学习微信小程序/小游戏的冲动~    作为一个马上就要毕业的学生狗(。☉౪ ⊙。),学习一下新技术,顺道还能丰富自己的简历,简直不能再美滋滋了~~~   ...
  • qq_33740308
  • qq_33740308
  • 2018-03-03 22:25:52
  • 39

微信小程序之简介(一)

小程序: 对于微信小程序,张小龙是这样说的:小程序是一种不需要下载安装即可使用的应用,它实现了应用「触手可及」的梦想,用户扫一扫或搜一下即可打开应用。也体现了「用完即走」的理念,用户不用关心是否安装太...
  • Seven_May
  • Seven_May
  • 2017-01-13 11:03:06
  • 586

微信小程序日记(一)

安装好开发环境之后打开,输入appid、项目名、目录,由于目前没有申请appid所有选择无appid,创建完成!大概是4类文件,js、wxml、wxss、json。 js:脚本文件;wxml:页面结构...
  • a61595579
  • a61595579
  • 2017-03-29 17:29:35
  • 1052

微信小程序介绍

简单介绍小程序是一种不需要下载安装即可使用的应用。实质微信小程序就是Hybrid技术的应用。 Hybrid App(混合模式移动应用)。 小程序能够更多的可以更多的调用手机本身的功能(如位置信息,...
  • zhangsx101
  • zhangsx101
  • 2016-10-11 19:48:23
  • 5274

关于学习RN和微信小程序一个月随感(上)

2016.10-11.14是我学习(业余时间)RN和微信小程序一个月了,学了一些控件和事件。现在在这里做一下整理和总结。 第一节,ReactNative的安装和集成...
  • u012930328
  • u012930328
  • 2016-11-14 13:20:42
  • 1483

微信小程序的吐血日记(1)

微信小程序的吐血日记 工作需要,开始接触微信小程序,一脸懵逼的踏上挖坑之旅...
  • u013632854
  • u013632854
  • 2017-03-27 22:47:47
  • 642

微信小程序-简介

       以前我的手机是16g的,想要下载新的软件,就必须卸载掉一些不经常用的其他软件,现在有了微信小程序,用起来真的方便了很多。       微信小程序是一种运行在微信客户端,继微信订阅号、服务...
  • yiwangxiblog
  • yiwangxiblog
  • 2018-02-25 18:55:02
  • 152

哈欠:微信小程序开发工具的数据,配置,日志等目录在哪儿? 怎么找?

原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=359 本文由本站halfyawn原创:感谢原创者;如有疑问,请在评论内回复 ...
  • u012421719
  • u012421719
  • 2016-11-12 13:33:22
  • 3428

微信小程序学习(2)_开发准备和开发工具简介

一、下载微信小程序开发工具1.进入这个网址: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=147505205...
  • Two_Water
  • Two_Water
  • 2016-10-09 00:40:43
  • 3195
收藏助手
不良信息举报
您举报文章:微信小程序学习日志:代码结构简介以及配置文件的区别
举报原因:
原因补充:

(最多只允许输入30个字)