差别

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

--- mina:running_environment [2020/08/23 22:36] – [代码案例] sabertoy
+++ mina:running_environment [2020/08/25 23:32] (当前版本) – [3.4 代码案例] sabertoy
@@ 行 8: / 行 8: @@
 框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，<wrap hi>只需要在逻辑层修改数据，视图层就会做相应的更新。</wrap>
-===== -#2 程序 =====
+===== -#2 程序 逻辑层 =====
 .微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。  \\
@@ 行 35: / 行 35: @@
 </code>
-整个小程序只有一个 App 实例，是全部页面共享的，更多的事件回调参考文档[[https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html|注册程序 App 。]] \\
+==== - 注册小程序 ====
+每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等[[https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html|注册程序 App 。]] 。
 <code javascript>
@@ 行 63: / 行 65: @@
   console.log(appInstance.globalData) // I am global data
 </code>
-===== -#3 页面 =====
-一个小程序页面由四个文件组成 \\
+==== - 注册页面 ====
-  - js 页面逻辑
-  - wxml 页面结构
-  - json页面配置
-  - wxss 页面样式表
-微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 logs.js，你可以看到 logs.js 的大体内容就是:
+简单的页面可以使用 Page() 进行构造。
 <code javascript>
-  Page({
+//index.js
-    data: { // 参与页面渲染的数据
+Page({
-      logs: []
+  data: {
-    },
+    text: "This is page data."
-    onLoad: function () {
+  },
-      // 页面渲染后 执行
+  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>
-在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。 \\
+ *''data'' 是页面第一次渲染使用的初始数据。
-[[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 组件 =====
+==== - 页面路由 ====
-[[https://developers.weixin.qq.com/miniprogram/dev/component/|[官方文档]组件汇总]]
+框架以<wrap hi>栈</wrap>的形式维护了当前的所有页面。可以使用'' getCurrentPages()'' 函数获取当前页面栈。[[https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html|页面路由]]
-==== - 什么是组件 ====
+==== - 模块化 ====
-  * 组件是视图层的基本组成单元。
+可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。
-  * 组件自带一些功能与微信风格的样式。
-  * 一个组件通常包括<wrap em>开始标签</wrap>和<wrap em>结束标签</wrap>，<wrap hi>属性</wrap>用来修饰这个组件，<wrap hi>内容</wrap>在两个标签之内。 \\
-<code xml>
+ *更推荐开发者采用 module.exports 来暴露模块接口
-<tagname property="value">
-  Content goes here ...
-</tagename>
-</code>
-==== - 代码案例 ====
-例如，你需要在界面上显示地图，你只需要这样写即可：\\
 <code javascript>
-  <map></map>
+// common.js
-</code>
+function sayHello(name) {
+  console.log(`Hello ${name} !`)
+}
+function sayGoodbye(name) {
+  console.log(`Goodbye ${name} !`)
+}
-使用组件的时候，还可以通过<wrap hi>属性传递值</wrap>给组件 \\
+module.exports.sayHello = sayHello
+exports.sayGoodbye = sayGoodbye
+</code>
-<code javascript>
+在需要使用这些模块的文件中，使用 require 将公共代码引入
-  <map longitude="广州经度" latitude="广州纬度"></map>
-</code>
-用户点击了地图上的某个标记，你可以在 js 编写 markertap 函数来处理：
 <code javascript>
-  <map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>
+var common = require('common.js')
-</code>
+Page({
+  helloMINA: function() {
+    common.sayHello('MINA')
+  },
+  goodbyeMINA: function() {
+    common.sayGoodbye('MINA')
+  }
+})
+</code>
+==== - API ====
-===== API =====
+[[mina:api_interface|API 接口]]
 要获取用户的地理位置时，只需要：
@@ 行 164: / 行 209: @@
 .我们约定，以 Sync 结尾的 API 都是同步 API \\
 .大多数 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>