【微信小程序开发】小程序更新、页面生命周期、用户信息获取应用实战

news2024/10/5 15:00:19

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。
🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，linux，shell脚本等实操经验，网站搭建，数据库等分享。

所属的专栏：微信小程序开发零基础教学，难点与应用实战总结
景天的主页：景天科技苑

文章目录

  • 1.小程序更新-生命周期
    • 1.1 小程序强制更新
    • 1.2 整个应用生命周期 app.js
    • 1.3 某个页面生命周期 页面.js
  • 2.分享到朋友圈
  • 3.转发功能
  • 4.获取头像
  • 5.获取昵称
  • 6.获取手机号
    • 6.1 手机号快速验证
    • 6.2 手机号实时验证
    • 6.3 代码演示
  • 7.客服功能

1.小程序更新-生命周期

1.1 小程序强制更新

后续我们代码更新
如果我们在微信端使用过小程序–》微信会把小程序代码拉到微信本地
下次打开，会优先使用本地的代码
咱们代码更新了–》强制更新到我们最先的代码

此时，只需要在 app.js 加入如下代码–》整个小程序第一次打开

onLaunch(){
    const update=wx.getUpdateManager()
    update.onUpdateReady(function(){
        wx.showModal({
            title: '发现新版本',
            content: '重启应用，更新版本新版本?',
            success:(res)=>{
                if(res.confirm){
                    update.applyUpdate()
                }
            }
        })
    })
}

在这里插入图片描述

怎么模拟出更新的效果呢？在开发者工具中 添加编译模式
在这里插入图片描述

将编译设置中 下次编译时模拟更新勾上，点击确定
在这里插入图片描述

然后就会看到小程序有弹窗，要求强制更新，是否重启应用。点确定 就会重启小程序，下载最新的版本
在这里插入图片描述

1.2 整个应用生命周期 app.js

我们在app.js里面将我们上面设置的强制更新删掉
输入App，点击这个带框的，就会自动生成各种生命周期函数
在这里插入图片描述
在这里插入图片描述

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    console.log('小程序只要启动，就触发它')
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    console.log('小程序切回来了')
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    console.log('小程序切到后台了')
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})

1.3 某个页面生命周期 页面.js

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log('1 页面加载了')
    // 向后端发送请求
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log('3 初次渲染完成')
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log('2 页面显示')
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log('4 页面隐藏')
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log('5 页面卸载')
  },

2.分享到朋友圈

当我们点击小程序右上角三个点时，会弹出分享小程序等按钮
由于我们的小程序中未设置，所以图标是灰色的，没有分享功能
在这里插入图片描述

分享到朋友圈，需要在当前页面的js中加上一段代码如下：

// 允许发送到朋友圈，右上角 ... 分享到朋友圈
onShareTimeline(){
    return {
        title:"这是一个神奇的页面",
        query:'name=justin&age=19',
        imageUrl:'/images/b.jpg'
    }
},

在这里插入图片描述

在这里插入图片描述

3.转发功能

1 方式一：通过右上方 …
2 方式二：通过按钮， 需要给button设置 open-type=“share”

<button open-type="share">转发</button>

3 js中编写

  onShareAppMessage() {
    
    return {
      title:"是朋友就点一下",
      path:"/pages/my/my", //当前转发的页面
      imageUrl:'/images/b.jpg'
    }

  },

在这里插入图片描述

点击转发，会显示出我们设置的图片和主题
在这里插入图片描述

4.获取头像

#####wxml###

<button class="btn" open-type="chooseAvatar" bindchooseavatar="choosePhoto">
<image src="{{phono}}" class="photo"/>
</button>

点击图片的时候获取头像
在这里插入图片描述

####js###

Page({
  data:{
    phono:'/images/b.jpg'
  },
  choosePhoto(event){
    console.log(event.detail.avatarUrl)
    this.setData({
      phono:event.detail.avatarUrl  //将获取到的头像设置到按钮位置
    })

  }
})

在这里插入图片描述

###wxss###

.btn{
  /* 透明的 */
  background-color: transparent;
}
/* 去掉边框 */
.btn::after{
  border: none;
}
.photo{
  height: 250rpx;
  width: 250rpx;
  border-radius: 50%;
}

在这里插入图片描述

一点击按钮，就让你选择头像来源，可以是微信头像，可以拍照，可以从相册选
在这里插入图片描述

我们选择用微信头像，微信头像就被设置到按钮位置
如果想用这个图片，可以传到后端保存起来
在这里插入图片描述

5.获取昵称

###wxml###

<!-- type一定得是 nickname -->

<input  type="nickname" placeholder="输入或获取昵称" model:value="{{username}}"/>
<button type="primary" plain bind:tap="showName">提交</button>

在这里插入图片描述

###js####

Page({
  data:{
    username:"",
  },
  showName(){
    console.log(this.data.username)
  }
})

在这里插入图片描述

###wxss##

input {
  border: 1rpx solid pink;
  border-radius: 10rpx;
  padding: 10rpx;
  margin: 10rpx;
}

在这里插入图片描述

如此，当我们点击输入或获取用户名时，就会弹出微信昵称
在这里插入图片描述

选择，就会填到输入框中
在这里插入图片描述

点击提交，根据js设置的绑定事件，就会在控制台打印出来
在这里插入图片描述

6.获取手机号

快速登录

  • 前后端配合
  • 前端配合获取手机号–》带着code到后端
  • 后端：注册+登录接口
    • 后端你通过code–》去微信开发平台–》获取真正手机号
    • 检测你用户表，这个用户有没有注册过，如果注册过，直接签发token登录成功
    • 检测你用户表，这个用户有没有注册过，如果没有注册，先注册，再签发token登录成功

前提
1 手机号接口，必须是非个人开发者，并且完成了认证的小程序 个人注册的小程序无法获取
2 两种验证方式需要付费使用，每个小程序账号有1000次体验额度

3 小程序端
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html

6.1 手机号快速验证

如下图
在这里插入图片描述

6.2 手机号实时验证

给你手机发送验证码–》输入验证码后–》才能获取到手机号

6.3 代码演示

后端获取手机号的接口

POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN

###微信小程序端
###wxml###

<button  type="warn" open-type="getPhoneNumber" 
bindgetphonenumber="getPhoneNumber">快速手机号</button>
<button  type="default" plain open-type="getRealtimePhoneNumber"
bindgetrealtimephonenumber="getRealPhoneNumber"
>实时手机号</button>

###js###

getPhoneNumber(event) {
    console.log(event)
    // 通过获取手机号返回的code--传递给后端--后端调用：POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN -->获取手机号--》后端签发token给前端

    云调用
    wx.request({
        url: '我们后端地址',
        method:'POST',
        data:{
            code:event.detail.code
        },
        success:(res)=>{
            //在此返回登录信息，用户登录
        }

    })
},
getRealPhoneNumber(event) {
    console.log(event)
}

在这里插入图片描述

需要真机调试，个人小程序会提示没有权限
在这里插入图片描述

如果是企业小程序，有权限的话，会获取服务端返回的一串code
在这里插入图片描述

当我们向微信后台发送请求的时候，请求参数里面携带上这个code。就会获取到手机号
在这里插入图片描述

官方给的获取手机号接口
在这里插入图片描述

在这里插入图片描述

7.客服功能

微信为小程序提供客服消息能力，以便小程序用户可以方便快捷地与小程序服务提供方进行沟通
https://developers.weixin.qq.com/miniprogram/introduction/custom.html

在这里插入图片描述

需要我们登录微信公众平台
点击客服，添加客服
在这里插入图片描述

输入微信id号，添加客服
在这里插入图片描述

在这里插入图片描述

点击确定，添加成功
在这里插入图片描述

在微信小程序界面，添加个按钮

<view>---------------------客服-------------------</view>
<button type="default" plain open-type="contact">联系客服</button>

在这里插入图片描述

需要真机调试，用手机点击联系客服按钮
在这里插入图片描述

然后在微信公众平台，登录查看客服消息
在这里插入图片描述

看到待接入 1人
在这里插入图片描述

接入，就可以看到用户消息
在这里插入图片描述

就可以与用户对话了
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1901359.html

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

相关文章

小白 | Linux安装python3

小白 | Linux安装python3

一、更新包列表 首先&#xff0c;确保你的包管理器是最新的&#xff1a; sudo apt update 二、安装 Python 3 安装 Python 3 以及常用的开发工具 sudo apt install python3 python3-pip python3-venv 三、验证安装 python3 --version
阅读更多...
GlusterFS分布式存储系统

GlusterFS分布式存储系统

GlusterFS分布式存储系统 一&#xff0c;分布式文件系统理论基础 1.1 分布式文件系统出现 计算机通过文件系统管理&#xff0c;存储数据&#xff0c;而现在数据信息爆炸的时代中人们可以获取的数据成指数倍的增长&#xff0c;单纯通过增加硬盘个数来扩展计算机文件系统的存储…
阅读更多...
Apache Seata应用侧启动过程剖析——RM TM如何与TC建立连接

Apache Seata应用侧启动过程剖析——RM TM如何与TC建立连接

本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 Apache Seata应用侧启动过程剖析——RM & TM如何与TC建立连接 前言 看过官网 README 的第…
阅读更多...
2-5 softmax 回归的简洁实现

2-5 softmax 回归的简洁实现

我们发现通过深度学习框架的高级API能够使实现线性回归变得更加容易。 同样&#xff0c;通过深度学习框架的高级API也能更方便地实现softmax回归模型。 本节如在上节中一样&#xff0c; 继续使用Fashion-MNIST数据集&#xff0c;并保持批量大小为256。 import torch from torc…
阅读更多...
【vue组件库搭建04】使用vitepress搭建站点并部署到github

【vue组件库搭建04】使用vitepress搭建站点并部署到github

前言 基于vitePress搭建文档站点&#xff0c;使用github pages进行部署 安装VitePress 1.Node.js 18 及以上版本 2.npm add -D vitepress 3.npx vitepress init 4.将需要回答几个简单的问题&#xff1a; ┌ Welcome to VitePress! │ ◇ Where should VitePress initi…
阅读更多...
ROS 2官方文档（基于humble版本）学习笔记（四）

ROS 2官方文档（基于humble版本）学习笔记（四）

ROS 2官方文档&#xff08;基于humble版本&#xff09;学习笔记&#xff08;四&#xff09; 2.客户端库使用colcon构建包&#xff08;package&#xff09;创建工作空间&#xff08;workspace&#xff09;构建工作空间执行测试&#xff08;tests&#xff09;导入环境&#xff08…
阅读更多...
Java项目：基于SSM框架实现的会员积分管理系统分前后台【ssm+B/S架构+源码+数据库+毕业论文】

Java项目：基于SSM框架实现的会员积分管理系统分前后台【ssm+B/S架构+源码+数据库+毕业论文】

一、项目简介 本项目是一套基于SSM框架实现的会员积分管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单、功能…
阅读更多...
springcloud-alibba之FeignClient

springcloud-alibba之FeignClient

代码地址&#xff1a;springcloud系列: springcloud 组件分析拆解 1.FeignClient的集成 springboot版本&#xff1a;3.1.5 springcloud组件版本&#xff1a;2022.0.4 nacos客户端的版本&#xff1a;2.3.2 1.引pom 这里引入了nacos和feginclient的版本 <dependency>…
阅读更多...
moonlight+sunshine+ParsecVDisplay ipad8-windows 局域网串流

moonlight+sunshine+ParsecVDisplay ipad8-windows 局域网串流

1.sunshine PC 安装 2.设置任意账户密码登录 3.setting 里 network启用UPNP IPV4IPV6 save apply 4.ParsecVDisplay虚拟显示器安装 5.ipad appstore download moonlight 6.以ipad 8 为例 2160*1620屏幕分辨率 7.ParsecVDisplay里面 custom设置2160*1620 240hz&#xff0c;…
阅读更多...
org.springframework.jdbc.BadSqlGrammarException异常

org.springframework.jdbc.BadSqlGrammarException异常

Bug 记录 概述 在执行定时任务更新电子书统计信息时&#xff0c;遇到了 org.springframework.jdbc.BadSqlGrammarException 异常&#xff0c;具体表现为 SQL 函数 count 被错误地解析为自定义函数 wiki.count&#xff0c;导致数据库更新操作失败。 详细描述 错误信息&#x…
阅读更多...
本地部署到服务器上的资源路径问题

本地部署到服务器上的资源路径问题

本地部署到服务器上的资源路径问题 服务器端的源代码的静态资源目录层级 当使用Thymeleaf时&#xff0c;在templates的目录下为返回的html页面&#xff0c;下面以两个例子解释当将代码部署到tomcat时访问资源的路径配置问题 例子一 index.html&#xff08;在templates的根目录…
阅读更多...
【算法专题】双指针算法

【算法专题】双指针算法

1. 移动零 题目分析 对于这类数组分块的问题&#xff0c;我们应该首先想到用双指针的思路来进行处理&#xff0c;因为数组可以通过下标进行访问&#xff0c;所以说我们不用真的定义指针&#xff0c;用下标即可。比如本题就要求将数组划分为零区域和非零区域&#xff0c;我们不…
阅读更多...
JavaScript-websocket的基本使用

JavaScript-websocket的基本使用

JavaScript-websocket的基本使用 文章说明JavaScript端后台--服务端连接演示 文章说明 本文主要介绍JavaScript中websocket的基本使用&#xff0c;后台采用Java编写WebSocket服务端 JavaScript端 websocket工具类 class Socket {constructor(url, onopen, onmessage, onerror, …
阅读更多...
【C++：类的基础认识和this指针】

【C++：类的基础认识和this指针】

C的类与C语言的struct结构体有啥区别&#xff1f; 默认的访问限定符不同 类的简要 关键字&#xff1a;class{}里面是类的主体&#xff0c;特别注意&#xff1a;{}后面的&#xff1b;不可以省略类中的变量叫做成员变量&#xff0c;类中的函数叫做成员函数类中访问有三种访问权限…
阅读更多...
第十四届蓝桥杯省赛C++B组G题【子串简写】题解（AC）

第十四届蓝桥杯省赛C++B组G题【子串简写】题解（AC）

题目大意 给定字符串 s s s&#xff0c;字符 a , b a, b a,b&#xff0c;问字符串 s s s 中有多少个 a a a 开头 b b b 结尾的子串。 解题思路 20pts 使用二重循环枚举左端点和右端点&#xff0c;判断是否为 a a a 开头 b b b 结尾的字符串&#xff0c;是则答案加一…
阅读更多...
代码随想录——划分字母区间（Leetcode763）

代码随想录——划分字母区间（Leetcode763）

题目链接 贪心 class Solution {public List<Integer> partitionLabels(String s) {int[] count new int[27];Arrays.fill(count,0);// 统计元素最后一次出现的位置for(int i 0; i < s.length(); i){count[s.charAt(i) - a] i;}List<Integer> res new Ar…
阅读更多...
rk3588 Android HDMI IN热插拔解决

rk3588 Android HDMI IN热插拔解决

一、前言 1、公司在使用 别的厂商的板卡遇到一个问题&#xff0c;开机我们的app自启就会闪退&#xff0c;后来定位发现是camera 的open出错了&#xff0c;这个问题的出现是因为没有插HDMI IN输入的问题导致的,所以需要对HDMI IN的热插拔进行检测&#xff0c;后面我把这个问题也…
阅读更多...
【文献解析】一种像素级的激光雷达相机配准方法

【文献解析】一种像素级的激光雷达相机配准方法

大家好呀&#xff0c;我是一个SLAM方向的在读博士&#xff0c;深知SLAM学习过程一路走来的坎坷&#xff0c;也十分感谢各位大佬的优质文章和源码。随着知识的越来越多&#xff0c;越来越细&#xff0c;我准备整理一个自己的激光SLAM学习笔记专栏&#xff0c;从0带大家快速上手激…
阅读更多...
leetcode-每日一题

leetcode-每日一题

3101. 交替子数组计数https://leetcode.cn/problems/count-alternating-subarrays/ 给你一个 二进制数组 nums 。 如果一个 子数组 中 不存在 两个 相邻 元素的值 相同 的情况&#xff0c;我们称这样的子数组为 交替子数组 。 返回数组 nums 中交替子数组的数量。 示例 …
阅读更多...
Linux|信号

Linux|信号

Linux|信号 信号的概念信号处理的三种方式捕捉信号的System Call -- signal 1.产生信号的5种方式2.信号的保存2.1 core 标志位 2.信号的保存2.1 对pending 表 和 block 表操作2.2 阻塞SIGINT信号 并打印pending表例子 捕捉信号sigaction 函数验证当前正在处理某信号&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023