“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 18 天，点击查看活动详情”

1.小程序的宿主环境

1.什么是宿主环境？

1. 宿主环境是指程序运行所必须要依赖的环境。
2. 比如我们现在熟知的两大宿主环境：Android系统和iOS系统。安卓版的微信APP是不可以在iOS环境下运行的，所以，Android是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的。

2.小程序的宿主环境

手机微信是小程序的宿主环境，如下所示：

小程序借助宿主环境提供的能力，可以完成许多普通网页完成的功能，比如说： 微信扫码，微信支付，微信登录，地理定位等等。

3.小程序宿主环境包含的内容

1. 通信模型
2. 运行机制
3. 组件
4. API

4.小程序的宿主环境---通信模型

1. 通信主体

小程序中通信的主体是渲染层和逻辑层，其中：

• WXML模板和WXSS模板样式工作在渲染层。
• JS脚本工作在逻辑层

2.小程序的通信模型

小程序中通信模型分成两个部分：

1. 渲染层和逻辑层之间的通信

由微信客户端进行转发。

2. 逻辑层和第三方服务器之间的通信

由微信客户端进行转发

3.小程序的宿主环境---运行机制

1.小程序启动过程

1. 把小程序的代码包下载到本地
2. 解析app.json全局配置文件
3. 执行app.js小程序入口文件，调用APP()创建小程序实例
4. 渲染小程序主页
5. 小程序启动完成

2.页面渲染的过程

1. 加载解析页面的.json配置文件
2. 加载页面的.wxml模板和.wxss
3. 执行页面的.js文件，调用Page()创建页面实例
4. 页面渲染完成

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

{
  "pages":[
    "pages/list/list",
    "pages/index/index",
    "pages/logs/logs"
    
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },

  "sitemapLocation": "sitemap.json"
}

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 18 天，点击查看活动详情”