微信小程序学习(五)

转载请注明出处: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---");}
})

打开小程序后会依次执行onLoad,onReady,onShow方法
前后台切换会分别执行onHide和onShow方法，
当小程序页面销毁时会执行 onUnload方法

下面是微信官方给出的page的生命周期的图片:

更多生命周期的内容请移步:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

一些关于其他的js会在后面的文章中陆续带入

3.WXS

模块:
直接一波图解释清楚

第一种类型:

第二种类型:

第三种类型

好! 三种使用模板的方法就先到这里,后期的使用,会在文章中体现出来….

4.运行机制

先来看一下小程序的启动方式
分为两种,
第一种是热启动

热启动代表的是从我们的后台然后切回到小程序中,我们称为热启动

第二种是冷启动

冷启动代表,我们的小程序首次打开或者被用户销毁了然后重新进入,
强制销毁 有两种情况微信会销毁我们的小程序,
第一种是我们的小程序在后台超过了5分钟,
第二种是我们的小程序发生了两次异常.

如果我们的小程序有更新时,我们客户端的小程序会异步的下载新的更新包,在下一次打开的时候去加载最新的包

好的到这里本篇文章就先到此了,创作不易,如果那里有不合适的地方还请大家多多指教,写这篇博的目的主要就是为了方便自己以后的一个回忆和朋友学习时的一个参考,希望为大家可以带来帮助 ~ ~&

虚心的去学习,自信的去工作~