微信小程序小型项目案例

这篇具有很好参考价值的文章主要介绍了微信小程序小型项目案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序多次请求数据重复的解决方案

今天我来讲一下一组数据如果对其进行了更改但是页面不跟着进行同步渲染怎么办

一、首先我们肯定要知道我要讲的效果是什么

其实呢就是一个新闻列表,然后上面渲染的有图片,有文章标题文章内容,还有文章发布时间,还有一个是否收藏按钮,一种比较常见的形式。

让我们先看一下要实现的效果

微信小程序小型项目案例

下面看完效果图之后我们来进行代码的实践

既然我们知道要写的效果UI图是什么了
那么我们就可以来写这个效果了

二、第一步静态页面的渲染

1. 既然是静态页面的渲染肯定要先像后端请求数据

我们需要将这个接口封装成一个事件方便后面使用的调用

再简单查看一下这个页面里面data都用什么数据

微信小程序小型项目案例

案例接口信息以及如何将这个信息封装起来如下图所示
微信小程序小型项目案例
我们要在这个小程序文件夹下的 js 文件中书写要写的代码
代码块如下:

 // 在index.js文件下
 // 封装好这个接口方便后面重复使用的调用
  getList(){
    wx.request({
      url: 'http://localhost:8989/getData?p='+this.data.page,
      success:({data})=>{
        
        // 这里声明一个新的空数组用来接收请求到的数据
        // 方便对数组进行修改
        // 不然对data内的数据进行修改需要使用this.setData显得比较麻烦
        let arr=[];
        arr= this.data.list.concat(data.data);

        // 使用this.setData将修改好的数据赋值给data中要渲染的地方
        this.setData({
          list: arr
        })
      }
    })
  },

写好这个请求接口之后直接让页面初次加载onLoad函数调用该事件即可
具体写法入下

微信小程序小型项目案例
这样一个请求数据就完了然后我们的数据也已经拿到了

差的就是一个渲染

2. 页面渲染就需要HTML结合JS数据一起使用了

我相信HTML的具体渲染应该没有什么好讲的

首先肯定是打开文件夹下的这个wxml文件

微信小程序小型项目案例
在这个页面进行渲染数据即可

当然微信小程序原生HTML语法方式还有有区别
具体代码如下:

<!-- 使用wx:for进行绑定数据循环  以及wx:key绑定key值防止出现混乱 -->
<!-- 这里的View标签类似与原生HTML的div标签 -->
<view wx:for="{{list}}" wx:key="key" class="content_">
    <view class="left_">
      <!-- 渲染图片 -->
      <!-- 这里itme是微信小程序自己编写的item默认值也可以wx:for-item修改使用名字的值 -->
      <!-- image标签类似于之前的img标签 但是image是一个双标签 而img是一个单标签 -->
      <image class="left_image" data-id="{{item.id}}" catchtap="goDetail" src="{{item.imgUrl}}"></image>
    </view>
    <view class="right_">
      <!-- 渲染标题 -->
      <!-- 这里的text类似于原生HTML的span表签 text标签内部不能包含其他标签 -->
      <text class="right_title">{{item.title}}</text>
      <!-- 渲染标题 -->
      <text class="right_content">{{item.content}}</text>
      <view class="right_collect">
        <!-- 未收藏 -->
        <!-- 这里用if判断根据请求到的数据进行判断 -->
       	<!-- 如果数据为false则显示未收藏 -->
        <image  data-id='{{item.id}}' data-num="0" catchtap="setCollect" wx:if="{{!item.collect}}" src="/Font/收藏.png"></image>
        
        <!-- 已经收藏 -->
        <!-- 如果数据为true则显示收藏 -->
        <image  data-id='{{item.id}}' data-num="1" catchtap="setCollect" wx:if="{{item.collect}}" src="/Font/收藏_active.png"></image>
      </view>
    </view>
</view>

上面是具体页面渲染的代码块

3. 小程序的语法跟原生HTML语法有什么不同

因为这个是小程序的语法所以跟原生HTML的语法不同

我们简单做个表格比较一下

WXML语法 HTML语法
view 标签 div 标签
text 标签 span 标签
image 标签 img 标签
check、input、radio 标签 input type(check、text、radio) 标签
picker range=“{{area}}” 标签 select > option 标签
navigator 标签 a 标签
icon 标签 i 标签

上面的表格就是一些基础标签的对比

可以看到WXML的语法还是很生疏的

这就是对小程序语法的一个简介的描述

三、第二步就需要来做这个收藏与未收藏的效果

既然都要写收藏与未收藏渲染
那么我们应该知道收藏与未收藏依据是什么呢
这个时候我们可以查看一下接口返回数据中有没有这个依据

1. 收藏的依据查看

我们可以使用 console.log() 在控制台输出查看请求到的数据
小程序界面的左上角调试器按钮
点击之后可以进入控制台查看数据

微信小程序小型项目案例

上面控制台中显示的请求到的数据也可以看到有个collect属性
并且它的值还是flase布尔值
然后也可以到后端看一看就可以知道这个collect或者别的接口别的属性名它属于是一个收藏依据
当然它不一定是一个布尔值,也有可能是1或者任何数据来表示
这个问题主要还是带看后端的写法
然后下面的数据渲染就可以用这个数据来判断是否收藏

<view class="right_collect">
   <!-- 未收藏 -->
   <!-- 这里用if判断根据请求到的数据进行判断 -->
   <!-- 如果数据为true则显示收藏 -->
   <image  data-id='{{item.id}}' data-num="0" catchtap="setCollect" wx:if="{{!item.collect}}" src="/Font/收藏.png"></image>
    <!-- 已经收藏 -->
    <!-- 如果数据为false则显示未收藏 -->
    <image  data-id='{{item.id}}' data-num="1" catchtap="setCollect" wx:if="{{item.collect}}" src="/Font/收藏_active.png"></image>
</view>

2. 通过收藏应该触发什么事件

微信小程序小型项目案例
上图中用catchcap调用事件并且使用data-iddata-num传了两个参数

因为两行代码调用的同一个事件所以需要用用来分辨一下所以用了一个传了一个num如果是0则代表收藏如果是1就代表取消收藏

既然参数都传了我们肯定需要在JS事件内接收一下
当然微信小程序事件参数接收跟之前也是大不相同的
下面让我们看一下是如何接收参数的


  // 点击事件
 setCollect(e){
   // 当前点击数据的标识id
   let id=e.currentTarget.dataset.id
   // 当前点击数据判断是要调用收藏还是要取消收藏的
   let num=e.currentTarget.dataset.num
   // console.log(id)
   if(num==0){
     // 调用收藏接口
     this.setClect(id)
   }else{
     // 调用取消收藏接口
     this.setClects(id)
   }
   // console.log(this.data.list);
   // 再次调用接口来更改当前数据
   // 否则数据不会同步更新
   this.gitList();
 }

上面JS代码块可以看到在微信小程序接收参数使用的是默认参数e下面的currentTarget下面的dataset中取到传递的id和num

后面重新调用来更改当前数据否则数据不会同步更新

这些就是普通的JS与WXML的基本交互

然后在来看看普通的JS与WXML交互之后触发的效果

调用收藏接口以及取消收藏接口

(1). 收藏接口

下面看看收藏接口是怎么写的

// 收藏
setClect(id){
   wx.request({
     // 根据指定数据标识进行收藏
     url: 'http://localhost:8989/collect?id='+id,
     success:(res)=>{
       // 因为这里只是对后端的数据进行了改变
       // 要想本地的数据也改变则需要自己手动更改一下
       this.data.list.forEach((item)=>{
       //判断查找到当前的数据
         if(item.id==id){
           item['collect']=true;
         }
       })
     }
   })
 }

因为这里只是对后端的数据进行了改变
要想本地的数据也改变则需要自己手动更改一下

(2). 取消收藏接口

下面看看收藏接口是怎么写的

// 取消收藏
setClects(id){
   wx.request({
     // 根据指定数据标识进行收藏
     url: 'http://localhost:8989/cancelCollect?id='+id,
     success:(res)=>{
       // 因为这里只是对后端的数据进行了改变
       // 要想本地的数据也改变则需要自己手动更改一下
       this.data.list.forEach((item)=>{
       //判断查找到当前的数据
         if(item.id==id){
           item['collect']=false;
         }
       })
     }
   })
 }

同样这里只是对后端的数据进行了改变
要想本地的数据也改变则需要自己手动更改一下

但是这里基本上就全部完成了但是还有一些BUG

四、总结

就比如说由于我们多次调用那个请求数据接口会出现数据重复出现

首先原因是因为我们用的 concat数组拼接方法 就会把每一次请求到的数据进行拼接到一块,像这个时候我们就需要写一个数组去重方法来将这些重复的数据去重掉

具体的写法如下

// 封装好这个接口方便后面重复使用的调用
 getList(){
   wx.request({
     url: 'http://localhost:8989/getData?p='+this.data.page,
     success:({data})=>{
       
       // 这里声明一个新的空数组用来接收请求到的数据
       // 方便对数组进行修改
       // 不然对data内的数据进行修改需要使用this.setData显得比较麻烦
       let arr=[];
       arr= this.data.list.concat(data.data);
       // 去重
       let obj = {}
       arr = arr.reduce((preVal,curVal) => {
         obj[curVal.id] ? "" : obj[curVal.id] = preVal.push(curVal)
           return preVal
         },[])
       console.log(arr)
       // 使用this.setData将修改好的数据赋值给data中要渲染的地方
       this.setData({
         list: arr
       })
     }
   })
 }

有了这个去重之后就不用害怕页面数据渲染不同步了

为了让页面同步所以需要重复调用接口数据

这就是简单的一个小程序还有一些BUG处理

讲完了,下课

其他文章:点击跳转文章来源地址https://www.toymoban.com/news/detail-480523.html

到了这里,关于微信小程序小型项目案例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 案例103:基于微信小程序的移动网赚项目设计与实现

    文末获取源码 开发语言:Java 框架:springboot JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序运行软件:微信开发者 目录 前言 系统展示 用户功能模块的实现 用户注册登录界面 首页界面 任务界

    2024年01月22日
    浏览(41)
  • 微信小程序 canvas画布clip()在ios端多次裁剪无效

    最近在使用canvas绘制用户电子名片时,由于第一次使用不够熟悉,在绘制名片时根据顺序需要先裁剪出名片的形状及边角圆; 然后再在卡片区域中绘制头像,由于头像需要裁剪一个斜角线,于是需要使用到clip()进行二次裁剪,裁剪后在安卓手机显示一切正常,但在ios端测试时

    2024年02月13日
    浏览(42)
  • 基于Springboot+Mybatis+微信小程序实现小型运动管理平台

    此文主要功能包括:运动健康平台登录注册、了解健康知识、查看管理运动的文章与详情、每日登录打卡、系统通知、留言管理、提交运动功能。使用Java作为后端语言进行支持,界面友好,开发简单。 2.1、下载安装IntelliJ IDEA(后端语言开发工具),Mysql数据库,微信Web开发者工

    2024年02月02日
    浏览(49)
  • 微信小程序组件scroll-view滚动到底部多次触发加载如何解决?

    在 iOS 真机上,scroll-view 滚动时会多次触发 scrolltolower 事件的问题,可以设置一个“加载标识”(如 DisableTrigger)来避免重复请求下一页数据。具体做法为: 在 data 中新增一个 DisableTrigger 变量,用于标识当前是否可以执行下一页数据的加载操作。 在 init()方法中,在请求数据

    2024年02月13日
    浏览(61)
  • uniapp小程序开发|基于微信小程序实现小型比赛自动编排系统

    作者主页:编程指南针 作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库

    2024年02月11日
    浏览(49)
  • 基于微信小程序的中小型企业员工电子档案借阅管理系统

    考虑到实际生活中在中小型企业电子档案管理方面的需要以及对该系统认真的分析,将小程序权限按管理员和用户这两类涉及用户划分。 (a) 管理员;管理员使用本系统涉到的功能主要有首页、个人中心、员工管理、档案员管理、档案管理员管理、部门信息管理、公告信息管理

    2024年02月03日
    浏览(62)
  • 基于微信小程序小型论坛交流系统 (后台java+Springboot框架)答辩常规问题和如何回答(答辩指导)

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年03月22日
    浏览(50)
  • 【微信小程序】Java实现微信支付(小程序支付JSAPI-V3)java-sdk工具包(包含支付出现的多次回调的问题解析,接口幂等性)

          对于一个没有写过支付的小白,打开微信支付官方文档时彻底懵逼 ,因为 微信支付文档太过详细, 导致我无从下手,所以写此文章,帮助第一次写支付的小伙伴梳理一下。 一、流程分为三个接口:(这是前言,先看一遍,保持印象,方便理解代码) 1、第一个接口:

    2024年01月16日
    浏览(77)
  • 微信小程序调查问卷案例

           通过开发一个“调查问卷”的案例来掌握常用表单组件的使用,以及如何收集用户填写的表单信息提交给服务器和从服务器获取数据后显示在表单中。参考界面如图1所示。 步骤1 :新建一个微信小程序项目 步骤2 :在小程序项目的pages/index/index.json文件中设置导航栏

    2023年04月25日
    浏览(75)
  • 微信小程序 《新闻列表》 案例

    今天带着练习一个小程序的基础练习 《新闻列表》 内容如图: 如要求: 1.主页头部的轮播图 2.中间内容上的信息案列排版。 3.上拉加载内容。 4.在信息加载完成后,给用户提示 我们看一下这个关于轮播图的相关文档。 文档地址:https://developers.weixin.qq.com/miniprogram/dev/compon

    2024年02月08日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包