转载：

这段时间一直在做小程序，总结下。后续可能会不断更新，努力写仔细点，争取让人看到就能会写。

一，页面结构。

这基本是小程序的标准目录结构。我们从上到下解释下：pages文件夹放置我们所有用到的页面，基本是一个页面一个文件夹，类似模块。每个页面中，有四个文件（有的可能不会有.json文件）。分别是:js/json/wxml/wxss.

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

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

.wxml：是页面的结构文件。是必要的。相当于我们常用的html。

.wxss：是页面的样式表，页面的样式表是非必要的。

接下来的目录是个public文件夹，这是我自己新建的文件夹，用来存放图片等。

下面是个tpl文件夹，template，就是存放页面所用到的模板文件。都是自己新建的。

最下边是个utils文件夹，里面有一个utils.js，一般我们会在其中放入一些公用类的方法，比如封装好的一些通用的方法。可供我们随时调用。

最下边是四个app.js/spp.json/app.wxss/project.config.json 其中的前三个，是整个项目的核心。

app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

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

app.wxss是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

project.config.json是项目的配置文件，里面有我们所有项目配置的信息，包括是否支持es6，appid等设置和信息。

……

二，wxhl语法

wxhl跟html一样，都有自己标签的语法规则。区别比较大的，div块元素，都是用<view></view>这种双标签。而且，不存在有h5新标签：header等。

img标签：<image></image> 双标签

文字标签:<text></text>双标签

a标签:<navigator url="../navigator/navigator?title=我是navi">跳转到新的页面</navigator> （同时也是页面跳转的一个方法）

更多的不同，我们不在标签上详细叙述。我们来谈一谈，小程序最佳的布局方式。flex布局

什么是flex布局？

display：flex  是将元素作为弹性伸缩盒显示，早在css3就有。

举个例子：定义一个容器，里面包含几个子元素。

<div style="width:400px; height: 120px; background: #ddd;  display: flex;flex-flow: row;">
    <div style="border: #fff solid 1px;  width: 100px;>jquery特效</div>
    <div style="border: #fff solid 1px;  width: 100px;><a href="">微信小程序开发</a></div>
    <div style="border: #fff solid 1px; width:100px;><a href="">web前端开发</a></div>
</div>

display flex容器的属性

flex-flow

order属性

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})