进行任何程序开发，首先必须找到它的官方文档。 微信小程序开发文档链接为：，如下图：
这里有Momo小程序开发的全部官方文档。
知道了文档的位置，我们来介绍一下如何开发Momo小程序：
第一步：下载并安装陌陌小程序开发者工具微信小程序工具网站，下载路径：
进入下载界面后，根据自己的操作系统选择相应的链接进行下载，下载完成后进行安装。
第二步：登录工具
开发者工具安装完成后，我们就可以打开它了。 首次打开时，需要使用Momo扫码登录，输入右侧图片，用手机扫描并确认登录。
第三步：创建项目
登录成功后，如果第一次使用该工具，会弹出项目创建窗口，如下图：
创建过程中，如果选择的本地文件夹为空文件夹，会有“在当前目录创建快速启动项目”的勾选选项，以便初学者可以轻松了解Momo小程序的基本代码结构，请勾选此item ，勾选后，开发者工具会帮我们在开发目录下生成一个简单的demo，如下图：
第四步：项目代码结构解释
点击开发者工具两侧导航中的“编辑”，我们可以看到这个项目已经初始化完毕，并且包含了一些简单的代码文件。 最关键和最本质的是app.js、app.json和app.wxss。 其中.js后缀为脚本文件，.json后缀为配置文件，.wxss后缀为样式表文件。 微信小程序会读取这个文件并生成小程序的实例。
我们先简单了解一下这三个文件的作用，以便方便从头开始更改和开发自己的陌陌小程序。
1.app.js是小程序的脚本代码。 在这个文件中，我们可以监听和处理小程序的生命周期函数，并声明全局变量。 调用框架提供的丰富API，例如本例中的同步存储、同步读取本地数据。
2、app.json是整个小程序的全局配置。 在这个文件中，我们可以配置小程序由哪些页面组成，配置小程序的窗口背景颜色，配置导航项的样式，配置默认标题。 请注意，不能向该文件添加任何注释。
3、app.wxss是整个小程序的公共样式表。 我们可以直接在页面组件的class属性上使用app.wxss中声明的样式规则。
我们注意到示例程序的代码中有两个文件夹，一个是pages，一个是utils，其中utils是通用工具类的文件夹，pages是存放所有页面的文件夹。 我们重点讨论这个页面。
第五步：小程序页面文件的构成
在这个例子中，我们有两个页面，索引页面和日志页面，分别是欢迎页面和小程序启动日志的显示页面，这两个页面都在pages目录下。 app.json的pages中需要写入微信小程序中每个页面的【路径+页面名称】，pages中的第一个页面就是小程序的首页。
每个小程序页面由同一路径下四个同名同后缀的文件组成，如：index.js、index.wxml、index.wxss、index.json。 后缀为.js的文件为脚本文件，后缀为.json的文件为配置文件，后缀为.wxss的文件为样式表文件，后缀为.wxml的文件为页面结构文件。
index.wxml是页面的结构文件：
<view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view></view>
在此示例中， 、 、 和 用于构建页面结构、绑定数据以及与处理函数交互。
index.js是页面的脚本文件。 在这个文件中，我们可以监听和处理页面的生命周期函数、获取小程序实例、声明和处理数据、响应页面交互干扰等。
//index.js//获取应用实例
var app = getApp() Page({ data: { motto: 'Hello World', userInfo: {} }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) } })
index.wxss 是页面的样式表：
/**index.wxss**/
.userinfo { display: flex; flex-direction: column; align-items: center; }.userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; }.userinfo-nickname { color: #aaa; }.usermotto { margin-top: 200px; }
页面的样式表是可选的。 当存在页面样式表时，页面样式表中的样式规则会级联到app.wxss中的样式规则。 如果不指定页面的样式表，也可以直接使用页面结构文件中app.wxss中指定的样式规则。
index.json 是页面的配置文件：
页面配置文件不是必需的。 当某个页面存在配置文件时，该页面的配置项会覆盖app.json窗口中的相同配置项。 如果没有指定页面配置文件微信小程序工具网站，则该页面将直接使用app.json中的默认配置。
日志的页面结构
<view class="container log-list"> <block wx:for-items="{{logs}}" wx:for-item="log"> <text class="log-item">{{index + 1}}. {{log}}</text> </block></view>
