简易教程

一、 创建小程序实例

最关键的是app.js、app.json、app.wxss这三个文件，其中.js的是脚本文件，.wxss的是样式表文件，.json的是配置文件。微信小程序会读取这些文件，并生成小程序实例。

下面我们简单了解一下这三个文件的功能

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

 

App.json是对整个小程序的全局配置，我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题，注意该文件不可添加任何的注释。

 

二、 创建页面

在这个教程里，我们有两个页面，index页面和logs页面，即欢迎页和小程序启动日志的展示页，他们都在pages目录下。微信小程序中的每一个页面的路径加页面名都需要写在app.json的pages中，且pages的第一个页面是小程序的首页。女士

 

每一个小程序页面是由同路径下的同名的四个不同后缀文件所组成的，如index.js,index.wxml,index.wxss,index.json，.js后缀是脚本文件，json是配置文件，wxss是样式文件,wxml是页面结构文件。

index.wxml是页面的结构文件。

index.js是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，相应页面交互事件等。

样式表则是非必要的，当有页面的样式配置文件时，配置项在该页面会覆盖json中window相同的配置项，如果没有指定的页面配置文件，则在该页面使用app.json中的默认配置。

logs的页面结构

<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

logs页面使用<block/>控制标签来组织代码，在<block/>上使用wx:for绑定logs数据，并将logs数据循环展开节点