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"]}},

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

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

相关文章

产品经理-工作流程及职能(6)

产品经理作为互联网项目的主心骨,连接着团队的所有成员(开发、设计、运营、测试、市场等) 用合理的产品规划和清晰的产品愿景带领大家前进,通过满足用户需求来创造属于自己的商业利益。 在通常情况下,PM需要对整个产品…

最新扣子(Coze)实战案例:使用图像流做超分,模糊图片秒变清晰,完全免费教程

🧙‍♂️ 大家好,我是斜杠君,手把手教你搭建扣子AI应用。 📜 本教程是《AI应用开发系列教程之扣子(Coze)实战教程》,完全免费学习。 👀 关注斜杠君,可获取完整版教程。👍&#x1f3f…

当需要对大量数据进行排序操作时,怎样优化内存使用和性能?

文章目录 一、选择合适的排序算法1. 快速排序2. 归并排序3. 堆排序 二、数据结构优化1. 使用索引2. 压缩数据3. 分块排序 三、外部排序1. 多路归并排序 四、利用多核和并行计算1. 多线程排序2. 使用并行流 五、性能调优技巧1. 避免不必要的内存复制2. 缓存友好性3. 基准测试和性…

区块链技术如何改变供应链管理?

引言 供应链管理在现代商业中扮演着至关重要的角色,确保产品和服务从原材料到最终消费者的顺利流转。然而,当前的供应链管理面临诸多挑战,如信息不透明、数据篡改和效率低下等问题,这些问题严重制约了供应链的整体效能和可信度&am…

简单分享下python多态

目录: 一、多态是啥嘞(龙生九子各有不同,这就是多态) 二、基础的实例 三、多态的优势与应用场景 四、深入理解 一、多态是啥嘞(龙生九子各有不同,这就是多态) 多态(Polymorphism&…

笔记14:程序中的循环结构

生活中的循环现象: -日复一日,年复一年 -春夏秋冬,四季交替 -周日,周一,周二,周三,周四,周五,周六 -人生是一个轮回,多年后,又会回到最初的原点 …

C++|哈希应用->布隆过滤器

目录 一、概念 二、模拟实现 三、布隆过滤器扩展应用 上一篇章学习了位图的使用,但它只适用于整数,对于要查询字符串是否在不在,位图并不能解决。所以针对这一问题,布隆过滤器可以派上用场,至于布隆过滤器是什么&am…

全球首款商用,AI为视频自动配音配乐产品上线

近日,海外推出了一款名为Resona V2A的产品,这是全球首款商用视频转音频 (V2A) 技术产品。这项突破性技术利用AI,仅凭视频数据即可自动生成高质量、与上下文相关的音频,包括声音设计、音效、拟音和环境音,为电影制作人、…

Hi3861 OpenHarmony嵌入式应用入门--TCP Server

本篇使用的是lwip编写tcp服务端。需要提前准备好一个PARAM_HOTSPOT_SSID宏定义的热点,并且密码为PARAM_HOTSPOT_PSK LwIP简介 LwIP是什么? A Lightweight TCP/IP stack 一个轻量级的TCP/IP协议栈 详细介绍请参考LwIP项目官网:lwIP - A Li…

奇景光电战略投资Obsidian,共筑热成像技术新未来

5月29日,业界领先的IC设计公司奇景光电宣布,将对热成像传感器解决方案制造商Obsidian进行战略性投资,并以主要投资者的身份,参与到Obsidian的可转换票据融资活动中。虽然奇景光电并未公开具体的投资金额,但这一举动无疑向市场传递了一个明确的信号:奇景光电对Obsidian的技…

10、matlab中字符、数字、矩阵、字符串和元胞合并为字符串并将字符串以不同格式写入读出excel

1、前言 在 MATLAB 中,可以使用不同的数据类型(字符、数字、矩阵、字符串和元胞)合并为字符串,然后将字符串以不同格式写入 Excel 文件。 以下是一个示例代码,展示如何将不同数据类型合并为字符串,并以不…

【Mindspore进阶】-03.ShuffleNet实战

ShuffleNet图像分类 当前案例不支持在GPU设备上静态图模式运行,其他模式运行皆支持。 ShuffleNet网络介绍 ShuffleNetV1是旷视科技提出的一种计算高效的CNN模型,和MobileNet, SqueezeNet等一样主要应用在移动端,所以模型的设计目标就是利用有…

分享实现地铁车辆侧面图

简介 通过伪类和关键帧动画实现地铁车辆侧面图 在线演示 伪元素和关键帧动画 实现代码 <!DOCTYPE html><html><head> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <meta http-equiv"X-UA-Co…

设计模式之单例模式(Java)

单例模式实现方式&#xff1a;懒汉式、饿汉式、双重检查、枚举、静态内部类&#xff1b; 懒汉式&#xff1a; /*** 懒汉式单例模式* author: 小手WA凉* create: 2024-07-06*/ public class LazySingleton implements Serializable {private static LazySingleton lazySinglet…

对BSV区块链的曼达拉网络通俗易懂的解释

​​发表时间&#xff1a;2023年6月15日 BSV区块链正在引入“曼达拉”升级&#xff0c;使BSV区块链网络的拓扑结构能够适配Teranode&#xff0c;适配这个可以大幅扩容的节点软件。BSV区块链上曼达拉网络的概念并不会改变整个系统的核心规则&#xff1b;相反&#xff0c;它能够引…

为什么https比http更安全

读完本文&#xff0c;希望你能明白&#xff1a; HTTP通信存在什么问题HTTPS如何改进HTTP存在那些问题HTTPS工作原理是什么 一、什么是HTTPS HTTPS是在HTTP上建立SSL加密层&#xff0c;并对传输数据进行加密&#xff0c;是HTTP协议的安全版。现在它被广泛用于万维网上安全敏感…

【qt】如何获取本机的IP地址?

需要用到这个类QHostInfo和pro里面添加network模块 用这个类的静态函数forName()来获取该主机名的信息 返回的就是这个类 这个QHostInfo类就包括主机的IP地址信息 用静态函数addresses()来获取 返回的是一个QHostAddress的容器 QList<QHostAddress>addrList hostIn…

课题申报书中要用的思路图(技术路线图)30张,超高清!

最近在弄课题申报书的时候&#xff0c;需要画“技术路线图”&#xff1b;和小伙伴们探讨才发现很多人居然不会画这种图&#xff0c;还有很多人在Word里面一点一点拼凑…… 我给大家收集了网上非常热门的30张“技术路线图”&#xff0c;但网上流传的都太模糊了&#xff0c;想看…

KBPC3506-ASEMI储能专用整流桥KBPC3506

编辑&#xff1a;ll KBPC3506-ASEMI储能专用整流桥KBPC3506 型号&#xff1a;KBPC3506 品牌&#xff1a;ASEMI 封装&#xff1a;KBPC-4 正向电流&#xff08;Id&#xff09;&#xff1a;35A 反向耐压&#xff08;VRRM&#xff09;&#xff1a;600V 正向浪涌电流&#xf…

基于RK3588的8路摄像头实时全景拼接

基于RK3588的8路摄像头实时全景拼接 输入&#xff1a;2路csi转8路mpi的ahd摄像头&#xff0c;分辨率1920 * 1080 8路拼接结果&#xff1a; 6路拼接结果&#xff1a; UI界面&#xff1a; UI节目设计原理