前言
上一篇我们简单罗列了一下小程序每个目录和文件的作用，今天我们来详细介绍一下每个文件的作用以及包含的内容。
正文
从模块划分来看，小程序主要分为全局配置、页面、基础组件、自定义组件四部分。
全局配置
1、app.json
小程序根目录下的 app.json文件用来对微信小程序进行全局配置。比如我们通过pages属性指定小程序由哪些页面组成。小程序运行时默认会加载数组中配置的第一个页面。
{
"pages": ["pages/index/index", "pages/logs/logs"]
}
也可以通过tabBar配置我们的底部导航
{
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
}
}
更多其他配置可以查看官方文档https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
2、app.js
每个小程序都需要在app.js中调用App方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
举个🌰
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
整个小程序只有一个 App实例，是全部页面共享的。我们可以通过getApp方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。
// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
3、app.wxss
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。与 CSS 相比，WXSS 扩展的特性有尺寸单位（rpx）、样式导入。
其中app.wxss是作用域全局的样式。我们可以在app.wxss里面编写通用样式。比如我们统一设置box-sizing属性
*{
box-sizing:border-box;
}
页面
js
对于小程序中的每个页面，都需要在页面对应的js文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台时执行
},
onReady: function() {
// 页面首次渲染完毕时执行
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行
},
onPullDownRefresh: function() {
// 触发下拉刷新时执行
},
onReachBottom: function() {
// 页面触底时执行
},
onShareAppMessage: function () {
// 页面被用户分享时执行
},
onPageScroll: function() {
// 页面滚动时执行
},
onResize: function() {
// 页面尺寸变化时执行
},
onTabItemTap(item) {
// tab 点击时执行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件响应函数
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
// 自由数据
customData: {
hi: 'MINA'
}
})
json
全局通用的配置我们可以在app.json中进行配置，如果想针对某一个页面单独配置一些属性，比如标题，我们可以通过该json进行覆盖app.json中的配置。
{
"navigationBarTitleText": "我是页面标题"
}
wxml
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。模版还支持 数据绑定、列表渲染、条件渲染、模版 等功能。
<!--数据绑定-->
<view> {{message}} </view>
<!--列表渲染-->
<view wx:for="{{array}}"> {{item}} </view>
<!--条件渲染-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
<!--模板-->
<template name="staffName">
<view>
FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
wxss
只作用于当前页面的样式
基础组件
微信小程序自带的基础组件有很多，比较常用的有text、view、scroll-view、image等等，大家可以通过文档查看https://developers.weixin.qq.com/miniprogram/dev/component/view.html
<view class="container">
<text>文本</text>
</view>
自定义组件
我们可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。在实际开发中用的最频繁，因为在实际的公司项目中一个页面会由非常多的模块组成，如果把所有的模块都放在一个页面来实现，会导致代码非常臃肿，而且难以维护。这个时候我们可以借助自定义组件功能把每个模块进行抽离，减少代码耦合，降低后期维护成本。
举个🌰，我们来定义一个自定义标题组件。
components/head/head.wxml
<view>{{title}}</view>
components/head/head.json
{
"component": true
}
components/head/head.js
Component({
properties: {
// 这里定义了title属性，属性值可以在组件使用时指定
title: {
type: String,
value: '标题',
}
}
})
调用方法
pages/index/index.json
{
"usingComponents": {
"head": "components/head"
}
}
pages/index/index.wxml
<head title="我是标题"></head>
总结
如果有小程序相关的问题或者其他技术相关问题都可以加我微信交流
强力驱动