小程序开发入门指南（基础）

1、 准备工作

1.注册微信小程序

注册页面.png

2.微信小程序开发工具下载地址

3.Applet APi文档地址

准备微信号

2、 小程序正式启动

2.1.创建小程序项目

获取相应的appid，在微信小程序管理后台创建项目

创建小程序页面.jpg

2.2项目代码结构

1、 app。Js是小程序的脚本代码。在这个文件中，我们可以侦听和处理小程序的生命周期函数，并声明全局变量。调用框架提供的富API，例如本例中本地数据的同步存储和同步读取。

2、 app。Json是整个小程序的全局配置。在这个文件中，我们可以配置小程序由哪些页面组成、小程序窗口的背景色、导航栏的样式和默认标题。请注意，此文件中不能添加任何注释。

3、 app。wxss是整个applet的通用样式表。我们可以直接在wxss中声明的页面组件样式规则的class属性上使用app。

在实例程序的代码中，我还有两个文件夹，一个是pages，另一个是utils，其中utils是用于存储通用工具类方法的文件夹，pages是用于存储所有页面的文件夹。让我们关注这个页面。在这个示例中，我们有两个页面，索引页面和日志页面，即欢迎页面和小程序启动日志的显示页面。它们都在pages目录中。微信小程序中每个页面的[路径+页面名称]需要写在app Json页面中，页面中的第一页是小程序的主页。

每个小程序页面由四个不同的后缀文件组成，它们在相同的路径下具有相同的名称，例如索引。js，索引。wxml，索引。wxss和索引。json带有js后缀的文件是脚本文件，带有。json后缀是配置文件，带有。wxss后缀是样式表文件，带有。wxml后缀是页面结构文件。

项目代码结构.png

2.3.JS基本页面配置

第页({

/**

*页面的初始数据

*/

数据：{

},

/**

*生命周期功能——监听页面加载

*/

onLoad:函数（选项）{

},

/**

*生命周期函数——聆听页面第一次呈现的完成情况

*/

onReady:函数（）{

},

/**

*生命周期功能——监控页面的显示

*/

onShow:函数（）{

},

/**

*生命周期功能——隐藏监听页面

*/

onHide:函数（）{

},

/**

*生命周期功能--侦听页面卸载

*/

onUnload:函数（）{

},

/**

*与页面相关的事件处理功能——监听用户下拉操作

*/

onPullDownRefresh:函数（）{

Wx。stopPullDownRefresh（）//停止当前页面的下拉刷新

},

/**

*页面拉底事件的处理功能

*/

onReachBottom：函数（）{

},

/**

*用户单击右上角共享

*/

onShareAppMessage:函数（）{

},

})

2.3了解基本json页面配置+上拉刷新和下拉加载

{

“NavigationBarBackgroundColor”：“#f00”，//修改顶部导航栏颜色

“NavigationBarTitleText”：“演示页”，//修改顶部导航栏文本

“BackgroundTextStyle”：“dark”，//下拉加载的样式仅支持dark/light

“EnablePullDownRefresh”：true，//是否启用当前页面的下拉刷新。

“OnReachBottomDistance”：50，//触发页面上拉底部事件时与页面底部的距离，单位为px。

“UsingComponents”：｛｝//页面自定义组件的配置

}

2.4理解Wxml