微信小程序从入门到精通-基础篇（2）
前言
上一篇我们简单罗列了一下小程序每个目录和文件的作用，今天我们来详细介绍一下每个文件的作用以及包含的内容。
正文
从模块划分来看，小程序主要分为全局配置、页面、基础组件、自定义组件四部分。
全局配置
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": "日志"
}
]
}
}
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: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
title: {
type: String,
value: '标题',
}
}
})
调用方法
pages/index/index.json
{
"usingComponents": {
"head": "components/head"
}
}
pages/index/index.wxml
<head title="我是标题"></head>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
