WX小程序 - 2

news2024/11/15 13:54:11

条件渲染:

wx:if = "{{ newlist.length == 0 }}"

wx:else

跳路由:绑定点击事件,执行跳转页面

bindtap

data-id="{{ item.id }}" 添加id

wx.navigateTo

跳路由并传参, 下一个路由 onLoad生命周期可以获得参数。到达详情页面

 

详情页:

rich-text 解析 html5 标签,组件,基础内容:富文本组件

 

 把图片替换带有样式的图片

公共:::

 

封装轮播图

1.创建组件,Component。properties接收父传来的值

2.注册组件,(在哪个页面中使用就在哪个页面的json文件中进行注册)

3.渲染组件

子开启,子接收,子使用

父注册,父使用(父中发请求,传递给子组件)

 

二次封装请求(加快开发效率)

// util.js文件夹下 ajax 方法用来发请求
function ajax(url,method='GET',data={}){
    return new Promise((resolve,reject)=>{
        wx.request({
          url,
          method,
          data,
          success:(res)=>{
              resolve(res);
          }
        })
    })
}
// 导出ajax方法
export default ajax;
// api文件夹下
// 导入二次封装的ajax
import service from '../utils/request'

//一个请求封装成一个函数
export function news_hot(){
  return service('https://mpapi.iynn.cn/api/v1/news/hot');
}
export function news_list(payload = {}){
  return service('https://mpapi.iynn.cn/api/v1/news','GET', payload );
}
export function news_detail(payload = {}){
  return service('https://mpapi.iynn.cn/api/v1/news/'+payload.id,'GET', payload );
}

授权头像,昵称:这里看

wx.getUserProfile(Object object) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html

 

 

<view class="box" wx:if="{{!userInfo.nickName}}">
  <button open-type="getUserInfo" bindgetuserinfo="handleClick" style="background-color: #07c160;color: white;">去登录</button>
</view>
<view class="userinfo" wx:else>
  <image mode="aspectFill" src="{{userInfo.avatarUrl}}"></image>
  <text>{{userInfo.nickName}}</text>
</view>
/**index.wxss**/
page{
  background-color: #eeeeee;
}
.box{
  padding: 80rpx 0;
}
.userinfo{
  display: flex;
  align-items: center;
  padding: 60rpx;
}
.userinfo image{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

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

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

相关文章

每周一算法:前缀和

前缀和 前缀和可以理解为数列的前 n 项的和。它通过预处理的方式&#xff0c;能够快速查询序列中从第L个数到到第R个数的和。 算法思想 其基本思想是在原序列的基础上预处理一个前缀和数组 s [ ] s[] s[]&#xff0c;其中 s [ i ] s[i] s[i]表示序列前 i i i个数的和。通过前…

Exception in thread “main“ java.lang.UnsupportedClassVersionError

java MainDemo执行main方法报错 Error: A JNI error has occurred, please check your installation and try again Exception in thread "main" java.lang.UnsupportedClassVersionError: MainDemo has been compiled by a more recent version of the Java Runtime…

多台电脑共享鼠标键盘软件

背景 最近接手了2个不同base的项目&#xff0c;由于2个base的不同代码加密管理&#xff0c;必须要用两台电脑进行分别开发。于是&#xff0c;我不大的办公桌上要摆上2个键盘和2个鼠标&#xff0c;一下子就显得桌面特别杂乱&#xff0c;办公心情都不舒畅了。 我跟朋友吐槽了这件…

用LeangooScrum敏捷工具做缺陷管理和迭代规划和迭代执行

上一篇我们介绍了如何管理产品路线图&#xff08;用Leangoo领歌Scrum敏捷开发工具管理产品路线图&#xff1f;_哆啦B梦_的博客-CSDN博客)和敏捷需求管理&#xff08;使用敏捷开发工具做敏捷需求管理流程_哆啦B梦_的博客-CSDN博客&#xff09; 这一篇我们介绍下如何用Scrum敏捷…

纷享销客携手百捷、锐之旗走进湖南竞网,探索互联网营销创新

近日&#xff0c;《互联网营销创新增长路径-高管面对面闭门会》在长沙成功举办&#xff0c;活动邀请武汉百捷集团股份有限公司、河南锐之旗信息技术有限公司&#xff0c;两家互联网营销服务头部企业的高层走进湖南竞网数字科技集团有限公司&#xff08;以下简称“竞网”&#x…

[CSDN] 512创作纪念日,大处着眼,小处着手,乐观进取

大家好&#xff0c;我是一名程序员&#xff0c;也是一名CSDN博客作者&#xff0c;今天是我成为CSDN博客作者的512天纪念日&#xff0c;我想借此机会和大家分享一下我的创作历程。 初心与动力 从事IT行业多年&#xff0c;我深深感受到这个行业变化的速度非常之快&#xff0c;需…

责任链模式——使编程更有灵活性

● 责任链模式介绍 责任链模式&#xff08;Iterator Pattern)&#xff0c;是行为型设计模式之一。什么是“链”&#xff1f;我们将多个节点首位相连构成的模型称为链&#xff0c;比如生活中常见的锁链&#xff0c;就是由一个个圆角长方形的铁环串起来的结构。对于链式结构&…

浅谈绿色创新型校园的节约能耗与能耗管理的应用

摘要&#xff1a;保护地球资源和环境的可持续发展理论成为我国的基本国策。建筑节能上升到较高地位。仅有能量的“守恒”是不够的&#xff0c;更要研究用*小代价和*小能耗来满足人们的而合理需求&#xff0c;实现建筑合理用能。文章主要针对学校能源管理的问题进行研究&#xf…

带你简单了解Chatgpt背后的秘密:大语言模型所需要条件(数据算法算力)以及其当前阶段的缺点局限性

带你简单了解Chatgpt背后的秘密&#xff1a;大语言模型所需要条件&#xff08;数据算法算力&#xff09;以及其当前阶段的缺点局限性 1.什么是语言模型&#xff1f; 大家或多或少都听过 ChatGPT 是一个 LLMs&#xff0c;那 LLMs 是什么&#xff1f;LLMs 全称是 Large Language…

TomcatServletHTTP

1、Web概述 1.1 Web相关概念 Web是全球广域网&#xff0c;也称为万维网(www)&#xff0c;能够通过浏览器访问的网站。 在我们日常的生活中&#xff0c;经常会使用浏览器去访问百度、京东、传智官网等这些网站&#xff0c;这些网站统称为Web网站。 如下就是通过浏览器访问传智…

基于AT89C51单片机的电子计数器设计与仿真

点击链接获取Keil源码与Project Backups仿真图&#xff1a; https://download.csdn.net/download/qq_64505944/87770826 源码获取 主要内容&#xff1a; 设计一个电子计时器&#xff0c;数码管初始显示值为“00”&#xff0c;每隔1s电子秒表加1&#xff1b;秒计数到60时清0&a…

【网络】Socket编程-UDP篇

文章目录 预备知识源IP地址和目的IP地址源MAC地址和目的MAC地址源端口号和目的端口号"端口号port" 和 "进程ID"认识TCP/UDP协议网络字节序 Socket编程sockaddr结构API接口 简单的UDP网络程序服务器server服务端创建套接字:socket函数**socket的底层原理** …

metaRTC6.0 whip/whep编程指南

概述 WHIP/WHEP都是基于 HTTP 的协议并且是IETF国际标准&#xff0c;国内外一些主流的开源webRTC SFU都开始支持WHIP/WhEP协议。 WHIP: WebRTC-HTTP ingestion protocol (WHIP) WHEP: WebRTC-HTTP egress protocol (WHEP) 下载源码 GitHub - metartc/metaRTC: A cross-pla…

Matlab \和 / . * 和* ./ 和.\ 总结

一、* 与.* a、向量 >> a[1 2 4]; >> b[2 4 6]; a.*b[1*2 2*4 4*6][2 8 24]; 注意&#xff1a;a 和b 的长度是一样的。 dot1*2 2*4 4*634 a*b34 >> a[1 2 4]; >> b[2 4 6]; >> a.*bans 2 8 24>> dot(a,b)ans 34>> a*…

开关电源基础05:基本开关电源电感器设计(1)

说在开头&#xff1a;关于第五届索尔维会议&#xff08;1&#xff09; 1927年对物理学是个非常重要的年份&#xff0c;因为这年发生了一件非常重要的事&#xff0c;那就是第五届索尔维会议&#xff1b;后来的发展证明&#xff0c;它毫无疑问是有史以来最著名的一次索尔维会议。…

C#开发WPF自宿主web服务

一直都在使用IIS部署WebAPI的模式&#xff0c;经过讨论决定不适用IIS&#xff0c;创建自宿主程序启动AP 使用微软自带OWIN来实现自承载Web Api框架&#xff0c;集成了swagger接口文档 话不多说&#xff0c;详细如下&#xff1a; 大致的项目框架结构&#xff1a; 使用NuGet安…

讨论func与scan分开长tree的局限性

当func clock的root都定义在mux前面&#xff0c;分开长tree有助于做短func tree&#xff0c;减少clock buffer&#xff0c;但当部分func clock的root定义在其他clock后面&#xff0c;如下图&#xff0c;分开长tree就会导致scan clock产生很大的skew&#xff0c;从而引起hold vi…

Linux系统之Team链路聚合配置

Linux系统之Team链路聚合配置 一、Team链路聚合介绍1. Teaming技术简介2. 网卡的bonding和Teaming技术3. Team常用工作模式 二、实践环境规划三、添加物理网卡1. 新增物理网卡2. 查看网卡信息 四、Team链路聚合配置1. 查看team的工作模式2. 创建team0的网络接口3. 配置team0接口…

物联网仿真调试与下载|CC254基础开发(通用I/O)|独立按键开发|长短按键实现思路|物联网之蓝牙4.0 BLE基础-学习笔记(4)

文章目录 7、仿真调试与下载8、CC254基础开发(通用I/O)示例:LED流水灯 9、独立按键开发 7、仿真调试与下载 仿真调试下钱器驱动的安装 程序仿真调试 结合smartRF Flash Programmer软件实现程序下载 设置 F:\IOT\blud_prj\test\Debug\Exe 获取CC2540蓝牙设备的IEEE地址 8…

Unity期末AI足球游戏小项目(免费开源)

​ 该游戏项目仅供参考&#xff0c;下载链接在文末。若需要答辩论文请私聊 版本&#xff1a;Unity 2018.4 文章目录 游戏介绍整体框架部分截图答辩论文截图答辩问题1 倒计时功能如何实现&#xff1f;2 AI的实现体现在哪一方面&#xff1f;3 计分系统的实现&#xff1f; 游戏介…