微信小程序学习(五)

转载请注明出处:https://blog.csdn.net/Strugglein/article/details/81916136

今天带来小程序第四节的学习内容,今天主要学习目标是:

1.JS
2.生命周期
3.WXS
4.运行机制

1.JS

首先来段引入
js是一种轻量的,解释型的,面向对象的头等函数语言,是一种动态的基于原型和多范式的脚本语言,支持面向对象,命令式和函数式的编程风格,
轻量是指,入门js的时候会比较轻一些,没有学习其他语言那么重.
解释型是指,js在运行时会编译成可以运行的机器语言.
被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

在小程序中的js主要是用来做交互的,比如来响应用户的一些操作,一些事件的触发、获取用户的位置等等,通过编写js脚本文件来实现这些操作.
通俗的讲就是,wxml来展现内容,wxss来展现出样式,js来进行页面和用户的操作交互,甚至更复杂的交互逻辑
比如在wxml中有个按钮:

<view>{{ data}}</view>
<button bindtap="show">看这里</button>

事件的一个理解：这里的button（bindtap=“show”）绑定了一个show的事件，当点击时就会触发show函数。就是视图和逻辑层的一个通讯方式,就是把事件绑定在wxml中,然后到js中去处理
而在JS里呢，当点击的时候，就把data的内容动态替换为“Hello World”。

Page({
  show: function() {
    this.setData({ data: "Hello World" })
  }
})

2.生命周期

在app.js文件中 , 定义了一些生命周期方法 ,比如:onLaunch，onShow，onHide，onError，
以下是各个生命周期方法作用和描述

onLaunch 生命周期函数–监听小程序初始化当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow 生命周期函数–监听小程序显示当小程序启动，或从后台进入前台显示，会触发 onShow
onHide 生命周期函数–监听小程序隐藏当小程序从前台进入后台，会触发 onHide
onError 错误监听函数当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息

我们也可以添加自定义的一些的函数或数据到 Object 参数中，用 this 可以访问

我们在app.js文件中写下以下的方法,然后打印到控制台;

App({
  onLaunch: function () {
    console.log("app ---onLaunch---");
  },
  onShow:function(){
    console.log("app ---onShow---");
  },
  onHide:function(){
    console.log("app ---onHide---");
  },
  onError: function (msg){
    console.log("app ---onError---" + msg);
  },
  globalData: {
    userInfo: null
  }
})

结果:
app ---onLaunch---
app ---onShow---

通过打印我们可以看出依次执行了app.js下面onLaunch和onShow方法，

在page中的页面自定义的生命周期方法

onLoad 生命周期函数–监听页面加载
onReady生命周期函数–监听页面初次渲染完成
onShow 生命周期函数–监听页面显示
onHide 生命周期函数–监听页面隐藏
onUnload 生命周期函数–监听页面卸载

Page({
  onLoad: function (options) {
    console.log("page ---onLoad---");
  },
  onReady: function () {
    console.log("page ---onReady---");
  },
  onShow: function () {
    console.log("page ---onShow---");
  },
  onHide: function () {
    console.log("page ---onHide---");
  },
  onUnload: function () {
    console.log("page ---onUnload---");
  }
})