小程序的api使用 以及一些weui组件实列获取头像 扫码等

今日目标

  1. 响应式单位rpx
  2. 小程序的生命周期 【重点】20%
  3. 小程序框架 weui 【重点】 50%
  4. 内置API 【重点】30%
  5. 综合练习

1. 响应式rpx

1.1 rpx单位

rpx是微信小程序提出的一个尺寸单位,将整个手机屏幕宽度分为750份,1rpx 就是 1/750,避免不同手机尺寸造成单位不匹配的混乱

.box1{background:#f00;width:375rpx;height:375rpx; #宽度和高度都可以使用这个单位
}

1.2 引入外部样式

/* 在.wxss中可以引入外部样式 */
@import '../../common/common.wxss';

2. 小程序的生命周期【重点】

2.1 全局的生命周期

全局的生命周期是指整个小程序的生命周期,生命周期函数在 app.js

//小程序初始化完成时触发,全局只触发一次  
onLaunch() {console.log('1. 小程序启动了');
},//小程序启动,或从后台进入前台显示时触发
onShow(){console.log('2. 小程序显示出来');
},//小程序从前台进入后台时触发
onHide(){console.log('3. 小程序隐藏了');
},

2.2 页面的生命周期【重点】

页面的生命周期是指一个页面的生命周期,生命函数在 index.js

Page({//1. 页面加载函数,相当于 cratedonLoad(){console.log('1. 页面加载了')},//2. 页面显示出来了onShow(){console.log('2. 页面显示啦');},//3. 页面准备好了,初始渲染完成,相当于 mountedonReady(){console.log('3. 页面初次渲染完成');},//4. 页面隐藏时执行onHide(){console.log('4. 页面隐藏了');},//5. 页面卸载时执行onUnload(){console.log('5. 首页被卸载啦');}
})

2.3 用户操作函数

Page({//用户向上滑动触底时执行,必须要有足够的高度超出一屏才能滑动onReachBottom(){console.log('已经到底了,没有数据了')},//用户向下拉,拉到顶了会触发,注意:要在app.json或index.json配置 enablePullDownRefresh:trueonPullDownRefresh(){console.log('已经到顶了,下拉刷新中')//wx.startPullDownRefresh(); //开始下拉刷新动作setTimeout(function(){//停止下拉刷新动作wx.stopPullDownRefresh();}, 100)},//分享给朋友或微信群onShareAppMessage(){return {title:'今天发生一件大事',imageUrl:'http://www.look518.com/files/996.jpg',}},//分享到朋友圈onShareTimeline(){return {title:'无间之战上架了',imageUrl:'http://www.look518.com/files/991.jpg'}}
})

3. WeUI框架【重点】

官方文档:https://wechat-miniprogram.github.io/weui/docs/quickstart.html

3.1 安装weui

第一种:useExtendedLib 扩展库

在 app.json 中配置扩展库 weui

"useExtendedLib": {"weui": true
}

第二种:npm安装

打开 调试器 => 终端 => 安装 weui-miniprogram 包

yarn add weui-miniprogram

打开 工具 => 构建 npm (把 node_modules 构建成 miniprogram_npm )

在 app.wxss 引入全局样式 weui.wxss

@import 'miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

3.2 引入weui组件

在 list.json 中声明要使用的组件(按需加载)

"usingComponents": {"mp-badge": "weui-miniprogram/badge/badge","mp-icon": "weui-miniprogram/icon/icon"
}

3.3 使用weui

在 list.wxml 中使用组件,找官网查看需要使用的组件示例

<mp-badge content="2"></mp-badge>
<mp-icon type="field" icon="location" color="#f0f" size="{{50}}"></mp-icon>

4. 常用API【重点】

4.1 发请求

wx.request({url:'http://www.look518.com/api/film.php', #请求地址data:{a:'list', pagesize:5}, #请求的参数数据method:'get', #请求方式success(res){ #请求成功的回调函数console.log(res.data.data);},fail(err){ #请求失败的回调函数console.log(err);}
})

4.2 获取用户头像和昵称

wx.getUserProfile({desc:'哥,我要你的头像',success(res){console.log(res.userInfo);}
})

开放数据组件,可以直接获取到用户头像和昵称

<open-data type="userNickName"></open-data>
<view class="avatar"><open-data type="userAvatarUrl"></open-data>
</view>

4.3 扫码API

wx.scanCode({success(res){console.log(res.result);}
})

5. 补充:传参数和本地存储

5.1 传参数

第一步:在一个页面跳转到另一个页面时,打 ? 传参数

<navigator url="/pages/list/list?id=5" open-type="redirect">去list页面</navigator>

第二步:在目标页面的 onLoad 函数中,接收参数

onLoad(options) {console.log(options.id);
},

5.2 本地存储

存数据:

wx.setStorageSync('key', 'value');

读数据:

wx.getStorageSync('key');

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

PCL 可视化球图形

文章目录 一、简介二、实现代码三、实现效果修改之处一、简介 过程很简单,使用pcl::visualization::PCLVisualizer中的addSphere函数就可以了,不过PCL中默认的球的分辨率过小,不够精细,需要我们手动修改一下源码。 二、实现代码 //标准文件 #include <iostream> #in…

QT自带PDF库的使用

QT自带PDF库可以方便的打开PDF文件&#xff0c;并将文件解析为QImage&#xff0c;相比网上提供的开源库&#xff0c;QT自带PDF库使用更方便&#xff0c;也更加可靠&#xff0c;然而&#xff0c;QT自带PDF库的使用却不同于其他通用库的使用&#xff0c;具备一定的技巧。 1. 安装…

以太网DHCP协议(十)

目录 一、工作原理 二、DHCP报文 2.1 DHCP报文类型 2.2 DHCP报文格式 当网络内部的主机设备数量过多是&#xff0c;IP地址的手动设置是一件非常繁琐的事情。为了实现自动设置IP地址、统一管理IP地址分配&#xff0c;TCPIP协议栈中引入了DHCP协议。 一、工作原理 使用DHCP之…

Go语言基础: Switch语句、Arrays数组、Slices切片 详细教程案例

文章目录 一. Switch语句1. Default case2. Multiple expressions in case3. Expressionless switch4. Fallthrough5. break6. break for loop 二. Arrays数组1. when arrays are passed to functions as parameters2. Iterating arrays using range3.Multidimensional arrays …

通向架构师的道路之weblogic与apache的整合与调优

一、BEAWeblogic的历史 BEA WebLogic是用于开发、集成、部署和管理大型分布式Web应用、 网络应用和数据库应 用的Java应用服务器。将Java的动态功能和Java Enterprise标准的安全性引入大型网络应用的 开发、集成、部署和管理之中。 BEA WebLogic Server拥有处理关键Web应…

title和h1、b与strong、i和em的区别

title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别&#xff1f; title 与 h1&#xff1a;h1 标签写在网页的 body 中&#xff0c;title 标签写在网页的 head 中&#xff0c;h1 标签控制一段文字的大小&#xff08;从 h1~h6&#xff09;&#xff0c;title 是网页标题的意…

pytorch求导

pytorch求导的初步认识 requires_grad tensor(data, dtypeNone, deviceNone, requires_gradFalse)requires_grad是torch.tensor类的一个属性。如果设置为True&#xff0c;它会告诉PyTorch跟踪对该张量的操作&#xff0c;允许在反向传播期间计算梯度。 x.requires_grad 判…

TM4C123库函数学习(1)--- 点亮LED+TM4C123的ROM函数简介+keil开发环境搭建

前言 &#xff08;1&#xff09; 首先&#xff0c;我们需要知道TM4C123是M4的内核。对于绝大多数人而言&#xff0c;入门都是学习STM32F103&#xff0c;这款芯片是采用的M3的内核。所以想必各位对M3内核还是有一定的了解。M4内核就是M3内核的升级版本&#xff0c;他继承了M3的的…

【力扣每日一题】2023.8.5 合并两个有序链表

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目给我们两个有序的链表&#xff0c;要我们保持升序的状态合并它们。 我们可以马上想要把两个链表都遍历一遍&#xff0c;把所有节点的…

扫地机器人(dfs基础)

题面 Mike同学在为扫地机器人设计一个在矩形区域中行走的算法&#xff0c;Mike是这样设计的&#xff1a;先把机器人放在出发点 (1,1)(1,1) 点上&#xff0c;机器人在每个点上都会沿用如下的规则来判断下一个该去的点是哪里。规则&#xff1a;优先向右&#xff0c;如果向右不能走…

1-搭建一个最简单的验证平台UVM,已用Questasim实现波形!

UVM-搭建一个最简单的验证平台&#xff0c;已用Questasim实现波形 1&#xff0c;背景知识2&#xff0c;".sv"文件搭建的UVM验证平台&#xff0c;包括代码块分享3&#xff0c;Questasim仿真输出&#xff08;1&#xff09;compile all&#xff0c;成功&#xff01;&…

基于 CentOS 7 构建 LVS-DR 集群 及 配置nginx负载均衡

一、构建LVS-DR集群 1、主机规划 Node01&#xff1a;PC Node02&#xff1a;LVS Node03、Node04&#xff1a;Webserver 2、部署环境 2.1 在Node02上配置 2.1.1 安装ipvsadm管理软件按 [rootlocalhost ~]# yum install -y ipvsadm 2.1.2 配置VIP [rootlocalhost ~]# if…

【力扣每日一题】2023.8.8 任意子数组和的绝对值的最大值

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目给我们一个数组&#xff0c;让我们找出它的绝对值最大的子数组的和。 这边的子数组是要求连续的&#xff0c;让我们找出一个元素之和…

GG修改器安装与Root环境的安装

关于GG修改器大家应该都有一定的了解吧&#xff0c;就是类似于电脑端CE的一个软件。 GG修改器在百度云盘里请自行下载&#xff01; 百度网盘链接&#xff1a;https://pan.baidu.com/s/1p3KJRg9oq4s0XzRuEIBH4Q 提取码&#xff1a;vuwj 那我要开始了&#xff01; 本来不想讲GG…

Spring Boot集成EasyPoi实现导入导出操作

文章目录 Spring Boot集成EasyPoi实现导入导出操作0 简要说明1 环境搭建1.1 项目目录1.2 依赖管理2.3 关于swagger处理2.4 关于切面处理耗时1 自定义注解2 定义切面类3 如何使用 2.5 核心导入操作2.6 核心导出操作 2 最佳实线2.1 导入操作1 实体类说明2 业务层3 效果3 控制层 2…

常用抓包工具

Fiddler Fiddler 是一个很好用的抓包工具&#xff0c;可以用于抓取http/https的数据包&#xff0c;常用于Windows系统的抓包&#xff0c;它有个优势就是免费 Charles Charles是由JAVA开发的&#xff0c;可以运行在window Linux MacOS&#xff0c;但它是收费的&#xff0c;和…

.Net Framework请求外部Api

要在.NET Framework 4.5中进行外部API的POST请求&#xff0c;你可以使用HttpClient类。 1. Post请求 using System; using System.Net.Http; using System.Threading.Tasks;class Program {static async Task Main(string[] args){// 创建一个HttpClient实例using (HttpClien…

Python取得系统进程列表

Python取得系统进程列表 上代码 上代码 import psutilfor proc in psutil.process_iter():try:pinfo proc.as_dict(attrs[pid, name])except psutil.NoSuchProcess:passelse:print(pinfo)

httpd+Tomcat(jk)的Web动静分离搭建

动静分离是指将动态请求和静态请求分别交给不同的服务器来处理&#xff0c;可以提高服务器的效率和性能。在Java Web开发中&#xff0c;常见的动态请求处理方式是通过Tomcat来处理&#xff0c;而静态请求则可以通过Apache服务器来处理。本文将详细讲解如何结合Apache和Tomcat来…

Logback ThresholdFilter LevelFilter

当我们需要对日志的打印要做一些范围的控制的时候&#xff0c;通常都是通过为各个Appender设置不同的Filter配置来实现。在Logback中自带了两个过滤器实现&#xff1a; ch.qos.logback.classic.filter.LevelFilter和 ch.qos.logback.classic.filter.ThresholdFilter&#xff0c…