差别

这里会显示出您选择的修订版和当前版本之间的差别。

--- mina:running_environment [2020/08/24 12:58] – [2.1 注册小程序] sabertoy
+++ mina:running_environment [2020/08/25 23:32] (当前版本) – [3.4 代码案例] sabertoy
@@ 行 8: / 行 8: @@
 框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，<wrap hi>只需要在逻辑层修改数据，视图层就会做相应的更新。</wrap>
-===== -#2 程序 =====
+===== -#2 程序 逻辑层 =====
 .微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。  \\
@@ 行 66: / 行 66: @@
 </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]] \\
+.我们约定，以 on 开头的 API 用来监听某个事件是否触发 \\
+这类 API 接受一个<wrap hi>回调函数</wrap>作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。 \\
+<code javascript>
+  wx.onCompassChange(function (res) {
+    console.log(res.direction)
+  })
+</code>
+.我们约定，以 Sync 结尾的 API 都是同步 API \\
+.大多数 API 都是异步 API，如 wx.request，wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数
-===== -#3 页面 =====
+===== -#3 页面 渲染层=====
 一个小程序页面由四个文件组成 \\
@@ 行 91: / 行 233: @@
 在渲染完界面之后，页面实例就会收到一个 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)]]\\
+[[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)参数说明]]\\
-===== -#4 组件 =====
+==== - 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/|[官方文档]组件汇总]]
-==== - 什么是组件 ====
+=== - 什么是组件 ===
   * 组件是视图层的基本组成单元。
@@ 行 109: / 行 291: @@
 </code>
-==== - 代码案例 ====
+=== - 代码案例 ===
 例如，你需要在界面上显示地图，你只需要这样写即可：\\
@@ 行 130: / 行 312: @@
-===== - 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]] \\
-.我们约定，以 on 开头的 API 用来监听某个事件是否触发 \\
-这类 API 接受一个<wrap hi>回调函数</wrap>作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。 \\
-<code javascript>
-  wx.onCompassChange(function (res) {
-    console.log(res.direction)
-  })
-</code>
-.我们约定，以 Sync 结尾的 API 都是同步 API \\
-.大多数 API 都是异步 API，如 wx.request，wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数