微信小程序:最简单目录结构

微信小程序,最简单目录结构。满足最简单目录结构,微信小程序在微信开发环境中才可以调试。

pages

    index

        index.js

        index.json

        index.wxml

        index.wxss

app.js

app.json

pages包括所有页面,每个页面用一个文件夹表示。

indesx一个页面的文件夹,里面有4个文件js/json/wxml/wxss,js、wxml、wxss相当于网页的js、html、css文件,json是当前页面配置文件。

app.js全局js文件,可以为空。

app.json全局配置文件。样例(指向index页面):

{

  "pages": ["pages/index/index"]

}

 index.js样例。

// pages/index/index.js

Page({

 

  /**

   * 页面的初始数据

   */

  data: {

 

  },

 

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad(options) {

 

  },

 

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady() {

 

  },

 

  /**

   * 生命周期函数--监听页面显示

   */

  onShow() {

 

  },

 

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide() {

 

  },

 

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload() {

 

  },

 

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh() {

 

  },

 

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom() {

 

  },

 

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage() {

 

  }

})

index.json样例。

{

  "usingComponents": {}

}

index.wxml样例(这里随意写了一个页面)。

<!--pages/index/index.wxml-->

<text>span</text>

<view class="c1">div</view>

index.wxss样例(根据wxml配置了一个简单样式)。

/* pages/index/index.wxss */

.c1 {

  color: red;

}