微信小程序-2

微信开发文档 https://developers.weixin.qq.com/miniprogram/dev/framework/

一、app.js中的生命周期函数与globalData(全局变量)

指南 - - - 小程序框架 - - - 注册小程序

删除app.js里的东西,输入App回车,调用生命周期

选项 - - - 重新打开此项目

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

  onLaunch: function () {console.log('hi')},// globalData 自己添加globalData:{name:'weixin'}

在js文件里调用

// 调用app.js里的内容
const app = getApp()
console.log(app);
// 得到name的值weixin
console.log(app.globalData.name)

得到数据如下图
在这里插入图片描述

在app.js里this可以拿到app对象,在onLaunch里可以修改name值

  onLaunch: function () {this.globalData.name='微信'},

二、page页内的onload和data差值表达式

指南 - - - 小程序框架 - - - 注册页面

删除js文件里的所有内容,输入Page点击前面有方块的那个
在这里插入图片描述

小程序执行先走onLaunch再走onLoad,app.js文件优先级大于其他js文件

js文件

  data: {name:'zhangsan',},

wxml文件

{{name}}

zhangsan会被渲染到页面

在onLoad里使用this.setData修改data的数据

  onLoad: function (options) {this.setData({name:'lisi'})},

页面中的zhangsan两秒后变为lisi
setTimeout定时器

  onLoad: function (options) {// 设置两秒钟后再进行修改// 使用箭头函数,否则会出现指向问题setTimeout(()=>{this.setData({name:'lisi'})},2000)},

三、data中不同数据类型及渲染

指南 - - - 小程序框架 - - - wxml

  data: {name:'张三',age:18,bool:true,number:['一','二','三'],user:{name:'李四',gender:'男',age:20},ls:[{id:1,title:'one',year:2019},{id:2,title:'two',year:2020},{id:3,title:'three',year:2021}]},
{{name}} {{age}} {{bool}}
<view>{{number}}</view>
<view>{{user}}</view>
<view>{{user.name}}</view>
<view>{{user.name +'-'+ user.gender +'-'+ user.age}}</view>

在这里插入图片描述

1.条件渲染 if

条件写到{{}}里
前面加 ! 取反 - - - eg:{{!bool}} data里的bool是true,取反后变为false

注意:if elif else 要放在一起,中间不能有其他内容,否则会报错

<view wx:if="{{number == '一'}}"></view>
<view wx:elif="{{number == '一'}}"></view>
<view wx:else"></view>
<!-- <view wx:else="{{number == '一'}}"> 三 </view> -->

最后显示为三,因为number是列表[‘一’,‘二’,‘三’],都错,所以显示else里的值

2.列表渲染 for

<view wx:for="{{number}}">{{item}}
</view>

在wxml里得到了三个包裹着view的文字
在这里插入图片描述

wx:for-item 元素
wx:for-index 元素索引

<view wx:for="{{number}}" wx:for-item='num'>{{index+1}} - {{num}}
</view>
<!-- {{index+1}} - {{num}}  中间有空格,所有输出的-左右都有空格 -->
<view wx:for="{{number}}" wx:for-item='num' wx:for-index='idx'>{{idx+1}} - {{num}}
</view>

都得到下面内容

1 - 一
2 - 二
3 - 三

调试器有报错,但不影响 可以使用wx:key=‘idx’解决

<view wx:for="{{ls}}" wx:key="id"><view>{{item.title}} {{item.year}}</view>
</view>

在这里插入图片描述

四、bindtap事件绑定触发

指南 - - - 小程序框架 - - - 事件系统 介绍

绑定事件
bind:tap | bindtap

data-自己定义的参数

<view class="box" data-myname='张三' bindtap='onClick' style="width: 200rpx;height: 200rpx;background: aqua;"></view>
<view class="name">姓名:{{name}}</view>

函数onClick和onLoad平级,写在onLoad之后,函数写完后记得写逗号

  data: {name:''},onClick(){this.setData({name:'李四'})},

点击蓝色方块,名字出现
在这里插入图片描述


<view class="box" data-myname='李四' bindtap='onClick' style="width: 200rpx;height: 200rpx;background: aqua;"></view>
<view class="name">姓名:{{name}}</view>
  data: {name:'张三'},// event是接受参数的onClick(event){// console.log(event.currentTarget.dataset);// let obj = event.currentTarget.dataset;// console.log(obj);// 使用花括号可以直接拿到值let {myname}= event.currentTarget.dataset;// console.log(myname)this.setData({name:myname})},

使用console.log(event);查看参数
我们定义的参数在currentTarget的dataset里
使用console.log(event.currentTarget.dataset);可以在console里查看自己定义的参数
在这里插入图片描述
点击蓝色方块,张三会变成李四
在这里插入图片描述

小案例

点击方块,改变方块的大小和颜色

<view bindtap='clickBox' style="width: {{size}}rpx;height: {{size}}rpx;background: {{color}};color:red;display:flex;justify-content: center;align-items: center;">
随机数:{{number}}
</view>
  data: {color:'pink',size:300,},clickBox(){let rdm = parseInt(Math.random()*100);// console.log(rdm)// let color = 'rgb(100,200,100)';let r = parseInt(Math.random()*255);let g = parseInt(Math.random()*255);let b = parseInt(Math.random()*255);// 注意:此处的`是和~一个键// ${}let color = `rgb(${r},${g},${b})`;let size = parseInt(Math.random()*600);// 如果size的值小于200,size=200,如果大于用size本身的大小size = size<200?200:sizethis.setData({number:rdm,// 两个值一样可以省略color:color,size,})},

Math.random()取的是0到1之间的小数
parseInt()取整
在这里插入图片描述

五、表单组件

1.button

<button>按钮</button>
<button size="mini" type="primary">按钮</button>
<button size="mini" type="warn">按钮</button>
<button size="default" type="default">按钮</button>
<!-- true和false必须写在{{}}里才会生效 -->
<!-- plain是否镂空,背景色透明 -->
<button size="default" type="default" plain="{{true}}">按钮</button>

在这里插入图片描述

2.input textarea

input 单行输入框
textarea 多行输入框

value初始值
placeholder输入框为空时占位符

<input type="text" bindinput="onInput" value="请输入..." placeholder="请输入用户名" placeholder-style="color:red" style="background: aqua;"/>
<view>{{content}}</view>
  onInput(e){// console.log(e);let value = e.detail.value;this.setData({content:value})},

效果如下:
在这里插入图片描述

在这里插入图片描述
value.length
value值为空时,value.length为false,!取反,!value.length为true
disable为true是进制使用该按钮

<button type="primary" disabled="{{!value.length}}">按钮</button>

输入框聚焦时触发 bindfocus=“onFocus”

<input type="text" bindfocus="onFocus" bindinput="onInput" value="" placeholder="请输入用户名" placeholder-style="color:red" style="background: aqua;"/>
<view>{{content}}</view>
<button type="primary" disabled="{{true}}" >按钮</button>
  onFocus(e){console.log(e);},

在这里插入图片描述

在这里插入图片描述

3.checkbox checkbox-group label

box-sizing:border-box; 内填充
width= calc(100% - 40rpx);

<checkbox-group bindchange="clickChange"><view style="margin: 20rpx;"><label for=""><!-- checked默认选中项 --><checkbox checked value="basketball"/><text>篮球</text></label>    </view><view style="margin: 20rpx;"><label for=""><!-- color选中时对钩的颜色 --><checkbox color="red" value="football"/><text>足球</text></label>    </view>
</checkbox-group>

在这里插入图片描述
使用label时,点击文字也可以触发选中状态

六、综合案例

指南 - - - 小程序框架 - - - 简易双向绑定

block专门做样式的布局

在这里插入图片描述

<view class="title">经典语录</view>
<view class="out"><block wx:if="{{listArr.length}}"><view class="list"><view class="row" wx:for="{{listArr}}" wx:key="id"><view class="text">{{index + 1}}.{{item.title}}</view><view class="close" bindtap='clickClose' data-index="{{index}}"><icon type="clear" size="26"/></view></view></view><view class="count">共{{listArr.length}}条语录</view></block><view wx:else style="text-align: center;font-size: 30rpx;padding: 20rpx 0;color:#555;">暂无语录,请添加</view><view class="comment"><!-- model双向绑定 --><!-- bindconfirm 点击完成按钮时触发,event.detail = { value } --><!-- 此处敲回车可将内容发布上去 --><input bindconfirm="onSubmit" model:value="{{iptValue}}" type="text" placeholder="请输入文字..." placeholder-style="color:#aaa;font-size:28rpx"/><button bindtap="onSubmit" size="mini" type="primary" disabled="{{!iptValue.length}}">发布</button></view>
</view>
<!-- 在输入框输入内容,下面的内容可以跟着改变 -->
{{iptValue}}
.title{font-size: 50rpx;text-align: center;color: #3c3c3c;padding: 60rpx 0 30rpx;
}
.out{width: 690rpx;margin: 30rpx;box-shadow: 0 15rpx 40rpx rgba(0,0,0,0.1);border-radius: 10rpx;padding: 30rpx;box-sizing: border-box;
}
.out .list .row{padding: 15rpx 0;border-bottom: 1rpx solid #e8e8e8;display: flex;justify-content: space-between;align-items: center;font-size: 34rpx;color:#333;
}
.out .list .row .text{padding-right: 10rpx;box-sizing: border-box;
}
.out .count{padding: 20rpx 0;text-align: center;font-size: 30rpx;color: #888;
}
.out .comment{display: flex;margin-top: 20rpx;
}
.out .comment input{flex: 4;background: #f4f4f4;margin-right: 10rpx;height: 100%;height: 64rpx;border-radius: 10rpx;color: #333;padding:0 20rpx;
}
.out .comment button{flex:1;
}
Page({/*** 页面的初始数据*/data: {iptValue:'',listArr:[{id:123123123,title:'啊啊啊啊啊啊啊啊啊'},{id:456456456,title:'哈哈哈哈哈哈哈哈哈'},{id:789789789,title:'红红火火恍恍惚惚'},]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},// 点击按钮发布onSubmit(){// console.log(this.data.iptValue);let value = this.data.iptValue;let arr = this.data.listArr;// Appends new elements to an array, and returns the new length of the array.// 数组添加内容arr.push({// id 时间戳id:Date.now(),title:value,})this.setData({listArr:arr,iptValue:'',})},// 点击删除该行内容clickClose(e){// console.log(e)// e.currentTarget.dataset.index  // 得到该行的索引let {index} = e.currentTarget.dataset;let arr = this.data.listArr;// splice删除 Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.arr.splice(index,1);// console.log(arr);this.setData({listArr:arr,})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

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

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

相关文章

Scala第十八章节

Scala第十八章节 scala总目录 文档资料下载 章节目标 掌握Iterable集合相关内容.掌握Seq集合相关内容.掌握Set集合相关内容.掌握Map集合相关内容.掌握统计字符个数案例. 1. Iterable 1.1 概述 Iterable代表一个可以迭代的集合, 它继承了Traversable特质, 同时也是其他集合…

【数据分析】时间序列

UTC时间&#xff1a;时间戳是以格林威治时间1970年01月01日00时00分00秒为基准计算所经过时间的秒数&#xff0c;是一个浮点数。Python的内置模块time和datetime都可以对时间格式数据进行转换&#xff0c;如时间戳和时间字符串的相互转换。 报错记录&#xff1a;AR has been re…

分层强化学习 综述论文阅读 Hierarchical Reinforcement Learning: A Comprehensive Survey

分层强化学习 综述论文阅读 Hierarchical Reinforcement Learning: A Comprehensive Survey 摘要一、介绍二、基础知识回顾2.1 强化学习2.2 分层强化学习2.2.1 子任务符号2.2.2 基于半马尔可夫决策过程的HRL符号 2.3 通用项定义 三、分层强化学习方法3.1 学习分层策略 (LHP)3.1…

【yolo系列:yolov7改进wise-iou】

yolo系列文章目录 学习视频&#xff1a; YOLOV7改进-Wise IoU_哔哩哔哩_bilibili 代码地址&#xff1a; objectdetection_script/yolov7-iou.py at master z1069614715/objectdetection_script (github.com) 文章目录 yolo系列文章目录一、在yolov7之上进行替换二、在loss.p…

大语言模型之十六-基于LongLoRA的长文本上下文微调Llama-2

增加LLM上下文长度可以提升大语言模型在一些任务上的表现&#xff0c;这包括多轮长对话、长文本摘要、视觉-语言Transformer模型的高分辨4k模型的理解力以及代码生成、图像以及音频生成等。 对长上下文场景&#xff0c;在解码阶段&#xff0c;缓存先前token的Key和Value&#…

新文件覆盖旧文件还能复原吗,3个方法快速恢复覆盖文件!

iPhone在解压压缩文件时&#xff0c;不小心将同名文件进行了覆盖&#xff0c;怎么撤回&#xff1f; 在使用U盘转移文档时&#xff0c;意外将同名文档进行了替换&#xff0c;怎么恢复&#xff1f; 当误将重名文件进行了替换&#xff0c;如何找回这些被覆盖的旧文件&#xff1f;…

oracle linux8.8上安装oracle 19c集群

1、操作系统版本告警 处理办法&#xff1a;export CV_ASSUME_DISTIDRHEL7.6 2、ssh互信故障 查看ssh版本 [rootdb1 ~]# ssh -V OpenSSH_8.0p1, OpenSSL 1.1.1k FIPS 25 Mar 2021 处理办法-2个节点都需要操作 安装前配置 # mv /usr/bin/scp /usr/bin/scp.orig # echo "…

解决 Jenkins 性能缓慢的问题~转

解决 Jenkins 性能缓慢的问题 Docker中文社区 ​​ 计算机技术与软件专业技术资格持证人 2 人赞同了该文章 没有什么比缓慢的持续集成系统更令人沮丧的了。它减慢了反馈循环并阻止代码快速投入生产。虽然像使用性能更好的服务器可以为您争取时间&#xff0c;但您最终必须投资…

c++day1

#include <iostream> //#预处理 using namespace std; //using :使用命名空间的关键字 //namespace:命名空间的关键字 //std:标准的命名空间//程序入口 int main() {//程序的开始int daxie 0,xiaoxie 0,sum 0, kong 0,other 0;string str;getline(cin , str);for(in…

基于SSM的资源共享平台设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

Zabbix监控系统 第一部分:zabbix服务部署+自定义监控项+自动发现与自动注册(附详细部署实例)

这里是目录 一、Zabbix概述1.1 简介1.2 zabbix组件1.2.1 zabbix server1.2.2 zabbix agent1.2.3 zabbix proxy1.2.4 zabbix get1.2.5 zabbix sender 1.3 工作原理1.4 端口号1.5 zabbix中预设的键值1.6 自定义监控项1.7 邮件报警的思路1.8 Zabbix自动发现和自动注册1.8.1 zabbix…

[图论]哈尔滨工业大学(哈工大 HIT)学习笔记16-22

视频来源&#xff1a;2.7.1 补图_哔哩哔哩_bilibili 目录 1. 补图 1.1. 补图 2. 双图 2.1. 双图定理 3. 图兰定理/托兰定理 4. 极图理论 5. 欧拉图 5.1. 欧拉迹 5.2. 欧拉闭迹 5.3. 欧拉图 5.4. 欧拉定理 5.5. 伪图 1. 补图 1.1. 补图 &#xff08;1&#xff09;…

使用mysql的cmd窗口,运行项目中的mapper层xml里的sql语句,查看运行结果

使用mysql的cmd窗口&#xff0c;运行项目中的mapper层xml里的sql语句&#xff0c;查看运行结果 项目代码或者从控制台复制sql语句从控制台搜索方式 运行效果或者使用idea的console窗口运行查看结果点击进入&#xff0c;查看表结构与字段 其他技巧根据from 表名寻找对应的sql代码…

微服务学习(十):安装Maven

微服务学习&#xff08;十&#xff09;&#xff1a;安装Maven 1、下载Maven 官网下载 2、将下载后的资源包上传到服务器 3、解压资源包并安装 tar -zxvf apache-maven-3.9.5-bin.tar.gz4、配置环境变量 vi /etc/profileexport MAVEN_HOME/home/maven/apache-maven-3.9.5 …

SSL证书是什么?1分钟get

在当今互联网世界中&#xff0c;保护数据的完整性和隐私性至关重要&#xff0c;由此&#xff0c;在网络数据安全保护领域&#xff0c;作为保护网络传输数据安全的SSL证书越来越频繁出现。那么你知道SSL证书是什么&#xff1f;SSL证书有哪些类型&#xff1f;SSL证书有什么用吗&a…

机器学习---RBM、KL散度、DBN

1. RBM 1.1 BM BM是由Hinton和Sejnowski提出的一种随机递归神经网络&#xff0c;可以看做是一种随机生成的 Hopfield网络&#xff0c;是能够通过学习数据的固有内在表示解决困难学习问题的最早的人工神经网络之 一&#xff0c;因样本分布遵循玻尔兹曼分布而命名为BM。BM由二…

基于Springboot实现旧物置换网站平台演示【项目源码+论文说明】分享

基于Springboot实现旧物置换网站平台演示 摘要 随着时代在一步一步在进步&#xff0c;旧物也成人们的烦恼&#xff0c;许多平台网站都在推广自已的产品像天猫、咸鱼、京东。所以开发出一套关于旧物置换网站成为必需。旧物置换网站主要是借助计算机&#xff0c;通过对用户进行管…

JVM上篇之虚拟机与java虚拟机介绍

目录 虚拟机 java虚拟机 简介 特点 作用 位置 整体结构 类装载子系统 运行时数据区 java执行引擎 Java代码执行流程 jvm架构模型 基于栈式架构 基于寄存器架构 总结 jvm的生命周期 1.启动 2.执行 3.退出 JVM的发展历程 虚拟机 所谓虚拟机&#xff0c;指的…

竞赛选题 深度学习 python opencv 动物识别与检测

文章目录 0 前言1 深度学习实现动物识别与检测2 卷积神经网络2.1卷积层2.2 池化层2.3 激活函数2.4 全连接层2.5 使用tensorflow中keras模块实现卷积神经网络 3 YOLOV53.1 网络架构图3.2 输入端3.3 基准网络3.4 Neck网络3.5 Head输出层 4 数据集准备4.1 数据标注简介4.2 数据保存…

外卖小程序源码vs定制开发:何时选择哪种方式?

在数字餐饮行业的蓬勃发展中&#xff0c;外卖应用程序已经成为餐厅和创业者的必备工具。然而&#xff0c;当涉及到开发外卖应用程序时&#xff0c;您会面临一个重要的决策&#xff1a;是使用外卖小程序源码还是进行定制开发&#xff1f;这两种方法各有优势和劣势&#xff0c;取…