微信小程序开发基础（一）

一、小程序的目录结构和配置
首先我们来看下微信小程序的创建的时候自带的目录结构

2A8C039B-9220-459E-92DE-265C4B162FAE.png

从上图我们可以看出目录的结构大概分为4个文件
.js 、.json 、 .wxml 、wxss 四个文件
先来解释下，这4个文件具体有什么用，分别些什么代码。还是用网上的图片来表达吧

BB8DE40E-4240-48D9-8893-E2FBA315706F.png

然后我们来看下整个App的配置。我们可以在app.json里面来进行配置，在配置里面我们可以进行下面的这些配置


下面看下这些配置的效果图

E5D6AB1B-83A5-44B7-852C-8E27D4E99BF2.png

再来看下三个文件怎么引用外部文件的

.js 里面是 
var WxParse = require('../../../wxParse/wxParse.js');
.wxml
 
.wxss
@import "../../../wxParse/wxParse.wxss";

二、微信小程序的生命周期
1.注册程序
App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

7A23CAAB-9C4B-4D47-B525-D20D95B65948.png

前台、后台定义：
当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。
onLaunch, onShow 参数

9E44FBE0-1267-48F0-80F1-14E3FF905651.png

2.注册页面
Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

object 参数说明：

7466480C-542A-48EB-ACA9-F4209F1B9575.png

onLoad: 页面加载

一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。

onReady: 页面初次渲染完成
一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期

onShow: 页面显示
每次打开页面都会调用一次。

onHide: 页面隐藏
当navigateTo或底部tab切换时调用。

onUnload: 页面卸载
当redirectTo或navigateBack的时候调用。


onPullDownRefresh: 下拉刷新
监听用户下拉刷新事件。
需要在config的window选项中开启enablePullDownRefresh。
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onReachBottom: 上拉触底
监听用户下拉触底事件。

onPageScroll: 页面滚动
监听用户滑动页面事件。
参数为 Object，包含以下字段：scrollTop 页面在垂直方向已滚动的距离（单位px）


onShareAppMessage: 用户转发
只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
用户点击转发按钮的时候会调用
此事件需要 return 一个 Object，用于自定义转发内容

6759AADB-9B04-4C4E-8886-D2441074B580.png

B8D3D8F6-BD21-42BB-948A-0AEFBC3DB641.png