微信小程序开发指南

news/2024/7/20 1:24:00 标签: 微信小程序, 小程序

前言

微信是一款由中国著名互联网公司腾讯公司开发的社交软件,于2011年1月21日正式上线。在成立后的短短几年时间里,微信以其简单易用的界面和强大的功能,快速赢得了全球用户的青睐。截止2021年,微信已经有超过10亿的活跃用户,成为全球最流行的社交应用之一。

微信的生命周期可以分为以下几个阶段:

  1. 初期发展阶段(2011-2013年):微信在成立初期,主要是为了满足人们的社交和聊天需求,提供了简单的消息发送和语音通话等功能。

  2. 高速发展阶段(2014-2017年):微信在此期间增加了朋友圈、微信支付等功能,使得用户的使用体验更加丰富和便捷,用户数量也持续增长。

  3. 稳健成长阶段(2018-至今):微信在此阶段继续深化其社交、商业和服务领域的能力,在小程序、公众号等方面取得了突破性进展,并且扩展了其业务范围,如金融服务、智能硬件等。

总之,微信在过去的十年里,已经成为了人们生活和工作中必不可少的一部分,并在中国乃至全球的社交和商业领域取得了重大的影响和地位。

微信程序视图层

a.js
// const { View } = require("XrFrame/kanata/lib/index");

// pages/a/a.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    message:'Hello MINA!页面1',
    array:[1,2,3,4,5],
    users:[{id:1,name:'刘鑫'},{id:2,name:'小白'},{id:3,name:'刘兵'}],
    view:2
    ,
    staffA:{firstName:'Hulk',lastName:'Hu'},
    staffB:{firstName:'Shang',lastName:'You'},
    staffC:{firstName:'Gideon',lastName:'Lin'}
  },
tapName:function(event){
  console.log(event);
  console.log(event.target.dataset);
},

  a2b:function(){
    wx.switchTab ({
      url:"/pages/b/b",
    })
  },
      a2c:function(){
    wx.navigateTo({
      url:"/pages/c/c",
    })
  },
  

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})
wxml 
<!--pages/a/a.wxml-->
<text>pages/a/a.wxml</text>
<view>{{message}}</view>
<view wx:for="{{array}}">{{item}}</view>
<view wx:for="{{users}}" wx:key="id">用户编号:{{item.id}};用户姓名:{{item.name}}</view>

<!--wxml-->
<view wx:if="{{view== '1'}}">WEBVIEW</view>
<view wx:elif="{{view=='2'}}">APP</view>
<view wx:else="{{view=='3'}}">MINA</view>


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

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

<button bindtap="a2b">a页面跳转b页面</button>


小程序逻辑层及生命周期

小程序的逻辑层指的是小程序中的业务逻辑和数据处理部分,负责小程序中各种业务逻辑的处理,与视图层展示和用户交互的内容分离。小程序的逻辑层主要使用 JavaScript 语言编写,同时支持一部分的 ES6 语法。

小程序的逻辑层有以下几个生命周期:

1. onLaunch:小程序初始化时触发,可以在这个生命周期中进行一些全局的初始化操作。

2. onShow:小程序启动或从后台进入前台时触发,可以在这个生命周期中进行一些需要每次进入小程序时都要执行的操作。

3. onHide:小程序从前台进入后台时触发,可以在这个生命周期中进行一些需要在小程序后台运行时执行的操作。

4. onError:程序中产生未捕获异常时触发,可以在这个生命周期中进行异常处理。

5. onUnhandledRejection:程序中产生未捕获 Promise 异常时触发,可以在这个生命周期中进行异常处理。

6. onPageNotFound:访问不存在的页面时触发,可以在这个生命周期中处理 404 错误。

小程序的逻辑层生命周期的使用可以使得开发者更好地控制小程序创建、启动、关闭、异常处理等方面的流程,有利于提高小程序的稳定性和用户体验。

生命周期事件包括

onPullDownRefresh:用户下拉刷新时,会触发onPullDownRefresh事件。在这个阶段,可以执行一些数据刷新操作,如重新请求数据、更新UI等。

onReachBottom:当页面滚动到底部时,会触发onReachBottom事件。在这个阶段,可以进行加载更多数据的操作。

onShareAppMessage:当用户点击右上角分享按钮时,会触发onShareAppMessage事件。在这个阶段,可以自定义分享内容和路径等。

当前页面路由后页面

触发的生命周期(按顺序)

aaNothing happend
abA.onHide(), B.onLoad(), B.onShow()
ab(再打开)A.onHide(), B.onShow()
caC.onUnload(), A.onShow()
cb

C.onUnload(), B.onLoad(), B.onShow()

dbD.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
da

D.onUnload(), A.onLoad(), A.onShow()

dbD.onUnload(), B.onLoad(), B.onShow()
总结:
  1. 一级不会销毁会被隐藏
  2. 二级层级跳到层级低的会销毁
  3. 二级层级跳到高的只会隐藏
  4. 隔代跳级中间的所有页面会被销毁
生命周期说明
ready生命周期回调—监听页面初次渲染完成
created生命周期回调—监听页面加载
attached生命周期回调—监听页面显示
moved生命周期回调—监听页面隐藏
detached生命周期回调—监听页面卸载
error每当组件方法抛出错误时执行

注意的是:

组件实例刚刚被创建好时, created 生命周期被触发,此时,组件数据 this.data 就是在 Component 构造器中定义的数据 data , 此时不能调用 setData
在组件完全初始化完毕、进入页面节点树后, attached 生命周期被触发。此时, this.data 已被初始化为组件的当前值。这个生命周期很有用,绝大多数初始化工作可以在这个时机进行
在组件离开页面节点树后, detached 生命周期被触发。退出一个页面时,如果组件还在页面节点树中,则 detached 会被触发
 


http://www.niftyadmin.cn/n/5096259.html

相关文章

动态加载sprite是multiple模式(即该sprite包含了很多小图)里的小图

在Unity中&#xff0c;Resources.Load()方法可以用来加载资源。如果要加载Sprite下的multiple模式的图片&#xff0c;你需要知道这些图片的路径。 首先&#xff0c;你需要把你想要加载的资源放在一个名为"Resources"的文件夹内。然后&#xff0c;你可以使用以下代码…

【爬虫】data: image/png; base64图片数据

爬wx小程序时遇到了响应返回下面的信息 {"Image":"data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjI…

MySQL 8.0 OCP认证精讲视频、环境和题库之四 多实例启动 缓存

一、配置第一个mysqld服务 1、编辑选项文件&#xff0c;指定以下选项&#xff1a; [mysqld] basedir/mysql80 datadir/mysql80/data1 socket/mysql80/data1/mysqld.sock pid-file/mysql80/data1/mysqld.pid log-error/mysql80/dat…

【嵌入式C】强制类型转换

类型转换&#xff1a;   低转高&#xff1a;延拓&#xff0c;最高位填充&#xff1b;   高转低&#xff1a;截断   直接使用强制类型转换并不能去掉符号。 同等长度变量之间的类型转换 同样长度的不同类型相互转换时&#xff0c;比方 shortshort 强制转换成 unsigned s…

全景分割的自监督学习

在本章中,我们将第3章中讨论的SSL方法扩展到语义和全景分割任务。使用手动生成的标签训练的卷积神经网络通常用于语义或实例分割。 在精准农业中,自动化花朵检测方法使用监督模型和后处理技术,随着花朵的外观和数据采集条件的变化,这些技术可能无法始终如一地执行。我们提…

react 生命周期讲解

当涉及到React组件的创建、更新和销毁过程时&#xff0c;React的生命周期方法起到了至关重要的作用。正确地理解和使用这些生命周期方法可以帮助我们在不同的阶段执行特定的操作&#xff0c;从而实现更好的组件控制和优化。 1. 挂载阶段&#xff08;Mounting&#xff09; 在组…

Vue进阶(幺陆伍)PhantomJS 实战讲解

文章目录 一、前言二、PhantomJS2.1 PhantomJS 使用场景2.2 PhantomJS 项目实战2.2.1 环境配置2.2.2 Demo: 自动化截图 三、拓展阅读 一、前言 在前期博文《Vue进阶&#xff08;五十六&#xff09;&#xff1a;vue-cli 脚手架 karma.conf.js 配置文件详解》中讲解了 karma.con…

屏幕时代的数字化信息管理:从传统到纯软件的转变

随着数字化时代的推进&#xff0c;屏幕已经成为了企业和机构向外界传递信息的主要媒介。除了传统的手机和电脑屏幕&#xff0c;线下空间如办公楼、商场、店铺、医院、展厅等也需要利用屏幕来展示和发布各类信息。 管理这些屏幕和发布信息并不是一件容易的事情&#xff0c;特别是…