【微信小程序】微信小程序开发入门

微信小程序开发入门

逻辑与界面分离的思想：

逻辑层由js编写，界面层由wxml wxss 编写

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

小程序文件结构图：

小程序.json配置文件

我们使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。以下是一个包含了所有配置选项的简单配置app.json：

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "哔哩哔哩弹幕视频网",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#f4f4f4"
  },
  "debug": true
}

pages

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

文件名不需要写后缀，框架会自动寻找路径 .json、.js、.wxml、.wxss四个文件进行整合。

如开发目录为：

• pages

• pages/index

• |-- pages/index/index.wxml

• |-- pages/index/index.js

• |-- pages/index/index.wxss

• |-- pages/index/index.json

• app.js

• app.json

• app.wxss

则，我们只需要在 app.json 中写： （pages/index/index不需要添加后缀）

{
  "pages":[
    "pages/index/index"
  ]
}

新建页面的js文件，默认创建的函数：

页面的初始数据:　　data:{}

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

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

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

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

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

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

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

用户点击右上角分享:　　onShareAppMessage

 

// pages/profile/profile.js
Page({
  /**
   * 页面的初始数据
   */
  data: {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})