小程序框架及小程序生命周期----超详细

这篇具有很好参考价值的文章主要介绍了小程序框架及小程序生命周期----超详细。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一,框架

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务

整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。小程序提供了自己的视图层描述语言 WXMLWXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑

1.1 响应的数据绑定

    框架的核心是一个响应的数据绑定系统,可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新

通过这个简单的例子来看:

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>
// This is our App Service.
// This is our data.
var helloData = {
  name: 'Weixin'
}

// Register a Page.
Page({
  data: helloData,
  changeName: function(e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  }
})
  • 开发者通过框架将逻辑层数据中的 name 与视图层的 name 进行了绑定,所以在页面一打开的时候会显示 Hello Weixin!

  • 当点击按钮的时候,视图层会发送 changeName 的事件给逻辑层,逻辑层找到并执行对应的事件处理函数;

  • 回调函数触发后,逻辑层执行 setData 的操作,将 data 中的 nameWeixin 变为 MINA,因为该数据和视图层已经绑定了,从而视图层会自动改变为 Hello MINA

1.2 页面管理

框架 管理了整个小程序的页面路由,可以做到页面间的无缝切换,并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册到 框架 中,其他的一切复杂的操作都交由 框架 处理。

1.3 基础组件

框架 提供了一套基础的组件,这些组件自带微信风格的样式以及特殊的逻辑,开发者可以通过组合基础组件,创建出强大的微信小程序

1.4 丰富的 API

二、视图层 View

框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。

将逻辑层的数据反映成视图,同时将视图层的事件发送给逻辑层

WXML(WeiXin Markup language) 用于描述页面的结构。
WXS(WeiXin Script) 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。

 

WXSS(WeiXin Style Sheet) 用于描述页面的样式
组件(Component)是视图的基本组成单元

 2.1 WXML

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构

要完整了解 WXML 语法,请参考WXML 语法参考。

2.1.1 数据绑定

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello ZZ'
  }
})

2.1.2 列表渲染

wx:for 遍历逻辑层array数据,界面将输出 1、2、3、4、5

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

2.1.3 条件渲染 

wx:if 条件判断,根据逻辑层数据判断视图层将输出哪些数据,该视图界面将显示 MINA 

<!--wxml-->
<view wx:if="{{view == '1'}}"> WEBVIEW </view>
<view wx:elif="{{view == '2'}}"> APP </view>
<view wx:else="{{view == '3'}}"> MINA </view>
// page.js
Page({
  data: {
       view: 2
  }
})

2.1.4 模板

在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>

js中定义:

// page.js
Page({
  data: {
      staffA: { firstName: 'Hulk', lastName: 'Hu' },
    staffB: { firstName: 'Shang', lastName: 'You' },
    staffC: { firstName: 'Gideon', lastName: 'Lin' }
  }
})

小程序框架及小程序生命周期----超详细,微信小程序,小程序,前端框架,前端

在wxml文件中使用template标签来引用"staffName"模板,并通过data属性传递员工的数据。这里使用了三个template标签,分别引用了staffA、staffB和staffC的数据


在page.js文件中,通过Page函数定义了一个页面对象,并在data属性中定义了staffA、staffB和staffC的数据。每个员工对象包含了firstName和lastName属性,分别表示员工的名字和姓氏。


当小程序运行时,模板会根据传递的数据进行渲染,将员工的姓名显示在页面上。具体效果是,页面会显示三个员工的姓名:Hulk Hu、Shang You和Gideon Lin

2.2 WXSS

WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示

为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比,WXSS 扩展的特性有:

  • 尺寸单位

  • 样式导入

2.2.1 尺寸单位

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况

事件!!!

  • 事件是视图层到逻辑层的通讯方式。
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
  • 事件对象可以携带额外信息,如 id, dataset, touches

实例:

wxml定义:

<view id="tapTest" data-hi="Weixin" data-meettingSteate="6"  bindtap="tapName"> Click me! </view>

page.js定义

  tapName: function (event) {
    console.log(event)
    console.log(event.target.dataset)
  },

效果

小程序框架及小程序生命周期----超详细,微信小程序,小程序,前端框架,前端

2.2.2 样式导入

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束

示例代码:

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

2.2.3 内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

  • style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度
<view style="color:{{color}};" />
  • class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔
<view class="normal_view" />

2.2.3 选择器

目前支持的选择器有:

选择器 样例 样例描述
.class .intro 选择所有拥有 class="intro" 的组件
#id #firstname 选择拥有 id="firstname" 的组件
element view 选择所有 view 组件
element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
::after view::after 在 view 组件后边插入内容
::before view::before 在 view 组件前边插入内容

2.2.4 全局样式与局部样式
       

      定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器

2.3 WXS

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构

示例

  • 新建一个wxs文件

var toDecimal2 = function (x) {
    var f = parseFloat(x);
    if (isNaN(f)) {
      return '0.00'
    }
    var f = Math.round(x * 100) / 100;
    var s = f.toString();
    var rs = s.indexOf('.');
    if (rs < 0) {
      rs = s.length;
      s += '.';
    }
    while (s.length <= rs + 2) {
      s += '0';
    }
    return s;
  }
  //module.exports = toDecimal2
module.exports = {
    toDecimal2:toDecimal2
}
  
  • 在wxml中使用

<!--pages/c/c.wxml-->
<wxs src="../../wxs/PageUtils.wxs" module="PageUtils"></wxs>
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>
<view>
    <text>pages/c/c.wxml,</text>
    <text>{{m1.message}}</text>
    <view>
        <text>{{PageUtils.toDecimal2(123.453)}}</text>
    </view>
    <view>
        <button type="primary" bindtap="jump">跳转到D页面</button>
    </view>
</view>

注意事项

  1. WXS 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。

  2. WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。

  3. WXS 的运行环境和其他 JavaScript 代码是隔离的,WXS 中不能调用其他 JavaScript 文件中定义的函数,也不能调用小程序提供的API。

  4. WXS 函数不能作为组件的事件回调。

  5. 由于运行环境的差异,在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

以下是一些使用 WXS 的简单示例,要完整了解 WXS 语法,请参考WXS 语法参考

页面渲染

<!--wxml-->
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

页面输出:

hello world

数据处理

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
  }
})
<!--wxml-->
<!-- 下面的 getMax 函数,接受一个数组,且返回数组中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {
  var max = undefined;
  for (var i = 0; i < array.length; ++i) {
    max = max === undefined ?
      array[i] :
      (max >= array[i] ? max : array[i]);
  }
  return max;
}

module.exports.getMax = getMax;
</wxs>

<!-- 调用 wxs 里面的 getMax 函数,参数为 page.js 里面的 array -->
<view> {{m1.getMax(array)}} </view>

页面输出:

5

三、小程序生命周期

小程序框架及小程序生命周期----超详细,微信小程序,小程序,前端框架,前端

    小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发 JavaScript 代码的运行环境以及微信小程序的特有功能

逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。

开发者写的所有代码最终将会打包成一份 JavaScript 文件,并在小程序启动的时候运行,直到小程序销毁。这一行为类似 ServiceWorker,所以逻辑层也称之为 App Service。

在 JavaScript 的基础上,我们增加了一些功能,以方便小程序的开发:

  • pp 和 Page 方法,进行程序注册和页面注册。
  • 增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
  • 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
  • 提供模块化能力,每个页面有独立的作用域。

注意:小程序框架的逻辑层并非运行在浏览器中,因此 JavaScript 在 web 中一些能力都无法使用,如 window,document 等增加 A

准备

首先准备四个页面分别是a\b\c\d,其中a和b是一级菜单,c和d是二级菜单,并在这些页面中添加按钮设置相对应的点击事件遵循navigateToredirectTo 只能打开非 tabBar 页面和switchTab 只能打开 tabBar 页面的原则

部分代码展示

app.json:

{
  "pages":[
    "pages/index/index",
    "pages/a/a",
    "pages/b/b",
    "pages/c/c",
    "pages/d/d",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },

  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/a/a",
      "text": "A页面"
    },{
      "pagePath": "pages/b/b",
      "text": "B页面"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"

}



a.wxml:

<!--pages/a/a.wxml-->
<text>pages/a/a.wxml</text>
// a.wxml
<text>我是一级菜单A页面</text>
<button bindtap="a2b">A页面跳转B页面</button>
<button bindtap="a2c">A页面跳转C页面</button>
<button bindtap="a2d">A页面跳转d页面</button>

 

a.js:

 a2b:function(){
    wx.switchTab({
      url: '/pages/b/b',
    })
  },

  a2c:function(){
    wx.navigateTo({
      url: '/pages/c/c',
    })    
  },
  a2d:function(){
    wx.navigateTo({
      url: '/pages/d/d',
    })    
  },

其他跳转根据自己需求定义即可!

小程序框架及小程序生命周期----超详细,微信小程序,小程序,前端框架,前端

总结

一级不会销毁
二级层级深跳到层级低的会销毁二级层级低跳到高的只会隐藏隔代中间所有页面会被销毁
文章来源地址https://www.toymoban.com/news/detail-736504.html

到了这里,关于小程序框架及小程序生命周期----超详细的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序生命周期

    必须在 app.js 中调用,必须调用且只能调用一次。 onLaunch : 小程序初始化完成时触发,全局只触发一次。 云开发的初始化 方便其他页面直接调用云开发的SDK 发送请求获取用户的个人信息 方便其他页面使用 获取本地存储数据 方便其他页面使用 onShow :小程序启动或切前台显

    2023年04月16日
    浏览(45)
  • 微信小程序——生命周期

    微信小程序有以下几个生命周期函数: onLaunch :小程序初始化时触发,只会执行一次。可以在此函数中进行全局的初始化操作。 onShow :小程序启动或从后台进入前台显示时触发。可以在此函数中执行需要在小程序显示时进行的逻辑操作。 onHide :小程序从前台进入后台时触

    2024年02月09日
    浏览(46)
  • 微信小程序 生命周期

    在小程序中,生命周期分为两类 应用生命周期 指小程序从启动-运行-销毁的过程 页面生命周期 特指小程序页面的加载-渲染-销毁的过程 生命周期函数是由小程序框架提供的内置函数,会自动按次序执行,生命周期函数允许程序员在特定的时间点执行某些特定的操作,比如,

    2024年02月13日
    浏览(40)
  • 微信小程序的生命周期

    生命周期(Life Cycle)是指一个对象从创建 - 运行 - 销毁的整个阶段,强调的是一个时间段。 我们可以把每个小程序运行的过程,也概括为生命周期: 小程序的启动,表示 生命周期的开始 小程序的关闭,表示 生命周期的结束 在小程序中,生命周期分为两类,分别是: ①应

    2024年02月03日
    浏览(46)
  • 微信小程序的组件的生命周期

    小程序组件可用的全部生命周期如下表所示。 在小程序组件中,最重要的生命周期函数有 3 个,分别是 created、attached、detached。它们各自的特点如下: 1 组件实例刚被创建好的时候,created 生命周期函数会被触发 此时还不能调用 setData 通常在这个生命周期函数中,只应该用于

    2024年02月09日
    浏览(42)
  • 微信小程序——生命周期详解(代码解读)

    ✅作者简介:2022年 博客新星 第八 。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏:微信小程序学习分享 ✨特色专栏:国学周更-心性养成之路 🥭本文内容:微信小程序——使

    2024年02月07日
    浏览(40)
  • 微信小程序运行机制和生命周期

    一. 运行机制 首先了解下小程序的运行机制,小程序从启动到最终被销毁,会经历很多不同的状态,小程序在不同状态下会有不同的表现。大致运行机制如下图。 小程序生命周期图 接下来我们是图中概念讲解,项目中也会经常遇到。 1)小程序的启动 通常来说,小程序启动

    2024年02月13日
    浏览(49)
  • 关于微信小程序的生命周期

    关于微信小程序的生命周期 onLaunch  官网App.vue/App.uvue | uni-app官网 问题描述: 我现在有个小程序 取名为a   有个用户b 从来没有打开过小程序 那么他第一次打开小程序的时候会触发onLaunch   然后用户b退出了小程序 那么用户 b重新打开小程序的时候会触发 onLaunch吗 在微信小

    2024年02月09日
    浏览(44)
  • 微信小程序(十三)生命周期-更新应用提醒

    注释很详细,直接上代码 上一篇 新增内容: 1. onLaunch 用法 2. onShow 用法 3. onHide 用法 4.应用更新API的调用模板 源码: 效果演示: 模拟成功的情况 2.模拟失败的情况 下一篇

    2024年01月25日
    浏览(48)
  • 微信小程序_16,组件的生命周期

    组件的全部生命周期函数: 小程序可用的全部生命周期如下表所示: 生命周期函数 参数 描述说明 created 无 在组件实例刚刚被创建时执行 attached 无 在组件实例进入页面节点树时执行 ready 无 在组件在视图层布局完成后执行 mooved 无 在组件实例被移动到节点树另一个位置时执行

    2024年02月09日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包