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

微信小程序知识点归纳(一)

前言:适用于有一定基础的前端开发同学,完成从网页开发到小程序开发的知识转换。

           先立框架,后砌墙壁

回顾:了解微信小程序开发流程-CSDN博客

初始页面结构,三部分pages、utils、配置,分别存放页面、工具类函数、全局文件。

全局文件常用的三个:app.js、app.json、app.wxss,分别是项目入口、页面配置、全局样式

其余:

  • .eslintrc:配置规则集和插件,用于检查代码质量,规范编码的
  • project.config:个性化配置,以及配置项目的打包;后面挨着的project.private.config是他孪生兄弟,可以覆盖前者配置
  • sitemap:小程序的结构和组织方式,让微信可以搜索到该小程序

配置是基础,优先掌握

一、配置

1、全局配置

在app.json中的全局配置参数,常见的有:

  • navigationBarTextStyle 顶部背景颜色,只支持设置黑色和白色
  • navigationBarTitleText   顶部全局标题(即小程序名称)
  • enablePullDownRefresh下拉刷新
  • onReachBottomDistance 上拉触底

小程序官网_页面配置对于字段的用法和含义写的很全面

2、新建页面

小程序页面分两种,tabBar和非tabBar,tabBar就是最底下的导航栏

备注:同样可参考小程序官网_全局配置

1.1 tabar页面

/***app.json****/
若要加新页面,在pages和tabBar中添加地址、文本和图标即可 
在pages里写了地址,pages文件夹中会自动生成页面文件的
{"pages": ["pages/index/index","pages/shopping/shopping"],"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "/images/tabs/index.png","selectedIconPath": "/images/tabs/index-active.png"},{"pagePath": "pages/shopping/shopping","text": "商城","iconPath": "/images/tabs/shopping.png","selectedIconPath": "/images/tabs/shopping-active.png"}]}
}

1.2 非tabBar页面

就是直接点击即跳转的页面,只需要在上面pages里新增个地址即可。

二、导航

1、声明式

1、跳转到tabBar页面
<navigator url="/pages/orderDetail/orderDetail" open-type="seitchTab"></navigator >2、到非tabBar页面,区别仅在于open-type参数
<navigator url="/pages/orderDetail/orderDetail" open-type="navigate"></navigator >3、传参
只需要把参数拼接在url后面即可
<navigator url="/pages/orderDetail/orderDetail?test=12&price=78">传参</navigator>
接收参数
在跳转到的页面的onload方法里,可接受到传递来的参数
onLoad(options) {console.log(options);
},4、回退
(只在非tabBar页面生效)
delta代表回退层级,默认为1
<navigator open-type="navigateBack" delta="1"></navigator>

2、编程式

1、跳转到tabBar页
在页面wxml添加
小程序中 bindtap 就相当于 click
<button bind:tap="gotoHome">跳转</button>
在对于js文件中调用方法即可gotoHome(){wx.switchTab({url: '/pages/index/index',})}2、跳转到非tabBar页面
只需要把switchTab换成navigateTo就行了
<button bind:tap="goDetail">详情</button>
goDetail(){wx.navigateTo({url: '/pages/orderDetail/orderDetail',})}3、传参
和声明式一样,把参数拼接在url后面4、回退
参数为空则默认回退1层<button bind:tap="goBack">回退</button>goBack(){wx.navigateBack()},

三、生命周期

分为2类,应用生命周期和页面生命周期

类似于网页,都是初始化->渲染显示->销毁 的过程;不同点在于多了个周期:onHide隐藏在后台运行

1、应用

在全局入口文件app.js中控制

App({/** * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次) */onLaunch: function () {},/** * 当小程序启动,或从后台进入前台显示,会触发 onShow*/onShow: function (options) {},/*** 当小程序从前台进入后台,会触发 onHide */onHide: function () {},/*** 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息*/onError: function (msg) {}
})

2、页面

在页面自己的文件夹下js文件中控制

Page({onLoad(options) {},        // 监听页面加载,一个页面只调用1次onReady() {},              // 监听页面初次渲染完成,一个页面只调用1次onShow() {},               // 监听页面显示onHide() {},               // 监听页面隐藏onUnload() {},             //-监听页面卸载//初始化时还会默认有下面几种监听事件onPullDownRefresh() {},    // 监听用户下拉动作onReachBottom() {},        // 页面上拉触底事件的处理函数onShareAppMessage() {}     // 用户点击右上角分享
})

相关文章:

微信小程序知识点归纳(一)

前言&#xff1a;适用于有一定基础的前端开发同学&#xff0c;完成从网页开发到小程序开发的知识转换。 先立框架&#xff0c;后砌墙壁 回顾&#xff1a;了解微信小程序开发流程-CSDN博客 初始页面结构&#xff0c;三部分pages、utils、配置&#xff0c;分别存放页面、工具类…...

wangEditor富文本编辑器与layui图片上传

记录&#xff1a;js 显示默认的wangEditor富文本编辑器内容和图片 <style>body {background-color: #ffffff;}.layui-form-select dl{z-index:100000;} </style> <div class"layui-form layuimini-form"><div class"layui-form-item"…...

爬虫学习:XPath提取网页数据

目录 一、安装XPath 二、XPath的基础语法 1.选取节点 三、使用XPath匹配数据 1.浏览器审查元素 2.具体实例 四、总结 一、安装XPath 控制台输入指令&#xff1a;pip install lxml 二、XPath的基础语法 XPath是一种在XML文档中查找信息的语言&#xff0c;可以使用它在HTM…...

【雅思写作】Vince9120雅思小作文笔记——P1 Intro(前言)

文章目录 链接P1 Intro&#xff08;前言&#xff09;字数限制题型综述&#xff08;problem types overview&#xff09;1. **柱状图&#xff08;Bar Chart&#xff09;** - 描述不同类别在某个或多个变量上的数据量比较。2. **线图&#xff08;Line Graph&#xff09;** - 展示…...

【面试干货】HTTPS 工作原理

【面试干货】HTTPS 工作原理 1、握手阶段&#xff08;Handshake&#xff09;2、密钥协商阶段3、加密通信阶段4、结束通信阶段 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; HTTPS&#xff08;HyperText Transfer Protocol Secure&#xff…...

Cocos Creator 中编码规范 (6)

Cocos中命名规范 创建文件夹&#xff0c;全小写。创建脚本&#xff0c;首字母大写的驼峰形式。创建变量&#xff0c;首字母小写的驼峰形式 官方的编码规范...

Vue3:menu导航栏出现多个同一跳转路径的菜单处理

文章目录 需求整理实现思路实现过程 需求整理&#xff0c;实现思路 最近公司想将之前老的项目整理出来&#xff0c;因为这个老项目内容太杂什么页面都往里面塞&#xff0c;导致菜单特别多&#xff0c;公司就像将这个老的项目迁出来&#xff0c;这个旧的项目本来是后端PHP写的。…...

SAM轻量化应用Auto-SAM、Group-Mix SAM、RAP-SAM、STLM

1. Auto SAM&#xff08;Auto-Prompting SAM for Mobile Friendly 3D Medical Image Segmentation&#xff09; 1.1 面临问题 医学背景&#xff1a; &#xff08;1&#xff09;与自然图像相比&#xff0c;医学图像的尺寸更小&#xff0c;形状不规则&#xff0c;对比度更低。&…...

深度优化搜索DFS使用详解,看这篇就够了!!!

深度优先搜索&#xff08;Depth-First Search&#xff0c;DFS&#xff09;是一种用于遍历或搜索树和图的算法。在最坏的情况下&#xff0c;深度优先搜索的性能为O(VE)&#xff0c;其中V是顶点数&#xff0c;E是边数。DFS常用于解决连通性问题、路径问题、生成树问题等。 ### D…...

Apache SeaTunnel 正式发布2.3.5版本,功能增强及多个Bug修复

经过两个月的筹备&#xff0c;我们在2.3.4版本基础上进行了新一轮的迭代&#xff0c;本次更新不仅修复了多个关键问题&#xff0c;还引入了若干重要功能增强和性能优化。 在此&#xff0c;我们先提前感谢社区成员的贡献和支持&#xff0c;如果你想升级最新的版本&#xff0c;快…...

interview_bak

flink内存管理 JVM 存在的几个问题: Java 对象存储密度低。一个只包含 boolean 属性的对象占用了16个字节内存:对象头占了8个,boolean 属性占了1个,对齐填充占了7个。而实际上只需要一个bit(1/8字节)就够了。Full GC 会极大地影响性能,尤其是为了处理更大数据而开了很大…...

layui 数据表格 自动定位新增行位置

由于数据表格新增行后没有到新增到当前位置 继续增加的需求&#xff1a; 因为自己是新增行后到最后一行的 所以 就定位到最后一行 并且 高亮 高亮颜色浅 可自行更改 整理了一下 可根据 情况 修改 // 初始化滚动条位置变量 let tableScroll {scrollTob: 0,scrollLeft: 0,…...

window10下安装ubuntu系统以及docker使用

window10下安装ubuntu系统以及docker使用 1. 启用适用于Linux的Windwos子系统2.下载Linux内核更新包3.将 WSL 2 设置为默认版本4.安装Ubuntu<br />直接去Microsoft store里面直接搜索Ubuntu进行安装。5.可能出现的问题1.win10启动ubuntu报错 参考的对象类型不支持尝试的操…...

Netty核心组件介绍

Netty是一款用于创建高性能网络应用程序的高级框架。Netty的核心组件如下&#xff1a; Channel回调Future事件和ChannelHander Channel channel是Java NIO的一个基本构造。可以把Channel看作是传入或传出数据的载体。它可以被打开或关闭&#xff0c;连接或断开连接。 回调 …...

代码审计平台sonarqube的安装及使用

docker搭建代码审计平台sonarqube 一、代码审计关注的质量指标二、静态分析技术分类三、使用sonarqube的目的四、sonarqube流程五、docker快速搭建sonarqube六、sonarqube scanner的安装和使用七、sonarqube对maven项目进行分析八、sonarqube分析报告解析九、代码扫描规则定制十…...

C++ 使用nlohmann/json.hpp库读写json字符串

1. json库 我个人比较喜欢 nlohmann/json.hpp 这个库&#xff0c;因为它只需要一个hpp文件即可&#xff0c;足够轻量&#xff01; 这是它的github地址。 2. 简单实例代码 #include <iostream> #include <json.hpp> #include <fstream> #include <stri…...

3GPP官网下载协议步骤

1.打开官网 https://www.3gpp.org/ 2.点击 3.在界面选择要找的series&#xff0c;跳转到查找界面 以V2X通信协议为例&#xff0c;论文中通常会看到许多应用&#xff1a; [7] “Study on evaluation methodology of new Vehicle-to-Everything (V2X) use cases for LTE and NR…...

【JAVA】Git 的基本概念和使用方式

Git是一个开源的分布式版本控制系统&#xff0c;由Linus Torvalds创建&#xff0c;用于有效、高速地处理从小到大的项目版本管理。以下是Git的一些基本概念和使用方式的深入探讨&#xff1a; 基本概念 1. 仓库&#xff08;Repository&#xff09; 仓库是Git用来保存你的项目…...

C++多态实现原理详解

阅读引言&#xff1a; 我想象了一下&#xff0c; 假如人有突然问我什么是多态&#xff0c; 我该如何给别人说清楚呢&#xff1f;所以写下这篇文章&#xff0c; 希望大家看完有所收获。 ①. 开胃小菜 先看这样一个开胃小菜 这里我有点小小的疑惑&#xff0c; 大小为啥是1。 在C…...

[数据集][目标检测]交通灯检测数据集VOC+YOLO格式2600张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2600 标注数量(xml文件个数)&#xff1a;2600 标注数量(txt文件个数)&#xff1a;2600 标注…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...