当前位置: 首页 > news >正文

5 微信小程序

功能开发

  • 5 功能开发
    • 概要
    • 今日详细
      • 1.发布
        • 1.1 发布流程的问题
        • 1.2 组件:进度条
        • 1.3 修改data中的局部数据
        • 1.4 发布示例效果
          • 前端
          • 后端
        • 1.5 闭包
      • 2.获取前10条新闻(动态/心情,无需分页)
      • 3.复杂版
      • 4.文章详细页面

各位小伙伴想要博客相关资料的话关注公众号:chuanyeTry即可领取相关资料!

5 功能开发

概要

  • 发布
  • 首页
  • 详细页面

今日详细

1.发布

1.1 发布流程的问题
  • 方式一

    1. 打开图片进行本地预览
    2. 输入文字 & 选择相应的信息
    3. 点击发布按钮3.1 将本地图片上传到 腾讯云对象存储中COS(oss),并将COS中的图片地址返回。3.2 将COS中的图片URL和文字等信息一起提交到后台。
    BUG:在3.2步骤时可能拿不到COS中的图片。
    
    function onClickSubmit(){// 耗时1分钟,不会阻塞。wx.request({url:"...",success:function(res){console.log(res)}})console.log(123);
    }
    
  • 方式二(推荐)

    1. 打开图片进行本地预览
    2. 将本地图片上传到 腾讯云对象存储中COS
    3. 输入文字 & 选择相应的信息
    4. 发布:必须上传完毕之后,才允许点击发布按钮。
    
1.2 组件:进度条
<progress percent="{{percent1}}"  ></progress><progress percent="{{percent2}}" activeColor="#DC143C" ></progress>
1.3 修改data中的局部数据
<view>-----案例------</view>
<view>点击按钮完成,将图片1的进度条更新为80%</view>
<view wx:for="{{imageList}}"><view>{{item.title}}</view><progress percent="{{item.percent}}"  ></progress>
</view><button bindtap="changePercent" >点击</button>
  data: {percent1:20,percent2:50,imageList:[{id:1,title:"图片1",percent:20},{ id: 1, title: "图片2", percent: 30 },{ id: 1, title: "图片3", percent: 60 },]},changePercent:function(){// 方式1:错误/*this.setData({imageList[0].person: 80});*/// 方式2:可以,由于需要全部修改,所以性能差。/*var dataList = this.data.imageList;dataList[0].percent = 80;this.setData({imageList: dataList});*/// 方式3:推荐var num = 2;this.setData({["imageList[0].percent"]:80,["imageList[" + num + "].percent"]: 90,["imageList[1].title"]:"突突突突突"})},
1.4 发布示例效果
前端

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

后端
  • GET 获取临时COS密钥(临时密钥需要有上传和删除的权限)(APIView)

在这里插入图片描述

  • url

    url(r'^oss/credential/$', auth.OssCredentialView.as_view()),
    
  • view

    class OssCredentialView(APIView):def get(self, request, *args, **kwargs):from utils.tencent.oss import get_credentialreturn Response(get_credential())
    
  • GET 获取话题接口

    • url

      url(r'^topic/$', topic.TopicView.as_view()),
      
    • 序列化

      class TopicSerializer(ModelSerializer):class Meta:model = models.Topicfields = "__all__"
      
    • view(读取所有的话题)

      • APIView
      • ListAPIView(推荐)
      class TopicView(ListAPIView):serializer_class = TopicSerializerqueryset = models.Topic.objects.all().order_by('-count')
      
  • POST 提交 新闻信息

    • url

      url(r'^news/$', news.NewsView.as_view()),
      
    • 序列化

      class CreateNewsTopicModelSerializer(serializers.Serializer):key = serializers.CharField()cos_path = serializers.CharField()class CreateNewsModelSerializer(serializers.ModelSerializer):imageList = CreateNewsTopicModelSerializer(many=True)class Meta:model = models.Newsexclude = ['user', 'viewer_count', 'comment_count']def create(self, validated_data):image_list = validated_data.pop('imageList')news_object = models.News.objects.create(**validated_data)data_list = models.NewsDetail.objects.bulk_create([models.NewsDetail(**info, news=news_object) for info in image_list])news_object.imageList = data_listif news_object.topic:news_object.topic.count += 1news_object.save()return news_object
      
    • view(读取所有的话题)

      • APIView
      • CreateAPIView(推荐)
      class NewsView(CreateAPIView):serializer_class = CreateNewsModelSerializerdef perform_create(self, serializer):new_object = serializer.save(user_id=1)return new_object
      
1.5 闭包
var dataList = ["alex", "changxin", "cck"]
for (var i in dataList) {(function(data){wx.request({url: 'xxxxx',success: function (res) {console.log(data);}})})(dataList[i])
}

2.获取前10条新闻(动态/心情,无需分页)

  • url
  • view(ListAPIView)
  • 序列化

3.复杂版

  • 刚进入页面,获取前10条。

    • maxid
    • minid
  • 刷新

    • 全局配置

      {"window": {"backgroundTextStyle": "dark","navigationBarTitleText": "大保健","enablePullDownRefresh": false}
      }
      
    • 局部配置

      {"usingComponents": {},"enablePullDownRefresh": true
      }
      
    • 停止下拉刷新加载

      wx.stopPullDownRefresh();
      
  • 翻页

4.文章详细页面

在这里插入图片描述

相关文章:

5 微信小程序

功能开发 5 功能开发概要今日详细1.发布1.1 发布流程的问题1.2 组件&#xff1a;进度条1.3 修改data中的局部数据1.4 发布示例效果前端后端 1.5 闭包 2.获取前10条新闻&#xff08;动态/心情&#xff0c;无需分页&#xff09;3.复杂版4.文章详细页面 各位小伙伴想要博客相关资料…...

百度面经整理(2024最新)

百度 面经1 shiro的组件分布式一致性算法zookeeper那些能参与投票&#xff0c;leader能投票吗&#xff1f;netty零拷贝实现volatile&#xff0c;如何感知到变量变化的redis高可用http如何跨域&#xff1f;tcp如何长链接。http如何操作浏览器缓存。用过消息队列吗&#xff1f;…...

c++的构造函数

目录 构造函数 1.构造函数&#xff1a; 2.构造函数的特点&#xff1a; 默认构造函数 -- 没有参数的构造函数 1. 合成(自动)的默认构造函数(一般不常用) 1&#xff09; 介绍&#xff0c;以及为什么不使用 2&#xff09;可以使用合成默认构造函数的情况 2. 自定义的默认…...

基于ZU19EG的100G-UDP解决方案

概述 本文档介绍ZU19EG与Mellanox CX6 100G网卡通信解决方案。 环境配置 FPGA硬件&#xff1a;519-ZU19EG的4路100G光纤PCIe加上计算卡 电脑&#xff1a;国产国鑫主板&#xff08;双PCU&#xff09;&#xff1a;Gooxi G2DA-B CPU:Intel Xeon Silver 2.2GHz 内存&#xff1…...

行为型设计模式——备忘录模式

备忘录模式 备忘录模式提供了一种状态恢复的实现机制&#xff0c;使得用户可以方便地回到一个特定的历史步骤&#xff0c;当新的状态无效或者存在问题时&#xff0c;可以使用暂时存储起来的备忘录将状态复原&#xff0c;很多软件都提供了撤销&#xff08;Undo&#xff09;操作…...

自定义HBase负载均衡器MyCustomBalancer实现步骤与代码解析

目录 1.HBase默认负载均衡策略 1.1 负载均衡总体流程 1.2 不能触发负载均衡的情况 1.3 负载均衡算法 2.自定义的 HBase 负载均衡器的步骤 3.MyCustomBalancer的代码细节 3.1 balanceCluster 方法的作用 3.2balanceCluster 对数据的影响 3.3监控HBase的性能指标 3.3.…...

企业网站建设中常用的英文翻译

下面好代码网在长期的网站建设业务中总结的&#xff0c;一些在企业网站建设中词语的常用翻译&#xff0c;可以让你的企业网站更具有专业性。如果你做中英文双语版本网站或者外贸网站的请收藏备用。 网站导航 site map 公司简介 PROFILE or COMPANY Profile or Company 综述 Gen…...

vscode运行Python的两种方法,及无法运行的原因

vscode运行Python代码 下面介绍的vscode运行Python代码的方法基于的一个前提条件是&#xff1a;当前的计算机已经安装好了Python&#xff0c;且已经配置好了相关的环境变量。如果要查看是否已经都安装好了&#xff0c;可以打开Windows系统的命令行工具Windows PowerShell&…...

【猫头虎分享】全面揭秘鸿蒙4.0:华为的技术革新与市场影响

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通Golang》…...

Java内存模型之可见性

文章目录 1.什么是可见性问题2.为什么会有可见性问题3.JMM的抽象&#xff1a;主内存和本地内存3.1 什么是主内存和本地内存3.2 主内存和本地内存的关系 4.Happens-Before原则4.1 什么是Happens-Before4.2 什么不是Happens-Before4.3 Happens-Before规则有哪些4.4 演示&#xff…...

【docker】Docker Compose 使用介绍

一、什么是Docker Compose Docker Compose是一个用于定义和运行多个Docker容器的工具。它允许您使用YAML文件来配置应用程序的服务、网络和卷等方面&#xff0c;并通过单个命令即可快速启动和停止整个应用程序的多个容器。 Docker Compose的主要作用如下&#xff1a; 管理多个…...

uniapp怎么开发插件并发布

今天耳机坏了,暂时内卷不了,所以想开发几个插件玩玩,也好久没写博客了,就拿这个来写了 首先,发布插件时需要你有项目 这里先拿uniapp创建一个项目, 如下,创建好的项目长这样 然后根据uniapp官网上说的,我们发布插件时,需要在uni_modules里面编写和发布 ps:还需要使用uniapp…...

为什么不直接public,多此一举用get、set,一文给你说明白

文章目录 1. 封装性&#xff08;Encapsulation&#xff09;2. 验证与逻辑处理3. 计算属性&#xff08;Computed Properties&#xff09;4. **跟踪变化&#xff08;Change Tracking&#xff09;5. 懒加载与延迟初始化&#xff08;Lazy Initialization&#xff09;6. 兼容性与未来…...

golang 记录一次协程和协程池的使用,利用ants协程池来处理定时器导致服务全部阻塞

前言 在实习的项目中有一个地方遇到了需要协程池的地方&#xff0c;在mt推荐下使用了ants库。因此在此篇记录一下自己学习使用此库的情况。 场景描述 此服务大致是一个kafka消息接收、发送相关。接收消息&#xff0c;根据参数设置定时器进行重发。 通过这里新建kafka服务&a…...

【Postman-windows-9.12.2版本安装与汉化】

Postman-windows-9.12.2版本安装与汉化 想用英文版本的可以直接点击如下链接下载最新版本 官网最新版本(无法汉化)&#xff1a;https://www.postman.com/downloads/ 如果想要汉化的就不能使用最新版本&#xff0c;因为最新版本没有汉化包可以用 汉化包和postman的版本必须是…...

11Spring IoC注解式开发(下)(负责注入的注解/全注解开发)

1负责注入的注解 负责注入的注解&#xff0c;常见的包括四个&#xff1a; ValueAutowiredQualifierResource 1.1 Value 当属性的类型是简单类型时&#xff0c;可以使用Value注解进行注入。Value注解可以出现在属性上、setter方法上、以及构造方法的形参上, 方便起见,一般直…...

Grafana Promtail 配置解析

由于目前项目一般都是部署在k8s上&#xff0c;因此这篇文章中的配置只摘录k8s相关的配置&#xff0c;仅供参考&#xff0c;其他的配置建议上官网查询。 运行时打印配置 -print-config-stderr 通过 ./promtail 直接运行Promtail时能够快速输出配置 -log-config-reverse-order 配…...

电脑DIY-主板参数

电脑主板参数 主板系列芯片组主板支持的CPU系列主板支持CPU的第几代主板的尺寸主板支持的内存主板是否支持专用WIFI模块插槽主板规格主板供电规格M.2插槽&#xff08;固态硬盘插槽&#xff09;规格USB接口规格质保方式 华硕TUF GAMING B650M-PLUS WIFI DDR5重炮手主板 华硕&…...

JVM知识总结(持续更新)

这里写目录标题 java内存区域程序计数器虚拟机栈本地方法栈堆方法区 java内存区域 Java 虚拟机在执行 Java 程序的过程中会把它管理的内存划分成若干个不同的数据区域&#xff1a; 程序计数器虚拟机栈本地方法栈堆方法区 程序计数器 记录下一条需要执行的虚拟机字节码指令…...

信息系统安全——基于 KALI 和 Metasploit 的渗透测试

实验 2 基于 KALI 和 Metasploit 的渗透测试 2.1 实验名称 《基于 KALI 和 Metasploit 的渗透测试》 2.2 实验目的 1 、熟悉渗透测试方法 2 、熟悉渗透测试工具 Kali 及 Metasploit 的使用 2.3 实验步骤及内容 1 、安装 Kali 系统 2 、选择 Kali 中 1-2 种攻击工具&#xff0c…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...