微信小程序（文件组成 、目录结构、生命周期方法、AppId、组件（标签）、语法、事件、Api、开发工具）_YF-SOD的博客-CSDN博客_area.js微信小程序

AppID
对应网上注册的小程序id。一个id对应一个小程序项目。

åå

文件组成
小程序一共由四种文件组成。

文件类型    必需    作用
js    是    页面逻辑（没有window对象，即没有document对象，alert等）
wxml    是    页面结构（相当于.html文件）
json    否    页面配置
wxss    否    页面样式表（相当于.css文件）
目录结构

 app.js为全局js（用于定义全局变量，全局生命周期等），app.json为全局的页面配置（包括导航栏、页面信息、网络请求超时时间等页面配置），app.wxss为全局的样式，util.js为全局的api。page下的每个文件夹代表一个页面，1个页面由上面4个文件组成。project.config.json项目配置文件

 

app.json
下面是常用初始配置。

pages数组中每一个对应一个页面（一般对应page文件夹下的一个文件），下面小程序只有2个页面index和logs，且初始显示的为index页面（写在第一位的页面会初始化时显示）。

navigationBarTitleText对应小程序顶部显示的名称。

tabBar的list对应底部导航栏内容，pagePath对应点击时跳转的页面。注意只有pagePath中有的页面才能看到tabBar。

networkTimeout为请求时长设置超时。

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

其它全局配置链接 

全局配置 | 微信开放文档

app.js
注意没有window对象，即没有document对象，alert等。

App() 必须在 app.js 中调用，必须调用且只能调用一次，用于生成注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等（注意：参数中的data属性和vue一样，在这里定义的数据，可以在wxml中用双大括号{{}}直接使用）。

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  data:{
      //和vue一样，在这里定义的数据，可以在wxml中用双大括号{{}}直接使用。
  },
  globalData: 'I am global data'
})

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

App 参考文档

App(Object object) | 微信开放文档

生命周期方法
App.js中周期方法
执行顺序onload->onShow->onReady。

onload(opt)
监听页面加载，第一次完整打开小程序页面时（打开小程序页面退出后再打开不算，除非清理了后台进程）。当navigate跳转到当前页面上，在url上带的参数会挂载在opt对象上。

onReady
监听页面初次渲染，全部加载和显示完成，可以提供给用户进行操作。

onShow
监听页面显示，每次从未激活状态变成激活状态（打开小程序后，从别的页面切换回小程序页面）。

onHide
监听页面隐藏，每次从激活状态变成未激活状态（打开小程序后，从小程序页面切到后台或别的页面）。

onUnload
监听页面卸载，正常关闭时执行（点击小程序中的退出按钮时触发，注意直接关闭进程不会触发）。

onError
监听发生错误事件。

onPageNotFound
监听页面不存在事件。

onUnhandleRejection
监听未处理的Promise拒绝事件。

onThemeChange
监听系统主题变化事件。

页面周期方法
包括app.js中的onload、onShow、onHide、onReady、onUnload，以及以下常用的。

onPullDownRefresh
监听用户下拉动作（向下滑动）。

onReachBottom
页面上拉触底事件。

onShareAppMessage
用户点击右上角分享按钮。

onPageScroll
页面滚动触发事件的处理事件。

onAddToFavorites
用户点击右上角收藏事件。

小程序标签（组件）
小程序会自动生成一个page根节点将所有内容包裹。

view
相当于div标签。

scroll-view
定义一块区域可滚动。scroll-x、scroll-y定义可以滚动的方向，注意纵向滚动时需要设定容器高度，想要全屏的滚动时设定100%高度无效，因为最外层有一个page根节点，需要同时给page设定100%高度才会生效。enable-back-to-top属性使点击标题回到顶部。bindscrolltoupper滚动到顶部/左边触发事件，bindscrolltolower滚动到底部/右边触发事件。

template

可以在模板中定义代码片段，然后在不同的地方调用.，is属性为使用模板的名字。注意data属性要传一个解构的对象，该对象中的属性作为数据使用。