小程序的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. 页面加载函数,相当于 crated
    onLoad(){
        console.log('1. 页面加载了')
    },

    //2. 页面显示出来了
    onShow(){
        console.log('2. 页面显示啦');
    },

    //3. 页面准备好了,初始渲染完成,相当于 mounted
    onReady(){
        console.log('3. 页面初次渲染完成');
    },

    //4. 页面隐藏时执行
    onHide(){
        console.log('4. 页面隐藏了');
    },

    //5. 页面卸载时执行
    onUnload(){
        console.log('5. 首页被卸载啦');
    }
})

2.3 用户操作函数

Page({
    //用户向上滑动触底时执行,必须要有足够的高度超出一屏才能滑动
    onReachBottom(){
        console.log('已经到底了,没有数据了')
    },

    //用户向下拉,拉到顶了会触发,注意:要在app.json或index.json配置 enablePullDownRefresh:true
    onPullDownRefresh(){
        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');

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

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

方案展示 | RK3588开发板Android12双摄方案

iTOP-RK3588开发板使用手册更新&#xff0c;后续资料会不断更新&#xff0c;不断完善&#xff0c;帮助用户快速入门&#xff0c;大大提升研发速度。 ​RK3588开发板载4路MIPI CAMERA摄像头接口、MIPI CSI DPHY的4.5Gbps、2.5Gops的MIPI CSI CPHY&#xff0c;四路同时输入&#…

爬虫018_urllib库_cookie反爬_post请求百度翻译获取百分翻译内容_以及详细翻译内容---python工作笔记037

然后我们来看如何用urllib发送post请求,这里我们 用百度翻译为例 我们翻译一个spider,然后我们看请求,可以看到有很多 找到sug这个 可以看到这里的form data,就是post请求体中的内容 然后我们点击preview其实就是 返回的实际内容 然后请求方式用的post 然后我们把上面的信息…

Java 常用编辑器 IntelliJ IDEA

文章目录 IDEA 概述IDEA 下载和安装IDEA 中的第一个代码IDEA 的项目和模块操作&#xff08;一&#xff09;类的操作&#xff08;二&#xff09;模块的操作&#xff08;三&#xff09;项目的操作 IDEA 概述 IntelliJ IDEA是一款由JetBrains开发的集成开发环境&#xff08;IDE&am…

东南亚海外跨境物流管理,移动支付、数据处理程序开发

境外虚拟物流跨境支付平台快速搭建、集成后台采集功能的步骤如下&#xff1a; 一、项目规划与需求分析 在开始搭建境外虚拟物流跨境支付平台之前&#xff0c;需要进行详细的规划和分析。这包括确定项目的目标、了解客户需求、分析市场环境、确定系统架构和技术选型等。通过深…

手机便签中可以打勾的圆圈或小方块怎么弄?

在日常的生活和工作中&#xff0c;很多网友除了使用手机便签来记录灵感想法、读书笔记、各种琐事、工作事项外&#xff0c;还会用它来记录一些清单&#xff0c;例如待办事项清单、读书清单、购物清单、旅行必备物品清单等。 在按照记录的清单内容来执行的时候&#xff0c;为了…

RabbitMQ 79b5ad38df29400fa52ef0085a14b02f

RabbitMQ 一、什么是消息队列 消息队列可以看作是一个存放消息的容器&#xff0c;其中&#xff0c;生产者负责生产数据到消息队列中&#xff0c;而消费者负责消费数据。消息队列是分布式系统中重要的组件&#xff0c;目前使用较多的消息队列有ActiveMQ&#xff0c;RabbitMQ&am…

http、https笔记

目录 HTTP 基本概念状态码&#xff1a;get和post的区别&#xff1a;http 常⻅字段&#xff1a;http的缺点&#xff1a; HTTP/1.1HTTP/3HTTPSHTTPS和HTTP区别对称加密和⾮对称加密⾮对称加密 HTTP 基本概念 状态码&#xff1a; 1xx 中间状态&#xff0c;比如post的continue 20…

【LeetCode】1572.矩阵对角线元素的和

题目 给你一个正方形矩阵 mat&#xff0c;请你返回矩阵对角线元素的和。 请你返回在矩阵主对角线上的元素和副对角线上且不在主对角线上元素的和。 示例 1&#xff1a; 输入&#xff1a;mat [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;25 解释&#xff1a;对角线的和为&a…

3.4 网络安全管理设备

数据参考&#xff1a;CISP官方 目录 IDS (入侵检测系统)网络安全审计漏洞扫描系统VPN&#xff08;虚拟专网&#xff09;堡垒主机安全管理平台 一、IDS (入侵检测系统) 入侵检测系统&#xff08;IDS&#xff09;是一种网络安全设备&#xff0c;用于监测和检测网络中的入侵行…

nginx编译以及通过自定义生成证书配置https

1. 环境准备 1.1 软件安装 nginx安装编译安装以及配置https&#xff0c;需要gcc-c pcre-devel openssl openssl-devel软件。因此需要先安装相关软件。 yum -y install gcc-c pcre-devel openssl openssl-devel wgetopenssl/openssl-devel&#xff1a;主要用于nginx编译的htt…

Docker安装Hadoop分布式集群

一、准备环境 docker search hadoop docker pull sequenceiq/hadoop-docker docker images二、Hadoop集群搭建 1. 运行hadoop102容器 docker run --name hadoop102 -d -h hadoop102 -p 9870:9870 -p 19888:19888 -v /opt/data/hadoop:/opt/data/hadoop sequenceiq/hadoop-do…

windows环境下编译OpenJDK12

环境&#xff1a;Windows11 目录&#xff1a; 1、下载OpenJDK12源码 下载地址&#xff1a; https://hg.openjdk.org/jdk/jdk12 点击zip下载到本地。 解压到本地。 Tip&#xff1a;注意本地路径中最好不要包含中文或空格。 2、阅读一遍doc/building.html 如果只是想构建J…

数组对象去重的几种方法

场景&#xff1a; let arrObj [{ name: "小红", id: 1 },{ name: "小橙", id: 1 },{ name: "小黄", id: 4 },{ name: "小绿", id: 3 },{ name: "小青", id: 1 },{ name: "小蓝", id: 4 } ]; 方法一&#xff1a;…

2023年第2季社区Task挑战赛升级新玩法,等你来战!

第1季都有哪些有趣的作品&#xff1f; 在大家的共建下&#xff0c;FISCO BCOS开源生态不断丰富完善&#xff0c;涌现了众多实用技术教程和代码&#xff1a;基于数字身份凭证的业务逻辑设计&#xff0c;贡献了发放数字身份凭证的参考实现&#xff1b;提供企业碳排放、慈善公益等…

【基础类】—原型链系统性知识

一、创建对象有几种方法 字面量创建对象 1-1. 什么是字面量 字面量就是所见即所&#xff0c;指的是常量&#xff1b;用来为变量赋值时的常数量 代码例子&#xff1a;123&#xff1b;‘ABC’, {name: ‘张三’}, undefined &#xff0c; true 生活例子&#xff1a;门店的招牌&a…

[C++项目] Boost文档 站内搜索引擎(4): 搜索的相关接口的实现、线程安全的单例index接口、cppjieba分词库的使用、综合调试...

有关Boost文档搜索引擎的项目的前三篇文章, 已经分别介绍分析了: 项目背景: &#x1fae6;[C项目] Boost文档 站内搜索引擎(1): 项目背景介绍、相关技术栈、相关概念介绍…文档解析、处理模块parser的实现: &#x1fae6;[C项目] Boost文档 站内搜索引擎(2): 文档文本解析模块…

CDN(内容分发网络)

CDN的全称是 Content Delivery Network, 即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络&#xff0c;依靠部署在各地的边缘服务器&#xff0c;通过中心平台的负载均衡、内容分发、调度等功能模块&#xff0c;使用户就近获取所需内容&#xff0c;降低网络拥塞&a…

CentOS7 安装 MongoDB5

MongoDB是一种NoSQL数据库&#xff0c;它存储数据的方式与传统的关系型数据库不同。MongoDB使用文档数据库模型&#xff0c;将数据存储在自包含的、可扩展的BSON文档中。MongoDB具有高可用性、自动分片、动态查询能力、灵活性等优点&#xff0c;适合于许多不同的应用场景。 下…

ACM Journals的Word模板使用心得

按照说明一步一步按照顺序调整格式&#xff0c;体力活&#xff0c;考验耐心细心。 两个模板&#xff0c;第一个是 Submission Template投稿用的&#xff0c;第二个是Primary Article Template接收后用的。 及时保存备份&#xff0c;以便恢复到最初满意的状态。 格式确定后&a…