微信小程序--JS逻辑

Data: 2015-07-12 03:59:14Form: JournalClick: 11

# 微信小程序--`JS`逻辑

# 一、什么是`js`

js 就是 JavaScript 的缩写，小程序的主要开发语言是 JavaScript，开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求

# 二、`App` 注册小程序

App() 接受一个 Object 参数，其指定小程序的生命周期回调等
App() 必须在 app.js 中调用，必须调用且只能调用一次

编号	属性	类型	必填	说明
1	onLaunch	function	否	生命周期回调——监听小程序初始化。
2	onShow	function	否	生命周期回调——监听小程序启动或切前台。
3	onHide	function	否	生命周期回调——监听小程序切后台。
4	onError	function	否	错误监听函数。
5	onPageNotFound	function	否	页面不存在监听函数。
6	onUnhandledRejection	function	否	未处理的 Promise 拒绝事件监听函数。
7	其他	any	否	开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问

App({
  onLaunch: function () {},
  onShow() {},
  ouyangke() {},
  globalData: {
    userInfo: null,
  },
});

App 方法只能有参数和方法

App({
  var a = 1
  console.log(a)
  onLaunch: function () {

  },
  onShow() {

  },
  ouyangke() {

  },
  globalData: {
    userInfo: null
  }
})

放在App外面和方法里面，不会出错

var a = 1;
App({
  onLaunch: function () {
    console.log(a);
  },
  onShow() {},
  ouyangke() {
    console.log("欧阳克");
  },
  globalData: {
    php: "PHP中文网",
  },
});

# 三、`Page` 注册页面

Page() 接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等

编号	属性	类型	必填	说明
1	data	Object	否	页面的初始数据
2	onLoad	function	否	生命周期回调—监听页面加载
3	onShow	function	否	生命周期回调—监听页面显示
4	onReady	function	否	生命周期回调—监听页面初次渲染完成
5	onHide	function	否	生命周期回调—监听页面隐藏
6	onUnload	function	否	生命周期回调—监听页面卸载
7	onPullDownRefresh	function	否	监听用户下拉动作
8	onReachBottom	function	否	页面上拉触底事件的处理函数
9	onShareAppMessage	function	否	用户点击右上角转发
10	onPageScroll	function	否	页面滚动触发事件的处理函数
11	onResize	function	否	页面尺寸改变时触发，详见响应显示区域变化
12	onTabItemTap	function	否	当前是 tab 页时，点击 tab 时触发
13	其他	any	否	开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问

Page 方法只能有参数和方法

Page({
  data: {
    motto: "Hello World",
  },
  onLoad: function () {
    console.log(111);
  },
  onShow() {
    console.log(222);
  },
});

# 四、`data` 数据

data 是页面第一次渲染使用的初始数据
页面加载时，data 将会以 JSON 字符串的形式由逻辑层传至渲染层
渲染层可以通过 WXML 对数据进行绑定

Page({
  data: {
    name: "欧阳克",
    age: "18岁",
  },
  onLoad: function () {
    console.log(111);
  },
});

WXML 用进行数据绑定

<view>姓名：{{ name }}</view> <view>年龄：{{ age }}</view>

# 五、模块化

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

新建文件：utils/common.js

function fun1() {
  console.log("方法1");
}
function fun2(num) {
  console.log("方法" + num);
}
module.exports.fun1 = fun1;
exports.fun2 = fun2;

exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误

# 六、`require` 引入模块

返回模块通过 module.exports 或 exports 暴露的接口

var common = require("../../utils/common.js");
Page({
  data: {
    name: "欧阳克",
    age: "18岁",
  },
  onLoad: function () {
    common.fun1();
    common.fun2(3);
  },
});

# 七、`getApp` 获取 `App` 实例

通过 getApp() 获取实例之后，不要调用生命周期函数
不要在 App() 里使用 getApp()

var app = getApp();
Page({
  data: {
    name: "欧阳克",
    age: "18岁",
  },
  onLoad: function () {
    app.ouyangke();
    console.log(app.globalData.php);
  },
});

基于安全考虑，小程序中不支持动态执行 JS 代码
- 不支持使用 eval 执行 JS 代码
- 不支持使用 new Function 创建函数

我是 PHP 程序员

微信小程序--JS逻辑

# 微信小程序--JS逻辑

# 一、什么是js

# 二、App 注册小程序

# 三、Page 注册页面

# 四、data 数据

# 五、模块化

# 六、require 引入模块

# 七、getApp 获取 App 实例

# 微信小程序--`JS`逻辑

# 一、什么是`js`

# 二、`App` 注册小程序

# 三、`Page` 注册页面

# 四、`data` 数据

# 六、`require` 引入模块

# 七、`getApp` 获取 `App` 实例