微信小程序中的启动过程

微信小程序中的启动过程

小程序的启动

小程序启动前，会加载代码到本地。通过读取全局app.json里的pages，就能知道你所有注册的页面。

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

如

pages/index/index:表示第一页面所有内容在index下

pages/index/logs：表示第二页面所有内容在logs下。

注：pages数组的第一注册页面为首页，也就是pages/index/index时打开小程序的首页。

小程序启动后，在app.js里定义的App 实例的onLaunch函数就会执行：

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

注意：整个小程序只有一个 App 实例，为所有的页面共享。App实例有多个函数（onShow，onHide，onError等）。

程序和页面

首先观察下pages/logs/logs页面有4个文件格式，包括

（1）logs.json（配置）,

（2）logs.wxml（内容）,

（3）logs.wxss（样式）。

（4）,logs.js（交互）

顺序：

（1）首先，根据 logs.json 配置生成一个界面，logs.json配置好顶部的颜色和文字。

（2）其次，装载这个页面的 WXML 结构和 WXSS 样式。

（3）最后，装载logs.js，渲染当前页面。

举例（logs.js）：

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

Page是页面构造器（生成页面），把data数据和wxml一起渲染得到最终结果。

至于onLoad函数会在渲染结束后执行，用来处理你的逻辑。

组件

小程序提供了丰富的组件，供开发者使用。

如地图：

<map></map>

如果，我们希望地图一开始的中心的经纬度是广州，那么你需要声明地图的 longitude(中心经度) 和 latitude(中心纬度) 两个属性，通过给传递值给组件的属性，让组件可以以不同的状态去展现。

<map longitude="广州经度" latitude="广州纬度"></map>

也可以，你可以在 js 编写 markertap 函数来处理，用户点击了地图上的某个标记的事件

<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>

小程序的API接口

小程序提供了很多 API 给开发者去使用，例如获取用户信息、微信支付等等。

如，获取位置：

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 经度
    var longitude = res.longitude // 纬度
  }
})

微信扫一扫：

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

注意：多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。