微信小程序开发指南

news2025/1/10 16:48:59

前言

微信是一款由中国著名互联网公司腾讯公司开发的社交软件,于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.coloradmin.cn/o/1100283.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何使用 OpenSSL 来检查证书,来确保网络通信的安全性?

OpenSSL 是一个强大的安全套接字层密码库&#xff0c;包含丰富的加密算法、常用的密钥和证书封装管理功能以及 SSL/TLS 协议&#xff0c;并提供了丰富的应用程序供测试或其他目的使用。要使用 OpenSSL 来检查证书以确保网络通信的安全性&#xff0c;您可以遵循以下步骤&#xf…

【ARM Coresight Debug 系列 16 -- Linux 断点 BRK 中断使用详细介绍】

文章目录 1.1 ARM BRK 指令1.2 BRK 立即数宏定义介绍1.3 断点异常处理流程1.3.1 el1_sync_handler1.3.2 el1_dbg 跟踪 1.4 debug 异常处理函数注册1.4.1 brk 处理函数的注册 1.1 ARM BRK 指令 ARMv8 架构的 BRK 指令是用于生成一个软件断点的。当处理器执行到 BRK 指令时&…

【小黑嵌入式系统第二课】嵌入式系统的概述(二)

文章目录 一、嵌入式系统的组成二、嵌入式处理器三、嵌入式外围设备1. 存储设备2. 通信设备3. 显示设备 四、硬件抽象层HAL五、嵌入式操作系统六、应用程序七、嵌入式处理器1、MCU2、MPU3、DSP4、SOC5、SOPC 八、ARM处理器简介ARM处理器的特点ARM处理器的发展历程ARM体系结构版…

【递归知识+练习】

文章目录 递归♥♥♥ 栈存储的顺序&#xff1a;按顺序打印一个数字的每一位递归求N&#xff01;的阶层递归求1234...10写一个递归方法&#xff0c;输入一个非负整数。返回组成它的数字之和&#xff08;不熟&#xff09;斐波那契数列&#xff08;不熟&#xff09; 总结 递归 递…

【(数据结构)— 单链表的实现】

&#xff08;数据结构&#xff09;— 单链表的实现 一.链表的概念及结构二.单链表的实现2.1单链表头文件——功能函数的定义2.2单链表源文件——功能函数的实现2.3 单链表源文件——功能的测试2.4单链表测试结果运行展示 3. 链表的分类 一.链表的概念及结构 概念&#xff1a; …

电子学会2023年9月青少年软件编程(图形化)等级考试试卷(三级)真题,含答案解析

青少年软件编程(图形化)等级考试试卷(三级) 分数:100 题数:31 一、单选题(共18题,共50分) 1.运行下面程序后,角色的x坐标值是?( ) A. 100 B. 90

osWorkflow-1——osWorkflow官方例子部署启动运行(版本:OSWorkflow-2.8.0)

osWorkflow-1——osWorkflow官方例子部署启动运行&#xff08;版本&#xff1a;OSWorkflow-2.8.0&#xff09; 1. 前言——准备工作1.1 下载相关资料1.2 安装翻译插件 2. 开始搞项目2.1 解压 .zip文件2.2 简单小测&#xff08;war包放入tomcat&#xff09;2.3 导入项目到 IDE、…

137.【SpringCloud-快速搭建】

微服务框架搭建 (一)、SpringCloud-Parent1.创建一个SpringBoot项目2.导入我们的依赖 (二)、SpringCloud-API (实体类)1.创建一个SpringBoot项目2.导入我们的依赖3.创建我们的实体类 (三)、SpringCloud-dept (业务A)1.创建一个SpringBoot项目2.导入我们的依赖3.配置我们的配置信…

力扣第39题 组合总和 c++ 回溯剪枝题

题目 39. 组合总和 中等 相关标签 数组 回溯 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些组合。 cand…

故障诊断开源代码推荐 | 轴承故障诊断迁移学习综述,免费获取!

故障诊断开源代码推荐 | 轴承故障诊断迁移学习综述&#xff0c;免费获取&#xff01; 1 论文基本信息2 摘要3 目录4 引言5 定义与故障诊断流程6 开源轴承故障数据集7 轴承故障的迁移学习诊断8 定性分析9 机遇与挑战10 总结11 README.md 针对故障诊断领域开源代码较少&#xff0…

身份证OCR识别:黑科技助力证件信息快速提取

身份证OCR识别是一种基于光学字符识别&#xff08;Optical Character Recognition&#xff0c;OCR&#xff09;技术的自动化身份证信息提取和识别过程。它通过将纸质身份证上的文字、数字、图像等内容转换为可电子化编辑和处理的数据形式&#xff0c;实现了对身份证信息的快速、…

Apache IoTDB v1.2.2 发布|增加 flink-sql-connector、tsfile 文件级级联传输等功能

Release Announcement Version 1.2.2 Apache IoTDB v1.2.2 已经发布&#xff0c;主要增加了 flink-sql-iotdb-connector 插件、tsfile 文件级级联传输、count_time 聚合函数等新特性&#xff0c;优化了 Limit & Offset 查询性能、ConfigNode 重启逻辑等&#xff0c;并提升…

Vue.js2+Cesium1.103.0 十三、通过经纬度查询 GeoServer 发布的 wms 服务下的 feature 对象的相关信息

Vue.js2Cesium1.103.0 十三、通过经纬度查询 GeoServer 发布的 wms 服务下的 feature 对象的相关信息 Demo <template><divid"cesium-container"style"width: 100%; height: 100%;"><div style"position: absolute;z-index: 999;bott…

Unity AI Muse 基础教程

Unity AI Muse 基础教程 Unity AI 内测资格申请Unity 项目Package ManagerMuse Sprite 安装Muse Texture 安装 Muse Sprite 基础教程什么是 Muse Sprite打开 Muse Sprite 窗口Muse Sprite 窗口 参数Muse Sprite Generations 窗口 参数Muse Sprite Generations 窗口 画笔Muse Sp…

小程序开发平台源码系统+ 带前后端完整搭建教程

大家好&#xff0c;给大家分享一个小程序开发平台源码系统。这款小程序开发平台中有很多功能&#xff0c;今天主要来给大家介绍一下洗车行业小程序制作的功能。以下是部分核心代码图&#xff1a; 系统特色功能&#xff1a; LBS定位&#xff1a;小程序能够自动显示附近的共享洗…

稀里糊涂的转义

一、前言 前段时间挖机ERP系统出现一个问题&#xff0c;表单录入客户名称是 L & Q International Trading Limited&#xff0c;然后页面展示变成 L &amp; Q International Trading Limited&#xff0c;即字符 &变成了&amp&#xff1b;。 二、为什么要转义 &…

Vue-3.5vuex分模块

模块module 由于vuex使用单一状态树&#xff0c;应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时&#xff0c;store对象就有可能变得相当臃肿。&#xff08;当项目变得越来越大的时候&#xff0c;Vuex会变得越来越难以维护&#xff09; 模块创建 先在store文…

提升协作效率:钉钉流程与低代码平台的无缝对接

摘要&#xff1a;本文由葡萄城技术团队原创并首发。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 前言 钉钉作为目前很多企业都在使用的移动办公平台&#xff0c;提供了很多常用的OA审批功能&…

剑指智能驾驶,智己LS6胜算几何?

监制 | 何玺 排版 | 叶媛 10月12日&#xff0c;IM智己旗下的新车智己LS6宣布上市。 新车型搭载尖端科技多项&#xff0c;其中以“全画幅数字驾舱屏”、和城市高阶智能辅助驾驶为核心的智驾技术&#xff0c;更是引来众多用户关注。 01 新能源新卷王智己LS6 智己LS6一发布就…

浅谈智能照明控制系统在体育馆中的应用

【摘要】在社会经济日益发展的今天&#xff0c;人们的物质文化水平都有着不同程度上的提高。与此同时人们更加追求高质量的工作和生活环境。照明在现代化的多功能体育场馆中是非常重要的一个环节。智能化的照明控制系统能够根据环境的变化以及客户的需求等条件来自动调节照明系…