咸鱼笔记

本页面只读。您可以查看源文件，但不能更改它。如果您觉得这是系统错误，请联系管理员。
====== 3.小程序的宿主环境 ======

我们称微信客户端给小程序所提供的环境为<wrap hi>宿主环境</wrap>。
===== -#1 渲染层和逻辑层 =====

小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层(View)，JS 脚本工作在逻辑层(App Service)。[[https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html|小程序框架]] \\

框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，<wrap hi>只需要在逻辑层修改数据，视图层就会做相应的更新。</wrap>

===== -#2 程序 逻辑层 =====

1.微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。  \\

2.紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径: \\

<code xml>
  {
    "pages":[
      "pages/index/index",
      "pages/logs/logs"
    ]
  }
</code>

写在 pages 字段的第一个页面就是这个小程序的<wrap em>首页（打开小程序看到的第一个页面）</wrap>。\\

3.小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行: \\

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

==== - 注册小程序 ====

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等[[https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html|注册程序 App 。]] 。

<code javascript>
  // 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)
    },
    globalData: 'I am global data'
  })
</code>

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

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

==== - 注册页面 ====

简单的页面可以使用 Page() 进行构造。

<code javascript>
//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})
</code>

 *''data'' 是页面第一次渲染使用的初始数据。

==== - 生命周期 ====

==== - 页面路由 ====

框架以<wrap hi>栈</wrap>的形式维护了当前的所有页面。可以使用'' getCurrentPages()'' 函数获取当前页面栈。[[https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html|页面路由]]

==== - 模块化 ====

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

 *更推荐开发者采用 module.exports 来暴露模块接口

<code javascript>
// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
</code> 

在需要使用这些模块的文件中，使用 require 将公共代码引入

<code javascript>
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})
</code> 

==== - API ====

[[mina:api_interface|API 接口]]

要获取用户的地理位置时，只需要：

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

调用微信扫一扫能力，只需要：

<code javascript>
  wx.scanCode({
    success: (res) => {
      console.log(res)
    }
  })
</code>

<wrap hi>多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题</wrap> 
[[https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/api.html|小程序的API]] \\

1.我们约定，以 on 开头的 API 用来监听某个事件是否触发 \\

这类 API 接受一个<wrap hi>回调函数</wrap>作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。 \\

<code javascript>
  wx.onCompassChange(function (res) {
    console.log(res.direction)
  })
</code>

2.我们约定，以 Sync 结尾的 API 都是同步 API \\
3.大多数 API 都是异步 API，如 wx.request，wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数

===== -#3 页面 渲染层=====

一个小程序页面由四个文件组成 \\
  - js 页面逻辑
  - wxml 页面结构
  - json页面配置
  - wxss 页面样式表

微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 logs.js，你可以看到 logs.js 的大体内容就是:

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

在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。 \\

[[https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html| 注册页面 Page]] \\ [[https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html|Page(Object object)参数说明]]\\

==== - wxml 页面结构 ====

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出<wrap hi>页面的结构</wrap>。

 *数据绑定
 *渲染（列表、条件）

=== - 模板 ===

<code xml>
<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
</code>

<code javascript>
// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})
</code> 

==== - WXSS ====






==== - 组件 ====

[[https://developers.weixin.qq.com/miniprogram/dev/component/|[官方文档]组件汇总]]

=== - 什么是组件 ===

  * 组件是视图层的基本组成单元。
  * 组件自带一些功能与微信风格的样式。
  * 一个组件通常包括<wrap em>开始标签</wrap>和<wrap em>结束标签</wrap>，<wrap hi>属性</wrap>用来修饰这个组件，<wrap hi>内容</wrap>在两个标签之内。 \\

<code xml>
<tagname property="value">
  Content goes here ...
</tagename>
</code>

=== - 代码案例 ===

例如，你需要在界面上显示地图，你只需要这样写即可：\\

<code javascript>
  <map></map>
</code>

使用组件的时候，还可以通过<wrap hi>属性传递值</wrap>给组件 \\

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

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

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