当前位置: 首页 > news >正文

web学习笔记(八十)

目录

1.小程序实现微信一键登录

2. 小程序的授权流程

 3.小程序配置vant库

4.小程序配置分包 

5.小程序配置独立分包

6.小程序分包预下载


1.小程序实现微信一键登录

要先实现小程序一键登录首先我们需要给按钮设置一个绑定事件,然后在绑定事件内部通过wx.login来获取登录凭证code,然后将将code+appid+secret传递到开发者服务器,进行登录操作,发送post请求,此时就需要后端进行接口校验code和appid是否正确,是否配对,如果校验成功,后端回利用openid和session_key加密生成token登录态,返回给小程序。然后前端再将token进行持久化存储。

Page({/*** 页面的初始数据*/data: {},login() {// 1.通过wx.login获取登陆凭证codewx.login({success: (res) => {console.log(res.code);//2. 将code+appid+secret传递到开发者服务器,进行登录操作,发送post请求// 3.开发者服务器利用jscode2session接口校验code和appid是否正确,是否配对,如果校验成功,后端回利用openid和session_key加密生成token登录态,返回给小程序// 4.小程序端将token存储起来,一键登录就完成了。此后发送请求需在请求头中携带token,让开发者服务器验证token是否正确,正确就返回数据。wx.request({url: "http://localhost:3000/login",method: "post",data: {code: res.code,},success: (data) => {console.log(data.data.token);// 做持久化存储wx.setStorageSync("token", data.data.token);// 向后端发送请求,获取购物车列表wx.request({url: "http://localhost:3000/carts",header: {auth: wx.getStorageSync("token"),},success: ({ data }) => {console.log("---", data);},});},});},});},
});

2. 小程序的授权流程

当我们的小程序需要定位或者是麦克风权限的时候是需要向用户发起授权请求的,。然后发起弹窗询问用户是否同意授权小程序该权限,如果用户之前已经同意授权则不会出现弹窗。在微信开发文档中有很多权限的接口,下面编写的是获取定位权限的实例,可以按照这个思路自行编写其他权限的相关代码。

  getAddress() {// 获取用户精确位置// 1.先查询是否已授权wx.getSetting({success(res) {console.log(res.authSetting);if (!res.authSetting["scope.userLocation"]) {// 2.调用接口进行授权  wx.authorizewx.authorize({scope: "scope.userLocation",success() {console.log("用户同意授权");wx.getLocation();},fail() {console.log("用户拒绝授权");// 3.如果用户拒绝授权,需要通过wx.openSetting再次进行授权,此时进入授权页面wx.showModal({title: "提示",content: "定位功能必须开启定位权限",success: () => {wx.openSetting({success(res) {console.log("开启成功", res.authSetting);},});},});},});} else {}},});},

 3.小程序配置vant库

(1)在终端输入 npm i @vant/weapp命令

(2)把app.js文件中的"style":"v2"去除(这句话是小程序用来渲染页面用到,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件的样式混乱。)

(3)构建npm包 (因为我们通过npm安装的包是node的包,我们需要编译成小程序的包才可以使用)。

点击工具>构建即可。

 

编译完成后会生成下列文件夹

(5)在app.json中 进行全局注册

eg:注册vue中的Button组件

  "usingComponents": {"van-button": "@vant/weapp/button/index"}

 

4.小程序配置分包 

     分包主要用来解决小程序体积过大的问题,小程序本身就有轻量化的特点,因此微信对小程序的体积是有要求的(整个小程序所有的分包大小不超过20MB,开通虚拟支付后的小游戏不超过30MB单个分包/主包不能超过2MB),采用分包可以优化小程序首次启动的下载时间(和路由懒加载的原理类似),还可以在多团队共同开发时更好的解耦协作。注意:TabBar页面只能放在主包里面。

 (1)创建subpackage文件夹,在里面创建pages文件夹,然后将需要放到分包且不是TabBar的页面移动到pages文件夹内,

(2) 在app.json中修改路由(注意:需要将pages中不需要的路由给删除掉)

  "subpackages": [{"root": "subpackages","pages": ["pages/Login/Login", "pages/lifecycle/lifecycle"]}],

5.小程序配置独立分包

         独立分包和小程序内部的分包和主包都没关系,他是单独独立出来的,通常我们将打开小程序时加载的广告页面放置到独立分包内部。

配置独立分包和分包的步骤是一样的,只不过是多了一个  "independent": true的配置来证明这个分包是独立分包。在app.js页面给分包添加配置:

    {"root": "singlepackage","pages": ["pages/ad/ad"],"independent": true}

6.小程序分包预下载

       因为小程序在加载页面时只会先加载主包的页面,分包的页面是被点击后才会进行下载的操作,这样会导致用户首次进入分包页面速度较慢,因此我们可以通过分包预下载将点击量高的页面所在分包提前下载出来,提供用户的体验感(注意:分包预下载是异步操作,系统会先将主包下载完成后进行预下载的操作)。

  "preloadRule": {"pages/index/index": {"network": "all","packages": ["subpackages"]}},

相关文章:

web学习笔记(八十)

目录 1.小程序实现微信一键登录 2. 小程序的授权流程 3.小程序配置vant库 4.小程序配置分包 5.小程序配置独立分包 6.小程序分包预下载 1.小程序实现微信一键登录 要先实现小程序一键登录首先我们需要给按钮设置一个绑定事件,然后在绑定事件内部通过wx.login…...

深度解析 Raft 分布式一致性协议

本文参考转载至:浅谈 Raft 分布式一致性协议|图解 Raft - 白泽来了 - 博客园 (cnblogs.com) 深度解析 Raft 分布式一致性协议 - 掘金 (juejin.cn) raft-zh_cn/raft-zh_cn.md at master maemual/raft-zh_cn (github.com) 本篇文章将模拟一个KV数据读写服…...

Android10以上实现获取设备序列号功能

Android10以上实现获取设备唯一标识,目前只支持华为和荣耀设备。实现原理:通过无障碍服务读取序列号界面。 public class DeviceHelper implements Application.ActivityLifecycleCallbacks {static final String TAG "WADQ_DeviceHelper";s…...

从0到1:培训老师预约小程序开发笔记二

背景调研 培训老师预约小程序: 教师和学生可以更便捷地安排课程,并提升教学质量和学习效果,使之成为管理和提升教学效果的强大工具。培训老师可以在小程序上设置自己的可预约时间,学员可以根据老师的日程安排选择合适的时间进行预…...

【FFmpeg】av_read_frame函数

目录 1.av_read_frame1.2 从pkt buffer中读取帧(avpriv_packet_list_get)1.3 从流当中读取帧(read_frame_internal)1.3.1 读取帧(ff_read_packet)1.3.2 解析packet(parse_packet)1.3…...

女生学计算机好不好?感觉计算机分有点高……?

众所周知,在国内的高校里,计算机专业的女生是非常少的,很多小班30人左右,但是每个班女生人数只有个位数。这就给很多人一个感觉,是不是女生天生就不适合学这个东西呢?女生是不是也应该放弃呢?当…...

windows10/11 如何开启卓越性能模式

在Windows 10和Windows 11中,可以通过以下步骤启用“卓越性能”模式。请注意,卓越性能模式仅在Windows 10 Pro for Workstations和Windows 10 Enterprise版本中可用。 使用命令提示符启用卓越性能模式 打开命令提示符: 按Win X键&#xff0…...

JSP WEB开发(二) JavaBean

目录 JavaBean JavaBean特征 JavaBean的标签 JavaBean 的范围 标签 JavaBean JavaBean 是一种符合某些命名和设计规范的 Java 类,它是一种可重用组件技术,主要用于封装数据,执行负责的计算任务,封装事务逻辑等。JavaBean 的实…...

G2.【C语言】EasyX绘制颜色窗口

1.窗口 窗口&#xff1a;宽度*高度&#xff08;单位都是像素&#xff09; #include <stdio.h> #include <easyx.h> int main() {initgraph(640, 480);getchar();return 0; } 640是宽&#xff0c;480是高 2.操作窗口的三个按钮 #include <stdio.h> #incl…...

异构计算技术与DTK异构开发套件

异构计算技术与DTK异构开发套件 费林分类法&#xff1a;SISD SIMD MISD MIMD 指令流I和数据流D MIMD不同存储结构&#xff1a; UMA均匀存储访问模型NUMA非均匀存储访问模型Cluster集群 现在以Cluster为主 DTK异构开发套件 生态结构 异构并行编程模型是什么 HIP&#xff…...

数据结构之“栈”(全方位认识)

&#x1f339;个人主页&#x1f339;&#xff1a;喜欢草莓熊的bear &#x1f339;专栏&#x1f339;&#xff1a;数据结构 前言 栈是一种数据结构&#xff0c;具有" 后进先出 "的特点 或者也可见说是 ” 先进后出 “。大家一起加油吧冲冲冲&#xff01;&#xff01; …...

vue项目打包部署后 浏览器自动清除缓存问题(解决方法)

vue打包部署后 浏览器缓存问题&#xff0c;导致控制台报错ChunkLoadError: Loading chunk failed的解决方案 一、报错如下&#xff1a; 每次build打包部署到服务器上时&#xff0c;偶尔会出现前端资源文件不能及时更新到最新&#xff0c;浏览器存在缓存问题&#xff0c;这时在…...

解决vscode配置C++编译带有中文名称报错问题

在新电脑上安装vscode运行带有中文路径和中文名称的C代码时遇到报错 根据别人的教程将laugh.json文件中"program": "${fileDirname}\\${fileBasenameNoExtension}.exe",改成了"program": "${fileDirname}\\output\\test.exe",&#x…...

A61 STM32_HAL库函数 之 TIM扩展驱动 -- C -- 所有函数的介绍及使用

A61 STM32_HAL库函数 之 TIM扩展驱动 -- C -- 所有函数的介绍及使用 1 该驱动函数预览1.24 HAL_TIMEx_OnePulseN_Stop1.25 HAL_TIMEx_OnePulseN_Start_IT1.26 HAL_TIMEx_OnePulseN_Stop_IT1.27 HAL_TIMEx_ConfigCommutationEvent1.28 HAL_TIMEx_ConfigCommutationEvent_IT1.29 …...

使用瀚高数据库开发管理工具进行数据的备份与恢复---国产瀚高数据库工作笔记008

使用瀚高数据库,备份 恢复数据 然后找到对应的目录 其实就是hgdbdeveloper,瀚高的数据库开发管理工具 对应的包中有个dbclient 这个目录,选中这个目录以后,就可以了,然后 在对应的数据库,比如 data_middle 中,选中 某个模式,比如bigdata_huiju 然后右键进行,点击 恢复,然…...

css 选择器汇总

目录 所有选择器伪类选择器 所有选择器 选择器用法id选择器#myid类选择器.myclassname标签选择器div,h1,p相邻选择器h1p子选择器ul > li后代选择器li a通配符选择器*属性选择器a[rel“external”]伪类选择器a:hover, li:nth-child 伪类选择器 在CSS3中新增了一个结构伪类选…...

My Greedy Algorithm(贪心算法)之路(一)

引子&#xff1a;我们之前&#xff0c;其实也遇到过贪心算法&#xff0c;0,1背包就是一个典型的贪心算法问题&#xff0c;那今天我就来开始my-Greedy Algorithm的道路。 什么是贪心算法&#xff1f; 我愿称贪心算法为贪婪鼠目寸光&#xff0c;贪心算法&#xff08;Greedy Alg…...

Win11 Python3.10 安装pytorch3d

0&#xff0c;背景 Python3.10、cuda 11.7、pytorch 2.0.1 阅读【深度学习】【三维重建】windows10环境配置PyTorch3d详细教程-CSDN博客 1&#xff0c;解决方法 本来想尝试&#xff0c;结果发现CUB安装配置对照表里没有cuda 11.7对应的版本&#xff0c;不敢轻举妄动&#x…...

kotlin 中 string array 怎么表示

在 Kotlin 中&#xff0c;字符串数组可以使用 Array<String> 类型表示。你可以通过多种方式来创建和初始化字符串数组。以下是几种常见的方法&#xff1a; 使用 arrayOf 函数&#xff1a; val stringArray arrayOf("Hello", "World", "Kotli…...

ffmpeg使用bmp编码器把bgr24编码为bmp图像

version #define LIBAVCODEC_VERSION_MAJOR 60 #define LIBAVCODEC_VERSION_MINOR 15 #define LIBAVCODEC_VERSION_MICRO 100 note 不使用AVOutputFormat code void CFfmpegOps::EncodeBGR24ToBMP(const char* infile, const char* width_str, const char* height_str…...

天翼网盘网页版绕过50M限制下载大文件?F12开发者工具实战教程

突破网页端下载限制的浏览器开发者工具实战指南 在云存储服务日益普及的今天&#xff0c;许多平台为了推广客户端应用&#xff0c;会在网页端设置各种功能限制。对于技术爱好者而言&#xff0c;这些限制往往可以通过浏览器内置的开发者工具进行突破。本文将详细介绍如何利用F12…...

Qwen3.5小尺寸模型开源,9B碾压GPT开源版,消费级显卡就能跑

AI圈又出大新闻了✨ 阿里通义千问3.5系列小尺寸模型正式亮相&#xff0c;直接打破“小模型能力弱”的固有认知&#xff0c;甚至实现了“以小胜大”的逆袭&#xff0c;本地部署门槛直接拉到平民级&#xff01; 先上核心干货——这次千问3.5一口气推出了4款小尺寸模型&#xff0c…...

JPEXS Free Flash Decompiler社区大使选拔流程:申请与评审完全指南

JPEXS Free Flash Decompiler社区大使选拔流程&#xff1a;申请与评审完全指南 【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler JPEXS Free Flash Decompiler是一款功能强大的Flash反编译…...

5步掌握抖音音乐批量下载:douyin-downloader高效使用指南

5步掌握抖音音乐批量下载&#xff1a;douyin-downloader高效使用指南 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 在数字内容创作的浪潮中&#xff0c;背景音乐已成为视频作品的灵魂元素。然而&#xff0…...

RK3568 NPU RKNN(五):RKNN-ToolKit2性能与内存评估实战解析

1. 环境准备与工具链搭建 在开始RKNN-ToolKit2的性能与内存评估之前&#xff0c;我们需要先搭建完整的开发环境。这里以野火LubanCat开发板为例&#xff0c;具体硬件配置为RK3568芯片4GB内存版本。开发主机建议使用Ubuntu 20.04系统&#xff0c;确保Python版本在3.6-3.8之间。 …...

Vivado中OSD核报错全攻略:从IP_flow 19-167到BD 41-1030的解决方案

Vivado中OSD核报错全攻略&#xff1a;从IP_flow 19-167到BD 41-1030的解决方案 在FPGA开发过程中&#xff0c;Xilinx Vivado工具链的OSD&#xff08;On-Screen Display&#xff09;核是一个常用的视频处理IP&#xff0c;但开发者常会遇到各种报错问题。本文将深入解析从IP_flo…...

TinyMCE 5插件开发实战:手把手教你定制首行缩进功能(Vue版)

TinyMCE 5插件开发实战&#xff1a;手把手教你定制首行缩进功能&#xff08;Vue版&#xff09; 在内容创作领域&#xff0c;富文本编辑器的灵活性和扩展性往往决定了最终的用户体验。TinyMCE作为一款广受欢迎的富文本编辑器&#xff0c;其插件系统为开发者提供了无限可能。本文…...

如何在Windows上零配置运行Android应用?APK Installer的革命性方案

如何在Windows上零配置运行Android应用&#xff1f;APK Installer的革命性方案 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否曾经遇到过这样的场景&#xff1a…...

JiYuTrainer:极域电子教室多任务学习解决方案 - 提升教学环境下的自主操作能力

JiYuTrainer&#xff1a;极域电子教室多任务学习解决方案 - 提升教学环境下的自主操作能力 【免费下载链接】JiYuTrainer 极域电子教室防控制软件, StudenMain.exe 破解 项目地址: https://gitcode.com/gh_mirrors/ji/JiYuTrainer 在现代数字化教学环境中&#xff0c;极…...

5个必知技巧:让你的PT下载效率提升300%的浏览器插件指南

5个必知技巧&#xff1a;让你的PT下载效率提升300%的浏览器插件指南 【免费下载链接】PT-Plugin-Plus PT 助手 Plus&#xff0c;为 Microsoft Edge、Google Chrome、Firefox 浏览器插件&#xff08;Web Extensions&#xff09;&#xff0c;主要用于辅助下载 PT 站的种子。 项…...