小程序~~4(npm支持+分包加载+开放功能)

news2024/9/24 9:22:44

目录

1.npm支持

自定构建npm

vant组件库的使用

vant app组件样式覆盖

2.分包加载

介绍

分包加载及打包引用原则

独立分包的配置

分包预下载

3.开放能力

获取微信头像

获取微信昵称

转发功能

分享到朋友圈

手机号验证组件

客服功能

框架接口-getApp()

页面间通信

自定义导航栏


1.npm支持

自定构建npm

为了简化文件目录,将小程序源码放在miniprogram目录下

需要在project.config.json中配置相关属性

vant组件库的使用

先将app.json中的"style":"v2"去除,之后在官方文档中找到想要的组件样式,将组件在app.json中进行注册,即引入组件,之后便可以在wxml中直接使用组件

vant app组件样式覆盖

第一种解除样式隔离,修改styleIsoation:"shared",之后再去.wxss文件中修改样式,注意修改样式时可以写.van-button--primary{}

第二种使用外部样式类,给组件定义一个类名,在.wxss文件中就可以进行修改

第三种使用css变量,先在app.wxss文件中定义一个page{}方法,在其中定义css变量(以--开头),之后在组件使用者的页面wxss文件中使用该变量,用van(--变量名)来调用;如果需要批量修改组件,可以再定制一个类名,之后再页面的wxss文件中就可以使用来修改样式

2.分包加载

介绍

分包加载及打包引用原则

打包原则:tabBar页面必须在主包内,又属于分包的pages页面,分包之间不能相互嵌套

引用原则:主包不能引用分包的资源,但分包可以使用主包的公共资源;分包与分包之间资源无法相互引用,但是分包异步化时不受此条件限制

独立分包的配置

独立分包:是指能够独立于主包和其他分包运行的包

从独立分包中的页面进入小程序,不需要下载主包,当用户进入普通分包或主包内页面时,主包才会被下载;开发者可以将功能相对独立的页面配置到独立分包中

设置独立分包:给subPackages定义的分包结构添加independent:"true"字段

注意:独立分包不能依赖主包和其它分包中的资源;主包中的app.wxss对独立分包无效,所以不在里面写分包的样式

分包预下载

分包预下载需要在app.json文件中通过preloadRule字段设置预下载规则

preloadRule是一个对象,对象的key表示访问哪个路径时进行预加载,value是进入此页面的预下载设置,有两个配置项

packages:进入页面后预下载分包的root或者name,__App__表示主包

network:在指定网路下预下载,可选值为all(不限网络)、 wifi(仅wifi条件下预下载)

第一个是在进入index页面时进行预下载goodModule分包,此处写的是根路径,可以只写一个goodModule

第二个是预下载主包,写的是根路径,其中packages的属性值是__APP__

3.开放能力

获取微信头像

在wxml文件中吧图片放在一个按钮里面(想实现点击的效果),将图片地址改为一个变量,在js文件中声明,方便后续修改;之后给按钮绑定一个open-type="chooseAvatar"和点击事件;在js文件中调用点击函数,将获取过来的值重新赋值给avatarUrl,实现将自己的微信头像上传

获取微信昵称

通过form包裹住input和button组件;将input组件的type值设置为nickname,在用户输入框输入时,键盘上方显示微信昵称,添加name属性,form组件会自动收集带有name属性的表单元素的值;将按钮的form-type改为submit,按钮就变成了提交按钮,点击时触发提交事件

转发功能

转发功能有两种方式

页面.js文件中必须声明onShareAppMessage事件监听函数,并自定义转发内容,只有定义此事件处理函数,右上角菜单才会显示转发按钮

通过给button组件设置属性open-type="share",可以在用户点击过后触发Page.onShareAppMessage事件监听函数

分享到朋友圈

页面要先设置“发送给朋友”,即声明onShareAppMessage事件监听函数;之后再声明onShareTimeline事件监听函数

手机号验证组件

客服功能

框架接口-getApp()

在小程序中可以通过getApp()来获取到小程序全局唯一的App实例,因此在App()方法中添加全局共享的数据、方法,从而实现页面、组件的数据传值

页面间通信

自定义导航栏

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

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

相关文章

使用hutool工具将数字类型集合转换为字符串数组,long类型集合转字符串集合或数组相互转换

1.导入hutool的maven依赖 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.16</version></dependency>2.直接复制代码运行 import cn.hutool.core.convert.Convert; import java.…

C语言:指针(2)

一.数组名 在了解数组名前我们先看一段代码 int arr[10] {1,2,3,4,5,6,7,8,9,10}; int *p &arr[0]; 根据我们上一篇学习的知识&#xff0c;我们知道&arr[0]是数组第一个元素的地址&#xff0c;这时我们再看另一段代码的运行结果。 #include <stdio.h> int ma…

U盘文件或目录损坏的应对之策:从绝望到希望

遭遇困境&#xff1a;U盘文件或目录的隐形危机 在日常的数字存储与传输中&#xff0c;U盘以其便携性和高容量成为了我们不可或缺的工具。然而&#xff0c;当U盘中的文件或目录突然损坏且无法读取时&#xff0c;这份便捷瞬间化为了困扰。面对屏幕上冰冷的错误提示&#xff0c;用…

【人工智能】Transformers之Pipeline(七):图像分割(image-segmentation)

目录 一、引言 二、图像分割&#xff08;image-segmentation&#xff09; 2.1 概述 2.2 技术原理 2.3 应用场景 2.4 pipeline参数 2.4.1 pipeline对象实例化参数 2.4.2 pipeline对象使用参数 2.4 pipeline实战 2.5 模型排名 三、总结 一、引言 pipeline&#xff…

【mongodb】mongodb分片高可用以及加密操作

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…

Prometheus+Alertmanager+邮件告警

参考node_exporter-CSDN博客&#xff0c;球球不要断更&#xff01;&#xff01;&#xff01;&#xff01; 大致流程 1.部署promethus 可以写一个自定义的 systemd 服务启动文档&#xff0c;详情见自定义的 systemd 服务启动方式-CSDN博客 [rootlocalhost system]# sudo tee /e…

python-局部求和(赛氪OJ)

[题目描述] 输入 2020 个整数&#xff0c;输出其中能被数组中其它元素整除的那些数组元素。输入格式&#xff1a; 输入一行&#xff0c;输入 2020 个整数&#xff0c;中间用空格隔开。输出格式&#xff1a; 输出能被数组中其他元素整除的元素&#xff0c;每行输出一个。样例输入…

Sqlserver递归生成日期范围

文章目录 Sqlserver递归生成日期范围业务背景SQL脚本执行结果 Sqlserver递归生成日期范围 业务背景 有时候需要按天生成数据&#xff0c;需要用到日期表进行循环处理 SQL脚本 ;WITH DateRange AS ( SELECT 1 AS Seq, 2024-01-01 AS DateValue UNION ALL SELECT Seq1 Seq, C…

苹果手机升级iOS18测试版本后使用体验不好?怎么降级?

近期苹果发布了诸多的iOS18版本给用户提前尝鲜测试&#xff0c;许多果粉们都迫不及待的选择了升级&#xff0c;但是有不少的果粉升级时没有考虑到设备适配性问题&#xff0c;导致升级之后手机变得有些卡顿&#xff0c;使用体验不好时&#xff0c;想要降级回到正式的版本&#x…

双向链表知识点(附源代码)

双向链表的特点 带头链表⾥的头结点&#xff0c;实际为“哨兵位”&#xff0c;哨兵位结点不存储任何有效元素&#xff0c;只是站在这⾥“放哨的” 例图解析 双向链表与单链表的区别 双向链表&#xff1a;除了存储的数据外还有两个指针&#xff0c;具有头节点&#xff0c;还有…

【秋招笔试】24-08-01-用友-秋招笔试题

🍭 大家好这里是清隆Coding ,一枚热爱算法的程序员 💻 ACM金牌团队🏅️ | 多次AK大厂笔试 | 编程一对一辅导 ✨ 本系列打算持续跟新 秋招笔试题 👏 感谢大家的订阅➕ 和 喜欢💗 ✨ 笔试合集传送们 -> 🧷春秋招笔试合集 ⌚️ 01.物流网络安全节点 问题描述 L…

数据结构与算法(Java)--栈(Linked_Stack)

博客主页&#xff1a;誓则盟约系列专栏&#xff1a;Java SE关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 线性表&#xff1a;栈 栈的定义 栈&#xff08;Stack&#xff09;是一种特殊的…

谷歌开源最强端侧小模型:2B参数越级跑赢GPT-3.5-Turbo,苹果15Pro运行飞快

谷歌也来卷「小」模型了&#xff0c;一出手就是王炸&#xff0c;胜过了比自己参数多得多的GPT-3.5、Mixtral竞品模型。 点击访问我的技术博客https://ai.weoknow.comhttps://ai.weoknow.com 今年 6 月底&#xff0c;谷歌开源了 9B、27B 版 Gemma 2 模型系列&#xff0c;并且自亮…

嵌入式C++、MQTT、React、Spring Boot和MongoDB:物联网工厂检测系统设计思路(代码示例)

项目概述 随着工业4.0和物联网&#xff08;IoT&#xff09;技术的发展&#xff0c;越来越多的工厂借助智能化手段进行生产数据的采集和实时监控。本项目设计并实现一个物联网工厂检测系统&#xff0c;通过传感器采集关键参数&#xff0c;并利用云平台进行数据存储和分析&#…

Python 教程(九):内置模块与第三方模块

目录 专栏列表前言1. 模块基础目录结构示例模块 mymodule.py 2. 导入模块3. 从模块中导入特定内容3.1 from … import *总结&#xff1a; 4. 包示例包结构moduleone.pymoduletwo.py__init__.py导入包 5. 模块搜索路径6. 内置模块示例 7. 第三方库8. __name__ 属性9. 初始化和清…

开源小项目-基于STM32F103的频率测量实现 V1.1(ADC+TIM+DMA+FFT)

目录 一、快速傅里叶变换&#xff08;FFT&#xff09; 1.1 工作原理 1.2 应用 1.3 FFT官方支持库 二、使用外设简介 2.1 ADC外设 2.2 TIM外设 3.3 DMA外设 三、代码设计过程 3.1 初始化 3.2 DMA中断数据处理 3.3 其他自定义函数 1. 计算信号频率 2. 计算信号幅度…

G-EVAL: NLG Evaluation using GPT-4 with Better Human Alignment

文章目录 题目摘要方法实验分析相关工作结论 题目 G-EVAL:使用GPT-4进行NLG评估&#xff0c;具有更好的人类一致 论文地址&#xff1a;https://arxiv.org/abs/2303.16634 项目地址&#xff1a;https://github.com/nlpyang/geval 摘要 自然语言生成(NLG)系统生成的文本质量难以…

网站开发涉及到的技术内容介绍——前端

一、网站开发涉及前后端交互模式 一般来说网站项目分为两种【前后端不分离、前后端分离】,其中前后端不分离的项目是(后端语言可以直接与前端的html等内容糅合在一起,后端语言可以操作数据进行动态渲染前端的html文件进行展示)。后端分离的项目是(后端语言不会直接对前端的…

c++| c++11左右值引用,完美转发,可变参数模板

c| c11的新特性 左&#xff0c;右值引用什么是左值&#xff0c;右值左值引用和右值引用右值引用解决什么问题呢&#xff1f;移动构造万能引用形式 完美转发格式 lambada表达式格式 可变参数模板可变参数模板实现打印不同类型emplace_push以list的emplace_back的实现举例 左&…

掌握 HTTP 请求的艺术:理解 cURL GET 语法

在 Web 开发和服务器通信领域&#xff0c;掌握 HTTP 请求对于寻求有效与 Web 服务和 API 交互的开发人员至关重要。在众多可用于发出 HTTP 请求的工具中&#xff0c;cURL 脱颖而出&#xff0c;成为全球开发人员信赖的强大且多功能的命令行工具。在这篇博文中&#xff0c;我们将…