小程序的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.rhkb.cn/news/79644.html

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

相关文章

漫画 | TCP/IP之大明邮差

后记&#xff1a; 1973年&#xff0c;卡恩与瑟夫开发出了网络中最核心的两个协议&#xff1a;TCP协议和IP协议&#xff0c;随后为了验证两个协议的可用性&#xff0c;他们做了一个实验&#xff0c;在多个异构网络中进行数据传输&#xff0c;数据包在经过近10万公里的旅程后到达…

windows永久关闭更新

不要去services.msc 服务里面关闭windowUpdata了&#xff0c;对win11和部分win10根本不管用&#xff0c;下面在教你一招永久关闭&#xff08;原理不是关闭&#xff0c;只是延长更新时间&#xff0c;时间可以设置百年后&#xff0c;所以和关闭差不多&#xff09; windows图形化…

ModaHub魔搭社区:大模型落地需要“记忆力”,这家公司想为向量数据库Milvus Cloud正名

现实生活中若两人进行对话,大致需要三步流程:一方首先抛出话题作引子;另一方会先调动记忆判断自己是否了解这个话题,然后再分析给出应该做出何种回答。如此循环往复直到互动结束,而此次对话又会作为一种新的“记忆”被双方吸收。 为让计算机完成这样的互动过程,并持续…

acwing第 115 场周赛第二题题解:维护最大值和次大值

一、链接 5132. 奶牛照相 二、题目 约翰的农场有 nn 头奶牛&#xff0c;编号 1∼n1∼n。 其中&#xff0c;第 ii 头奶牛的宽度为 wiwi&#xff0c;高度为 hihi&#xff0c; 有一天&#xff0c;它们聚餐后决定拍照留念。 关于拍照的描述如下&#xff1a; 它们一共拍了 nn…

【Linux初阶】基础IO - 动静态库 | 初识、生成、链接、加载

&#x1f31f;hello&#xff0c;各位读者大大们你们好呀&#x1f31f; &#x1f36d;&#x1f36d;系列专栏&#xff1a;【Linux初阶】 ✒️✒️本篇内容&#xff1a;动静态库初识&#xff0c;库的含义&#xff0c;静态库的生成与链接&#xff0c;gcc/g默认链接方式&#xff0c…

Grafana V10 告警推送

最近项目建设完成&#xff0c;一个城域网项目&#xff0c;相关zabbix和grafana展示已经完&#xff0c;想了想&#xff0c;不想天天看平台去盯网络监控平台&#xff0c;索性对告警进行分类调整&#xff0c;增加告警的推送&#xff0c;和相关部门的提醒&#xff0c;其他部门看不懂…

C语言经典小游戏之三子棋(超详解释+源码)

“纵有疾风来&#xff0c;人生不言弃&#xff0c;风乍起&#xff0c;合当奋意向此生。” 今天我们一起来学习一下三子棋小游戏用C语言怎么写出来&#xff1f; 三子棋小游戏 1.游戏规则介绍2.游戏准备3.游戏的实现3.1生成菜单3.2游戏的具体实现3.2.1初始化棋盘3.2.2打印棋盘3.2…

rv1109/1126 rknn 模型部署过程

rv1109/1126是瑞芯微出的嵌入式AI芯片&#xff0c;带有npu, 可以用于嵌入式人工智能应用。算法工程师训练出的算法要部署到芯片上&#xff0c;需要经过模型转换和量化&#xff0c;下面记录一下整个过程。 量化环境 模型量化需要安装rk的工具包&#xff1a; rockchip-linux/rk…

FineBI 人力资源 专题

此处使用FineBI处理人力资源数据&#xff0c;数据来源于HR_database数据文件&#xff0c;将此文件拷贝到安装目录下 然后配置数据库连接 在【公共数据】中新建一个文件夹&#xff0c;并将之前数据库中需要用到的表放入此处&#xff0c;更新数据。显示如下。 这时候首先要建立…

Flutter 自定义view

带进度动画的圆环。没gif&#xff0c;效果大家自行脑补。 继承CustomPainter&#xff0c;paint()方法中拿到canvas&#xff0c;绘制API和android差不多。 import package:flutter/material.dart;class ProgressRingPainter extends CustomPainter {double strokeWidth 20;Col…

【网络技术】TCP详解

1 TCP是什么 TCP是Transmission Control Protocol的缩写&#xff0c;即传输控制协议。 TCP是一种面向连接的、可靠的、基于字节流的传输协议&#xff0c;是互联网通信协议TCP/IP中的一个重要组成部分。 2 三次握手 三次握手的过程可以用以下图示表示&#xff1a; 2.1 详细介绍…

《算法竞赛·快冲300题》每日一题:“连接草坪(II)”

《算法竞赛快冲300题》将于2024年出版&#xff0c;是《算法竞赛》的辅助练习册。 所有题目放在自建的OJ New Online Judge。 用C/C、Java、Python三种语言给出代码&#xff0c;以中低档题为主&#xff0c;适合入门、进阶。 文章目录 题目描述题解C代码Java代码Python代码 “ 连…

[Docker实现测试部署CI/CD----自由风格的CI操作[中间架构](4)]

目录 10、自由风格的CI操作&#xff08;中间架构&#xff09;中间架构图创建web项目Idea提交项目到远程仓库提交代码到本地库提交代码到远程库从jenkins拉取代码新建任务jenkins集成gitlab立即构建 将项目打为jar包Jenkins 配置 mvn 命令重新构建 代码质量检测jenkins将代码推送…

HTTP(超文本传输协议)学习

关于HTTP补学 一、HTTP能干什么 通过下图能够直观的看出&#xff1a;“交换数据 ” 二、HTTP请求例子 一个 HTTP 方法&#xff0c;通常是由一个动词&#xff0c;像 GET、POST 等&#xff0c;或者一个名词&#xff0c;像 OPTIONS、HEAD 等&#xff0c;来定义客户端执行的动作。…

小学语文思维导图:如何写一篇好的作文

大家都知道&#xff0c;思维导图是一款非常高效的工具。我们利用思维导图不仅可以做读书笔记、还可以运用到很多具体细分的场景。今天我们就“如何利用思维导图写好一篇作文”和大家进行分享。 思维导图在写作文的过程中&#xff0c;可以帮助我们整理思路。提高效率。将混乱的内…

【iOS安全】OpenSSH使用

安装OpenSSH 在 Cydia 中直接查找和安装 OpenSSH 使用OpenSSH http://orinchen.github.io/blog/2014/01/15/install-and-use-openssh-on-ios/ 保证PC和iPhone在同一网段下 查看iPhone的IP地址 ssh root10.168.xx.xx 口令默认是alpine 或者也可以使用XShell等集成终端

再次斩获第一,文心3.5霸榜国内大模型

目录 1 什么是文心一言&#xff1f;2 体验与文心一言对话3 文心3.5霸榜国内大模型 1 什么是文心一言&#xff1f; 文心一言是百度全新一代知识增强大语言模型&#xff0c;文心大模型家族的新成员&#xff0c;能够与人对话互动&#xff0c;回答问题&#xff0c;协助创作&#xf…

数据结构--单链表OJ题

上文回顾---单链表 这章将来做一些链表的相关题目。 目录 1.移除链表元素 2.反转链表 3.链表的中间结点 4.链表中的倒数第k个结点 5.合并两个有序链表 6.链表分割 7.链表的回文结构 8.相交链表 9.环形链表 ​编辑 10.环形链表II ​编辑 ​编辑 1.移除链表元素 思…

2023暑假牛客多校6- E.Sequence

题目描述 You have an array of elements . For each task, you have three integers . Ask whether you can find an array of integers satisfy: are the multiplies of 2 Specially, if , it should satisfy is the multiply of 2 We define . If possible, print…

Java课题笔记~ 动态SQL详解

一、动态 sql 是什么&#xff1f; 1、动态 SQL 是 MyBatis 的强大特性之一。在 JDBC 或其它类似的框架中&#xff0c;开发人员通常需要手动拼接 SQL 语句。根据不同的条件拼接 SQL 语句是一件极其痛苦的工作。 例如&#xff0c;拼接时要确保添加了必要的空格&#xff0c;还要…