2021-11-17 小程序-笔记

网址参考:https://youzan.github.io/vant-weapp/#/quickstart


Field 输入框

介绍

用户可以在文本框内输入或编辑文字。

步骤

1.新建一个终端,初始化一个包的描述文件,npm init 

2.安装一个第三方的包,通过 npm 安装,在终端输入:npm i @vant/weapp -S --production 

安装完成之后会出现一个 node_modules 文件夹

3.点击菜单栏 工具-构建 npm


构建完成,点击确定


创建项目:

 1.项目目录

pages目录:用于存放所有的页面。

utils目录:用于存放工具类文件。

app.js:是入口文件,程序在运行时,首先要执行该文件。

app.json:是全局配置文件,用于配置小程序的信息(它里面配置的是全局信息)。

app.wxss:是全局样式文件。全局样式文件里面定义的选择器,在所有的页面中生效。

project.config.json:是项目配置文件。

sitemap.json:是SEO配置文件,方便用户搜索到该小程序。

2.app.json

(1)pages配置项

pages里面注册的是视图。用于指定小程序由哪些页面组成,每一项都对应一个页面的路径(含文件名)信息。

 

(2)window配置项

window 是全局窗口配置。

backgroundTextStyle 设置文本样式(下拉loading的样式),仅支持 dark / light。

navigationBarBackgroundColor 设置导航栏背景。

navigationBarTitleText 设置导航栏文本。

navigationBarTextStyle 设置导航栏标题颜色,仅支持 black / white。

代码:

 "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#369",

    "navigationBarTitleText": "KW43-APP",

    "navigationBarTextStyle":"white"

  }


Button 按钮

介绍:

按钮用于触发一个操作,如提交表单。

在app.json或index.json中引入组件,

"usingComponents": { 

 "van-button": "@vant/weapp/button/index"

}

按钮类型:

支持default、primary、info、warning、danger五种类型,默认为default。

  • Ts学习笔记 初学者7. 学习笔记typescript
    一、Ts与Js区别TsJsJavaScript的超集,用于解决大型项目的代码复杂性一种脚本语言,用于创建动态网页。强类型,支持静态和动态类型动态弱类型语言可以在编译期间发现并纠正错误只能在运行时发现错误不允许改变变量的数据类型变量可以被赋予不同类型的值二、Ts基础类型:boolean,number,string,undefined,null,any,unknown,void,neverany,un
  • UNI-APP+VUE3+VITE+VSCode开发经验及填坑记录(持续更新ING) 集成显卡 前端项目实践uni-appvscodeide
    uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。快速开发模板unibest:最好的uniapp开发框架,由uniapp+Vue3+Ts+Vite5+UnoCss+VSCode(可选webstorm)+uni插件+wot-ui(
  • Qt爬坑笔记 klzed_ qtc++后端ui
    1.自定义一个QWidget的派生类,将其作为子部件并设置样式表时,需要重写paintEvent事件,否则样式表可能无效,如下所示:voidCustomWidget::paintEvent(QPaintEvent*){QStyleOptionopt;opt.init(this);QPainterp(this);
  • LeetCode刷题笔记 小李李李李腊八 leetcode算法java
    leetcode_01两数之和斐波那契数列三个数最大乘积反转链表x的平方根环形列表LeetCode随笔两数之和给定一个整数数组nums和一个整数目标值target,请你在该数组中找出和为目标值target的那两个整数,并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。暴力法记录下数组第一个数值,对数组进行循环,将之后的值
  • 【Spring AI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲:核心交互函数及RAG知识库构建 un_fired spring人工智能java
    系列文章目录【SpringAI】基于专属知识库的RAG智能问答小程序开发——完整项目(含完整前端+后端代码)【SpringAI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲:核心ChatClient对象相关构造函数【SpringAI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲:核心交互函数及RAG知识库构建文章目录系列文章目录前言1.Service层知识库构建与检索函数详
  • numpy学习笔记2:ones = np.ones((2, 4)) 的详解 宁宁可可 #机器学习#Python基础与进阶numpypython开发语言
    numpy学习笔记2:ones=np.ones((2,4))的详解np.ones()是NumPy中用于创建全1数组的核心函数,其用法和参数与np.zeros()类似,但生成的数组元素值全部为1。以下是详细解释:1、语法numpy.ones(shape,dtype=float,order='C')作用:生成一个指定形状和数据类型的全1数组。参数:shape:数组的形状,以元组形式传递(如(2,4)表
  • 个人AI助手的未来:Yi AI开源系统助力快速搭建 耶耶Norsea 网络杂烩人工智能开源
    摘要YiAI推出了一站式个人AI助手平台解决方案,助力用户快速搭建专属AI助手。该平台采用全套开源系统,涵盖前端应用、后台管理及小程序功能,并基于MIT协议开放使用。同时,平台集成了本地RAG方案,利用Milvus与Weaviate向量数据库支持本地部署,为用户提供高效、灵活的数据处理能力。关键词个人AI助手,快速搭建,开源系统,本地RAG,向量数据库一、YiAI开源系统概述1.1个人AI助手的发
  • 软考 中级软件设计师 考点知识点笔记总结 day05 莫问alicia 软考中级软件设计师笔记算法
    文章目录4、栈和队列4.1、栈的定义4.2、队列定义5、串、数组、矩阵和广义表5.1、串5.2、数组5.3、稀疏矩阵5.4、广义表4、栈和队列4.1、栈的定义线性表是具有相同数据类型的n个数据元素的有限序列,n为表厂。n=0时线性表是一个空表L=(a1,a2,a3,…an)栈是只允许在一端进行插入或删除操作的线性表栈顶允许插入和删除的一端栈顶进栈顶出栈底不允许插入和删除的一端4.2、队列定义队列是
  • Demo发布- ClkLog客户端集成 uni-app sdk开源软件数据分析埋点
    前言在上一期推文中【Demo发布-ClkLog客户端集成-ReactNative】,我们与大家分享了ReactNative的集成demo。本期,我们将继续介绍ClkLog集成uni-app的demo。uni-app允许开发者编写一套代码,然后可以编译到iOS、Android、H5以及各种小程序等多个平台。因此,本次demo中将涵盖上述所有平台,并且我们会详细说明集成过程中遇到的难点及解决方案。un
  • numpy学习笔记10:arr *= 2向量化操作性能优化 宁宁可可 #机器学习#Python基础与进阶numpy学习笔记
    numpy学习笔记10:arr*=2向量化操作性能优化在NumPy中,直接对整个数组进行向量化操作(如arr*=2)的效率远高于显式循环(如foriinrange(len(arr)):arr[i]*=2)。以下是详细的解释:1.性能差异的原理(1)底层实现不同显式循环(错误示范):Python的for循环是解释执行的,每次迭代需要动态解析变量类型、执行函数调用等操作。对每个元素的操作会触发多次Py
  • 计算机专业毕业设计题目推荐(新颖选题)本科计算机科学专业相关毕业设计选题大全✅ 会写代码的羊 毕设选题课程设计计算机网络毕设选题毕设系统毕设题目计算机科学专业
    文章目录前言最新毕设选题(建议收藏起来)本科计算机科学专业相关的毕业设计选题毕设作品推荐前言2025全新毕业设计项目博主介绍:✌全网粉丝10W+,CSDN全栈领域优质创作者,博客之星、掘金/华为云/阿里云等平台优质作者。技术范围:SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、大数据、机器学习等设计与开发。主要内容:免费功能设计
  • Python个人学习笔记(17):模块(sys、pickle&json) NEET_LH 樵夫老师Python零基础课程个人学习笔记python学习笔记
    五、sys模块sys.exit():退出while1:print(123)sys.exit(0)#程序退出,0是正常退出,1是非正常退出,记录在日志中sys.version:得到当前解释器的运行环境sys.platform:运行平台,win32=windows代码:print(sys.version)print(sys.platform)结果:3.13.0(tags/v3.13.0:60403a5
  • 【微信小程序变通实现DeepSeek支持语音】 技术与健康 微信小程序小程序
    微信小程序实现录音转文字,并调用后端服务(Node.js)进行语音识别和,然后调用DeepSeek处理的完整实现。整体架构前端(微信小程序):实现录音功能。将录音文件上传到后端。接收后端返回的语音识别结果,并显示在可编辑的文本框中。调用DeepSeek处理文本。后端(Node.js):接收小程序上传的录音文件。调用腾讯云语音识别(ASR)服务,将语音转换为文字。返回识别结果给小程序。提供DeepS
  • python学习笔记之异常(内置标准异常总结) Molly_DD Python学习笔记python软件测试
    python异常处理机制异常处理是python的一种高级工具,当异常发生时,程序会停止当前的所有工作,跳转到异常处理部分去执行。异常既可以是程序错误引发的,也可以由代码主动触发。异常处理基本结构try:可能引发异常的代码except异常类型名称:异常处理代码else:没有发生异常时执行的代码异常报错:try:classtest:defgetdata(self):returnself.datay=t
  • 小黑笔记本,写的todolist效果,增删效果,显示隐藏,全部清除效果。 YangHuan3 html
    先说一下总的大致要去实现的效果:1.新增2.删除3.统计4.清除5.隐藏给大家看一下todoList的大致样式吧!第一个效果:新增1.生成列表结构(v-for数组)2.获取用户输入(v-model)3.回车获取数据(v-on,enter添加数据)第二个效果:删除1.点击删除指定的内容(v-onsplice索引)通过对应的下标删除指定的元素,并且v-for指定的内部是可以获取到当前循环元素下标的,这
  • 10 分钟学会SpringValidation数据校验和全局异常处理 ohn.yu springspringbootjava
    以下是一个使用Spring开发的简单RESTAPI小程序,通过对一张user表进行操作,代码演示如何RestAPI开发中实现数据校验、全局异常处理和返回Json格式数据。使用的核心框架包括SpringBootSpringWebSpringDataJPABeanValidation(JSR-303)Lombok1.项目依赖(pom.xml)创建一个Maven项目,添加以下依赖:"xmlns:xsi=
  • HPC综合-心得与笔记【19】 sakura_sea HPCand3DGraphicsEngine线性规划
    Dijkstra算法【2】基础距离数组dist,设置起点距离为0,其他节点距离为无穷大(∞)用最小堆创建优先队列,将起点放入队列。从队列中取出当前距离最小的节点u。遍历u的每个邻接节点v,计算从起点到v的路径长度:alt=dist[u]+weight(u,v)。如果altdist[u]:continue#遍历邻接节点forv,weightingraph[u].items():alt=dist[u]
  • 《算法笔记》9.4小节——数据结构专题(2)->二叉查找树(BST) 问题 A: 二叉排序树 圣保罗的大教堂 《算法笔记》算法
    题目描述输入一系列整数,建立二叉排序数,并进行前序,中序,后序遍历。输入输入第一行包括一个整数n(1#include#include#include#include#include#include#include#include#include#include#include#include#include#defineINF0x3f3f3f3f#definedb1(x)coutleft);Fre
  • Algorithm 香水浓 javaAlgorithm
    冒泡排序 public static void sort(Integer[] param) { for (int i = param.length - 1; i > 0; i--) { for (int j = 0; j < i; j++) { int current = param[j]; int next = param[j + 1];
  • mongoDB 复杂查询表达式 开窍的石头 mongodb
    1:count    Pg: db.user.find().count();    统计多少条数据 2:不等于$ne    Pg: db.user.find({_id:{$ne:3}},{name:1,sex:1,_id:0});    查询id不等于3的数据。 3:大于$gt $gte(大于等于) &n
  • Jboss Java heap space异常解决方法, jboss OutOfMemoryError : PermGen space 0624chenhong jvmjboss
    转自 http://blog.csdn.net/zou274/article/details/5552630 解决办法: window->preferences->java->installed jres->edit jre 把default vm arguments 的参数设为-Xms64m -Xmx512m ----------------
  • 文件上传 下载 解析 相对路径 不懂事的小屁孩 文件上传
    有点坑吧,弄这么一个简单的东西弄了一天多,身边还有大神指导着,网上各种百度着。 下面总结一下遇到的问题: 文件上传,在页面上传的时候,不要想着去操作绝对路径,浏览器会对客户端的信息进行保护,避免用户信息收到攻击。 在上传图片,或者文件时,使用form表单来操作。 前台通过form表单传输一个流到后台,而不是ajax传递参数到后台,代码如下: <form action=&
  • 怎么实现qq空间批量点赞 换个号韩国红果果 qq
    纯粹为了好玩!! 逻辑很简单 1 打开浏览器console;输入以下代码。 先上添加赞的代码 var tools={}; //添加所有赞 function init(){ document.body.scrollTop=10000; setTimeout(function(){document.body.scrollTop=0;},2000);//加
  • 判断是否为中文 灵静志远 中文
    方法一: public class Zhidao { public static void main(String args[]) { String s = "sdf灭礌 kjl d{';\fdsjlk是"; int n=0; for(int i=0; i<s.length(); i++) { n = (int)s.charAt(i); if((
  • 一个电话面试后总结 a-john 面试
    今天,接了一个电话面试,对于还是初学者的我来说,紧张了半天。 面试的问题分了层次,对于一类问题,由简到难。自己觉得回答不好的地方作了一下总结:   在谈到集合类的时候,举几个常用的集合类,想都没想,直接说了list,map。   然后对list和map分别举几个类型:   list方面:ArrayList,LinkedList。在谈到他们的区别时,愣住了
  • MSSQL中Escape转义的使用 aijuans MSSQL
    IF OBJECT_ID('tempdb..#ABC') is not null drop table tempdb..#ABC create table #ABC ( PATHNAME NVARCHAR(50) ) insert into #ABC SELECT N'/ABCDEFGHI' UNION ALL SELECT N'/ABCDGAFGASASSDFA' UNION ALL
  • 一个简单的存储过程 asialee mysql存储过程构造数据批量插入
               今天要批量的生成一批测试数据,其中中间有部分数据是变化的,本来想写个程序来生成的,后来想到存储过程就可以搞定,所以随手写了一个,记录在此:            DELIMITER $$ DROP PROCEDURE IF EXISTS inse
  • annot convert from HomeFragment_1 to Fragment 百合不是茶 android导包错误
    创建了几个类继承Fragment, 需要将创建的类存储在ArrayList<Fragment>中; 出现不能将new 出来的对象放到队列中,原因很简单;     创建类时引入包是:import android.app.Fragment;      创建队列和对象时使用的包是:import android.support.v4.ap
  • Weblogic10两种修改端口的方法 bijian1013 weblogic端口号配置管理config.xml
    一.进入控制台进行修改    1.进入控制台:  http://127.0.0.1:7001/console     2.展开左边树菜单         域结构->环境->服务器-->点击AdminServer(管理) &
  • mysql 操作指令 征客丶 mysql
    一、连接mysql 进入 mysql 的安装目录; $ bin/mysql -p [host IP 如果是登录本地的mysql 可以不写 -p 直接 -u] -u [userName] -p 输入密码,回车,接连; 二、权限操作[如果你很了解mysql数据库后,你可以直接去修改系统表,然后用 mysql> flush privileges; 指令让权限生效] 1、赋权 mys
  • 【Hive一】Hive入门 bit1129 hive
    Hive安装与配置 Hive的运行需要依赖于Hadoop,因此需要首先安装Hadoop2.5.2,并且Hive的启动前需要首先启动Hadoop。   Hive安装和配置的步骤   1. 从如下地址下载Hive0.14.0   http://mirror.bit.edu.cn/apache/hive/    2.解压hive,在系统变
  • ajax 三种提交请求的方法 BlueSkator Ajaxjqery
    1、ajax 提交请求 $.ajax({ type:"post", url : "${ctx}/front/Hotel/getAllHotelByAjax.do", dataType : "json", success : function(result) { try { for(v
  • mongodb开发环境下的搭建入门 braveCS 运维
      linux下安装mongodb 1)官网下载mongodb-linux-x86_64-rhel62-3.0.4.gz 2)linux 解压  gzip -d mongodb-linux-x86_64-rhel62-3.0.4.gz; mv mongodb-linux-x86_64-rhel62-3.0.4 mongodb-linux-x86_64-rhel62-
  • 编程之美-最短摘要的生成 bylijinnan java数据结构算法编程之美
    import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; public class ShortestAbstract { /** * 编程之美 最短摘要的生成 * 扫描过程始终保持一个[pBegin,pEnd]的range,初始化确保[pBegin,pEnd]的ran
  • json数据解析及typeof chengxuyuancsdn jstypeofjson解析
    // json格式 var people='{"authors": [{"firstName": "AAA","lastName": "BBB"},' +' {"firstName": "CCC&
  • 流程系统设计的层次和目标 comsci 设计模式数据结构sql框架脚本
                                  流程系统设计的层次和目标  
  • RMAN List和report 命令 daizj oraclelistreportrman
    LIST 命令 使用RMAN LIST 命令显示有关资料档案库中记录的备份集、代理副本和映像副本的 信息。使用此命令可列出: • RMAN 资料档案库中状态不是AVAILABLE 的备份和副本 • 可用的且可以用于还原操作的数据文件备份和副本 • 备份集和副本,其中包含指定数据文件列表或指定表空间的备份 • 包含指定名称或范围的所有归档日志备份的备份集和副本 • 由标记、完成时间、可
  • 二叉树:红黑树 dieslrae 二叉树
        红黑树是一种自平衡的二叉树,它的查找,插入,删除操作时间复杂度皆为O(logN),不会出现普通二叉搜索树在最差情况时时间复杂度会变为O(N)的问题.     红黑树必须遵循红黑规则,规则如下     1、每个节点不是红就是黑。     2、根总是黑的  &
  • C语言homework3,7个小题目的代码 dcj3sjt126com c
    1、打印100以内的所有奇数。 # include <stdio.h> int main(void) { int i; for (i=1; i<=100; i++) { if (i%2 != 0) printf("%d ", i); } return 0; }  2、从键盘上输入10个整数,
  • 自定义按钮, 图片在上, 文字在下, 居中显示 dcj3sjt126com 自定义
    #import <UIKit/UIKit.h> @interface MyButton : UIButton -(void)setFrame:(CGRect)frame ImageName:(NSString*)imageName Target:(id)target Action:(SEL)action Title:(NSString*)title Font:(CGFloa
  • MySQL查询语句练习题,测试足够用了 flyvszhb sqlmysql
    http://blog.sina.com.cn/s/blog_767d65530101861c.html 1.创建student和score表 CREATE  TABLE  student ( id  INT(10)  NOT NULL  UNIQUE  PRIMARY KEY  , name  VARCHAR
  • 转:MyBatis Generator 详解 happyqing mybatis
      MyBatis Generator 详解 http://blog.csdn.net/isea533/article/details/42102297   MyBatis Generator详解 http://git.oschina.net/free/Mybatis_Utils/blob/master/MybatisGeneator/MybatisGeneator.
  • 让程序员少走弯路的14个忠告 jingjing0907 工作计划学习
      无论是谁,在刚进入某个领域之时,有再大的雄心壮志也敌不过眼前的迷茫:不知道应该怎么做,不知道应该做什么。下面是一名软件开发人员所学到的经验,希望能对大家有所帮助   1.不要害怕在工作中学习。 只要有电脑,就可以通过电子阅读器阅读报纸和大多数书籍。如果你只是做好自己的本职工作以及分配的任务,那是学不到很多东西的。如果你盲目地要求更多的工作,也是不可能提升自己的。放
  • nginx和NetScaler区别 流浪鱼 nginx
    NetScaler是一个完整的包含操作系统和应用交付功能的产品,Nginx并不包含操作系统,在处理连接方面,需要依赖于操作系统,所以在并发连接数方面和防DoS攻击方面,Nginx不具备优势。 2.易用性方面差别也比较大。Nginx对管理员的水平要求比较高,参数比较多,不确定性给运营带来隐患。在NetScaler常见的配置如健康检查,HA等,在Nginx上的配置的实现相对复杂。 3.策略灵活度方
  • 第11章 动画效果(下) onestopweb 动画
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • FAQ - SAP BW BO roadmap blueoxygen BOBW
    http://www.sdn.sap.com/irj/boc/business-objects-for-sap-faq   Besides, I care that how to integrate tightly.   By the way, for BW consultants, please just focus on Query Designer which i
  • 关于java堆内存溢出的几种情况 tomcat_oracle javajvmjdkthread
    【情况一】:    java.lang.OutOfMemoryError: Java heap space:这种是java堆内存不够,一个原因是真不够,另一个原因是程序中有死循环;   如果是java堆内存不够的话,可以通过调整JVM下面的配置来解决:   <jvm-arg>-Xms3062m</jvm-arg>   <jvm-arg>-Xmx
  • Manifest.permission_group权限组 阿尔萨斯 Permission
    结构 继承关系 public static final class Manifest.permission_group extends Object java.lang.Object android. Manifest.permission_group 常量 ACCOUNTS 直接通过统计管理器访问管理的统计 COST_MONEY可以用来让用户花钱但不需要通过与他们直接牵涉的权限 D