微信小程序开发解析

简介: 微信小程序开发解析

前言

微信是一款由中国著名互联网公司腾讯公司开发的社交软件,于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事件。在这个阶段,可以自定义分享内容和路径等。

当前页面 路由后页面

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

a a Nothing happend
a b A.onHide(), B.onLoad(), B.onShow()
a b(再打开) A.onHide(), B.onShow()
c a C.onUnload(), A.onShow()
c b

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

d b D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
d a

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

d b D.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 会被触发

目录
相关文章
|
10天前
|
安全 NoSQL API
拼多多:通过微信支付API实现社交裂变付款的技术解析
基于微信JSAPI构建社交裂变支付系统,用户发起拼单后生成预订单与分享链接,好友代付后通过回调更新订单并触发奖励。集成微信支付、异步处理、签名验签与Redis关系绑定,提升支付成功率与裂变系数,实现高效安全的闭环支付。
137 0
|
5月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
1077 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
3月前
|
存储 人工智能 小程序
微信掌上医院是如何实现的?智慧掌上医院核心实现原理及关键技术解析
微信掌上医院(智慧医院)小程序源码,基于uni-app与Vue.js开发,集成预约挂号、在线支付、报告查询等功能,支持与医院HIS、医保系统对接,采用微服务架构与多重安全机制。
120 2
|
6月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
499 12
|
6月前
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
|
6月前
|
人工智能 开发框架 小程序
工会成立100周年纪念,开发职工健身AI运动小程序、APP方案推荐
为庆祝中华全国总工会成立100周年,特推出基于AI技术的智能健身系统,以小程序和APP形式呈现,助力职工健康生活。方案包括:1) 小程序插件,支持多种运动识别,开箱即用;2) APP插件,提供更高精度的运动检测;3) 成熟的「AI乐运动」系统,支持赛事活动管理。这些方案满足不同需求,推动全民健身体验升级,彰显工会对职工健康的关怀。
|
6月前
|
人工智能 小程序 NoSQL
【一步步开发AI运动小程序】二十一、如何将AI运动项目配置持久化到后端?
本文介绍基于云智「Ai运动识别引擎」的运动配置持久化方案,旨在优化小程序或Uni APP中AI运动识别能力。通过将运动检测参数(如`Key`、`Name`、`TickMode`、`rules`或`samples`)持久化到后端,可避免因频繁调整运动参数而重新发布应用,提升用户体验。持久化数据结构支持规则和姿态样本存储,适用于关系数据库、文件或文档数据库(如MongoDB)。此外,云智还提供运动自动适配工具及「AI乐运动」产品,助力快速实现AI体育、全民健身等场景。
|
6月前
|
小程序 关系型数据库 Java
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。
|
7月前
|
人工智能 小程序 前端开发
【一步步开发AI运动小程序】十九、运动识别中如何解析RGBA帧图片?
本文介绍了如何将相机抽取的RGBA帧图像解析为`.jpg`或`.png`格式,适用于体测、赛事等场景。首先讲解了RGBA图像结构,其为一维数组,每四个元素表示一个像素的颜色与透明度值。接着通过`uni.createOffscreenCanvas()`创建离屏画布以减少绘制干扰,并提供代码实现,将RGBA数据逐像素绘制到画布上生成图片。最后说明了为何不直接使用拍照API及图像转换的调用频率建议,强调应先暂存帧数据,运动结束后再进行转换和上传,以优化性能。
|
7月前
|
人工智能 编解码 小程序
【一步步开发AI运动小程序】二十、AI运动小程序如何适配相机全屏模式?
本文探讨了小程序`camera`组件在全屏模式下的适配问题及其解决方案。由于`camera`组件存在预览图像裁切特性,可能导致入镜检测与预览不一致、骨骼图与人体不重合等问题。通过分析其裁剪逻辑(长边按比缩放,短边居中裁切),我们提供了计算裁剪比例和留白的适配方法,并优化了插件特性以支持全屏应用。同时,文章还讨论了全屏模式可能带来的副作用,如人体可视区域变小、检测范围变化及抽帧帧率下降等,并给出了改进建议。该方案适用于云上赛事、健身锻炼、AI体测、AR互动等场景,助力提升用户体验和UI布局合理性。

热门文章

最新文章

推荐镜像

更多
  • DNS