微信小程序开发【七】-- js详解

系列文章目录

微信小程序开发【一】-- 初识小程序 传送门
微信小程序开发【二】-- 小程序入门 传送门
微信小程序开发【三】-- 项目结构概述 传送门
微信小程序开发【四】-- 配置详解 传送门
微信小程序开发【五】-- wxml详解 传送门
微信小程序开发【六】-- wxss详解 传送门
微信小程序开发【七】-- js详解 传送门
微信小程序开发【八】-- 页面栈和模块化 传送门
微信小程序开发【九】-- 初识小程序云开发 传送门
微信小程序开发【十】-- 云函数/云数据库/云存储 传送门

---

---

一、概述

对于小程序而言，.js脚本文件就是逻辑层，是事务逻辑处理的地方。逻辑层将数据进行处理后发送给视图层，同时接收视图层的事件反馈。

微信小程序开发框架的逻辑层是由JavaScript编写。在JavaScript的基础上，微信团队做了一些适当的修改，以便提高开发小程序的效率。主要修改包括：

• 增加app和page方法，进行程序和页面的注册
• 提供丰富的API,如扫一扫、支付等微信特有的能力
• 每个页面有独立的作用域，并提供模块化能力。

逻辑层的实现就是编写各个页面的.js脚本文件。但由于小程序并非运行在浏览器中，所以JavaScript在Web中的一些能力无法使用，如document、window等。

我们开发编写的所有代码最终会打包成一份JavaScript，并在小程序启动的时候运行，直到小程序销毁。

二、注册程序

1. App()方法

在逻辑层，App()方法用来注册一个小程序。App()接受一个object参数，用于指定小程序的生命周期函数等。App()方法有且仅有一个，存在于app.js中。object参数见下表

属性	类型	描述	触发时机
onLaunch	Function	生命周期函数–监听小程序初始化	当小程序初始化完成时，会触发onLaunch（全局只触发一次）
onShow	Function	生命周期函数–监听小程序显示	当小程序启动，或从后台进入前台显示，会触发onShow
onHide	Function	生命周期函数–监听小程序隐藏	当小程序从前台进入后台，会触发onHide
onError	Function	错误监听函数	当小程序发生脚本错误，或者api调用失败时，会触发onError并带上错误信息
其他	Any		开发者可以添加任意的函数或数据到Object参数中，用this可以访问

注意：onLaunch函数全局只触发一次。

• 前台、后台 ：用户当前界面运行或操作小程序时为前台；当用户点击左上角关闭，或者按了设备Home键离开微信，小程序并没有直接销毁，而是进入后台；当再次进入微信或再次打开小程序，又会从后台进入前台。

• 销毁 ：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正销毁。此时代表小程序的生命周期结束。

• 关闭小程序 (公共库版本1.1.0开始支持)： 当用户从扫一扫、转发等入口(场景值为1007, 1008, 1011, 1025)进入小程序，且没有置顶小程序的情况下退出，小程序会被销毁。

onLaunch, onShow 参数

字段	类型	说明
path	String	打开小程序的路径
query	Object	打开小程序的query
scene	Number	打开小程序的场景值
shareTicket	String	shareTicket，获取更多的转发信息

• 获取更多转发信息：通常开发者希望转发出去的小程序被二次打开的时候能够获取到一些信息，例如群的标识。现在通过调用 wx.showShareMenu 并且设置 withShareTicket为 true ，当用户将小程序转发到任一群聊之后，可以获取到此次转发的 shareTicket，此转发卡片在群聊中被其他用户打开时，可以在 App.onLaunch() 获取到另一个 shareTicket。这两步获取到的 shareTicket 均可通过 wx.getShareInfo() 接口可以获取到相同的转发信息。

2. getApp()方法

微信团队为开发者提供全局的getApp()函数，可以用来获取小程序实例。示例如下：

//other.js
var app = getApp();
console.log(app.globalData);//I am global data

注意：

• App()方法须在app.js中注册，且不能注册多个。
• 不要再定义App()内的函数中调用getApp()，使用this就可以拿到App实例。
• 通过getApp()获取实例之后，不要私自调用生命周期函数。

三、注册页面

1. Page()方法

在逻辑层，Page()方法用来注册一个页面。Page()接受一个object参数，用于指定页面的初始数据、生命周期函数、事件处理函数等。Page()方法每个页面有且仅有一个，存在于该页面的.js文件中。

属性	类型	描述
data	Object	页面的初始数据
onLoad	Function	生命周期函数–监听页面加载
onReady	Function	生命周期函数–监听页面初次渲染完成
onShow	Function	生命周期函数–监听页面显示
onHide	Function	生命周期函数–监听页面隐藏
onUnload	Function	生命周期函数–监听监听页面卸载
onPullDownRefresh	Function	页面相关事件处理 函数–监听用户下拉动作
onReachBottom	Function	页面上拉触底事件的处理函数
onShareAppMessage	Function	用户点击右上角转发
route	String	当前页面的路径
其他	Any	开发者可以添加任意的函数或数据到Object参数中，用this可以访问

2. 初始化数据

初始化数据将作为页面的第一次渲染。对象data将会以JSON的形式由逻辑层传至视图层，所以其数据必须是可以转成JSON的格式：字符串、数字、布尔值、对象、数组。视图层可以通过WXML对数据进行绑定。

<!--demo.wxml-->
<view>{{text}}</view>
<view>{{array[0].msg}}</view>

//demo.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    text: 'init data',
    array: [{msg:'1'},{msg:'2'}]
  }
})