微信小程序开发记录

已于 2023-11-16 14:23:15 修改
阅读量134 收藏 1
点赞数
分类专栏： 问题记录 文章标签： 微信小程序 小程序
于 2023-10-11 10:42:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43223007/article/details/133762289
版权

微信小程序开发记录，做个笔记后面不踩坑

1、终端npm安装插件前需要使用 npm init生成包管理文件

且需要配置

//project.config.json
 "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ],

2、 微信小程序中方便使用的contUp数字滚动插件

使用示例
下例需求是8s更新数据，所以记录了老的值，这样每次更新会从老的值滚动到新的值

// <text style="font-size: 32rpx;margin-bottom: 10rpx;"> <text style="font-size: 62rpx;">{{today.payAmount}}</text> 万元</text>
// components/card-1/index.js
const {dcApi} = require('../../api/index.js');
const {formatNumber} = require('../../utils/util');
import WxCountUp from '../../plugins/wx-countup/WxCountUp';

Component({
  options: {
    addGlobalClass: true
  },
  data: {
    today: {
      payAmount: 0, //今日成交金额
      payMemberNum: 0, //今日支付人数
      totalMemberNum: 0, //总会员数
      old_payAmount:0,
      old_payMemberNum:0,
      old_totalMemberNum:0,

    },
    yesterday: {
      increaseMember: 0, //昨日新增人数
      payAmount: 0, //昨日成交金额
      payMember: 0, //昨日支付人数
      permeability: 0 //昨日会员渗透率
    }
  },
  lifetimes: {
    attached() {
      this.getToday();
      this.startInterval();
    },
    detached() {
      this.stopInterval();
    }
  },
  methods: {
    getToday() {
      dcApi.online_member().then((res) => {
        this.start('today.payAmount',res.data.payAmount,2, this.data.today.old_payAmount,'today.old_payAmount');
        this.start('today.payMemberNum',res.data.payMemberNum,0,this.data.today.old_payMemberNum,'today.old_payMemberNum');
        this.start('today.totalMemberNum', res.data.totalMemberNum,0, this.data.today.old_totalMemberNum ,'today.old_totalMemberNum');
      });
    },

    start(target, endVal, fixed, oldVal = 0,old_target) {
      let option = {
        startVal: oldVal,
        decimalPlaces: fixed,
        duration: 2
      };
      this.countUp = new WxCountUp(target, endVal, option, this);
      this.countUp.start(() => {
        this.setData({
          [old_target]: endVal
        });
      });
    },

    startInterval() {
      const that = this; // 缓存 this
      this.intervalId = setInterval(() => {
        that.getToday();
      }, 8000);
    },

    stopInterval() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    },
   
  }
});

3、微信小程序中的echatrs

  1. ec-canvas版本要和echarts版本对应
  2. 可以在echarts指定下载所需要的图标以减小体积
  3. 小程序的图表format返回无法识别<view>xxx</view>这种标签
  4. echatrs容器一定要指定宽高否则无法显示
  5. 真机调试需要域名白名单，真机调试1.0会有各种奇怪的bug，建议用2.0
  6. 抖音小程序头部自定义需要主体满足条件，微信小程序不需要（截至目前）
  7. 区分各种页面跳转方式（是否需要保存上一个页面），wx.reLaunch()删除所有页面跳转新页面，防止用户用手机自带返回返回到上一张页面
  8. 代码使用示例 (组件中的echatrs+定时更新数据)
import * as echarts from '../../ec-canvas/echarts';
const {dcApi} = require('../../api/index.js');
const {getColForCollection} = require('../../utils/util');

Component({
  data: {
    ec: {
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: true
    }
  },
  options: {
    addGlobalClass: true
  },
  lifetimes: {
    attached: function () {
      // 获取组件
      this.ecComponent = this.selectComponent('#mychart-fourth');
      this.init();
      this.startInterval();
    },
    detached() {
      this.stopInterval();
    }
  },
  methods: {
    init() {
      this.ecComponent.init((canvas, width, height, dpr) => {
        // 获取组件的 canvas、width、height 后的回调函数
        // 在这里初始化图表
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        this.setOption(chart);
        // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
        this.chart = chart;
        this.setData({
          isLoaded: true,
          isDisposed: false
        });
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return chart;
      });
    },
    setOption(chart) {
      dcApi.online_summary().then((res) => {
        const data = getColForCollection(
          res.data,
          ['brand', 'amt'],
          ['name', 'value']
        );
        let option = {...}
        this.ecComponent.chart.setOption(option)
      });
    },
    startInterval() {
      const that = this; // 缓存 this
      this.intervalId = setInterval(() => {
        that.setOption();
      }, 8000);
    },
    stopInterval() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    }
  }
});

4、微信小程序文本横向无缝滚动

背景：
微信小程序中列表宽度不够长，其中某字段显示不完整，因此要使其自动滚动。
（最初看网上很多用定时器实现，但他们的案例中都只是一个横幅、用定时器也无所谓。但是我的需求中是一个上下无限滚动的列表，如果设置定时器性能耗费太大，因此只用css实现）

样例图：
在这里插入图片描述

我这里是列表轮播 + 商品名称字段左右滚动
微信小程序轮播组件swiper有个坑：display-multiple-items设置的值如果大于列表长度，内容将无法显示

这里主要记录文本横向 无缝 滚动

先说思路：使用css动画让文本向左移动

@keyframes scrollText {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

此时有个问题，不是 无缝 的，文本将在右边出现大量空白，在移动到末尾，再突然出现 ，很难看
要处理这个问题：在文本后面添加一个占位文本、当右边本为空白时 显示占位文本，当一轮动画结束时，第一个文本再覆盖占位文本，视觉上就是无限的 无缝滚动 ，要让一轮动画结束完全覆盖占位文本 也很简单，设置一个向左padding值，

<view class="scroll-text-warp">
            <text class="scroll-text" style="{{item.scrollStyle}}"> {{item.goods}} </text>
            <text class="scroll-text" style="{{item.scrollStyle}}"> {{item.goods}} </text>
  </view>

.scroll-text {
  white-space: nowrap;
  display: inline-block;
  animation: scrollText 10s linear infinite;
  padding-left: 40rpx;
}

统一设置速率（文案长短不一 用同样的动画时长会出现滚动速率不同），

list.forEach((item) => {
        console.log('item',item)
        const textLength = item.goods.length;
        const animationDuration = textLength * 0.5 + 's';
        item.scrollStyle = `animation: scrollText ${animationDuration} linear infinite;`;
      });
      this.setData({list});

总代码：
wxml

<view class="fifth-warp card-bg" style="height: 500rpx;margin-top: 200rpx;">
  <view class="tab-header">
    <text class="header-item" style="width: 180rpx;">品牌</text>
    <text class="header-item" style="width: 200rpx;flex: 1;">商品名称</text>
    <text class="header-item" style="width: 180rpx;">排名</text>

  </view>

  <swiper vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items='{{list.length>5?5:list.length}}' style="height: 350rpx;">
    <block wx:for-index="idx" wx:for='{{list}}' wx:key="index">
      <swiper-item>
        <view class='swiper-content'>
          <text class='content-item' style="min-width: 180rpx;">{{item.brand}}</text>

          <view class="scroll-text-warp">
            <text class="scroll-text" style="{{item.scrollStyle}}"> {{item.goods}} </text>
            <text class="scroll-text" style="{{item.scrollStyle}}"> {{item.goods}} </text>
          </view>
          <text class='content-item' style="min-width: 180rpx;">TOP{{item.rank}}</text>

        </view>
      </swiper-item>
    </block>
  </swiper>
</view>

wxss

.tab-header {
  width: 100%;
  display: flex;
  text-align: center;
  align-items: center;
  color: #BDBDBD;
}

.header-item {
  font-size: 26rpx;
  padding: 20rpx 0 40rpx 0;
}

.swiper-content {
  display: flex;
}

.content-item {
  font-size: 24rpx;
  text-align: center;
}

.scroll-text-warp {
  width: 100%;
  overflow: hidden;
  font-size: 24rpx;
  display: flex;
}

.scroll-text {
  white-space: nowrap;
  display: inline-block;
  animation: scrollText 10s linear infinite;
  padding-left: 40rpx;
}

@keyframes scrollText {
  0% {
    transform: translateX(0%);
    /* 开始位置 */
  }

  100% {
    transform: translateX(-100%);
    /* 结束位置 */
  }
}

js

const {dcApi_ljq} = require('../../api/index.js');

Component({
  options: {
    addGlobalClass: true
  },
  lifetimes: {
    attached: function () {
      this.getList();
    }
  },
  data: {
    list: []
  },

  methods: {
    getList() {
      let list = [
        {brand: 'xxx1', goods: '开始滚动区域滚动区域滚动区域滚动区域滚动区域结束',rank:1},
        {brand: 'xxx2', goods: '开始滚动区域滚动区域滚动区域滚动区域滚动区域结束',rank:2},
        {brand: 'xxx3', goods: '开始滚动区域滚动区域滚动区域滚动区域滚动区域结束',rank:3},
        {brand: 'xxx4', goods: '开始滚动区域滚动区域滚动区域滚动区域滚动区域结束',rank:4},
        {brand: 'xxx5', goods: '开始滚动区域滚动区域滚动区域滚动区域滚动区域结束',rank:5},
        {brand: 'xxx6', goods: '开始滚动区域滚动区域滚动区域滚动区域滚动区域结束',rank:6},
      ];

      list.forEach((item) => {
        console.log('item',item)
        const textLength = item.goods.length;
        const animationDuration = textLength * 0.5 + 's';
        item.scrollStyle = `animation: scrollText ${animationDuration} linear infinite;`;
      });
      this.setData({list});
    }
  }
});
青松pine
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WxCountUp - 数字滚动（微信小程序插件）
weixin_34040079的博客
03-18 2354
github地址 wx-extend 欢迎star~~ 插件介绍 该插件是参照 CountUp.js 封装的，为小程序提供的数字滚动，以更有趣的方式显示数值数据。 参数说明 Params 参数 类型 描述 target String 滚动对象 endVal Number 滚动结束时的数字 options Object 配置 context Object 微信小程序当前...
微信小程序数字滚动插件使用详解
08-28
主要介绍了微信小程序数字滚动插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
数字滚动（微信小程序）
weixin_44481476的博客
11-10 1186
数字滚动（微信小程序） 微信小程序使用数字滚动的功能，引用了外部的包 WxCountUp.js 页面使用： countup.wxml <view class="page"> <view class="page__bd page__bd_spacing"> <view class="num-wrap"> <view>{{number}}</view> </view> </view> <
小程序 目录自定义构建
m0_73461567的博客
01-09 759
小程序 目录自定义构建
mp-countUp:小程序适用的数字 count up 库
05-28
mp-countUp 小程序适用的数字count库 受启发。 用法 import CountUp from '../lib/countUp.js' ; Page ( { data : { num : 0 , } , go ( ) { if ( ! this . numAnim ) { this . numAnim = new CountUp ( 0 , 1000 , 1 , this . upNum ) ; this . numAnim . start ( ( ) => { console . log ( 'done' ) ; } ) ; } else { this . numAnim . update ( + this . data . num + 1000 ) ; } }
微信小程序开发-记录宝宝喂奶案例源码.zip
08-15
微信小程序开发-记录宝宝喂奶案例源码.zip
微信小程序2048开发记录
03-29
前言距离微信小程序的兴起已经过去一段较长时间了，之前一直想尝试着写一个小demo玩玩，但是由于学校的各种事情以及准备面试的事情一直耽误。趁着公司放年假这段时间完成了对2048的 ...       前言 距离微信小...
微信小程序- 实现地图轨迹移动效果
10-27
微信小程序是一款能够开发出各种功能的便捷工具，其中内置的地图组件，为我们提供了强大的地图展示和交互的能力，为我们的开发节约了不少时间和精力。同时，利用微信小程序内置的定时器，我们也能够简单地实现经纬度...
微信小程序源码-医疗保健.zip
02-08
微信小程序源码-医疗保健（源码+截图），亲测可用。微信小程序源码-医疗保健（源码+截图），亲测可用。微信小程序源码-医疗保健（源码+截图），亲测可用。微信小程序源码-医疗保健（源码+截图），亲测可用。微信小...
微信小程序开发之入门实例教程篇
01-03
本文就以“我的第一个微信小程序”为例，简单的介绍下，微信小程序的入门级用法。 一、注册小程序账号 1、进入微信公众平台（https://mp.weixin.qq.com/），注册小程序账号，根据提示填写对应的信息即可。 2、注册...
微信小程序滚动数字
08-10
微信小程序--滚动数字
微信小程序scroll-view组件实现滚动动画
12-29
本文实例为大家分享了scroll-view组件实现索引列表滚动动画效果，供大家参考，具体内容如下 效果图 实现原理 利用scroll-view的scroll-into-view属性进行定位； 利用scroll-view的scroll-with-animation属性实现滚动动画过度。 WXML <view bindtap=getCurrentCode class={{chooseIndex == index ? '.city-list-active' : ''}} wx:for={{cityList}} style=he
微信小程序数字滚动小插件
chuti6853的博客
06-12 488
用es6语法方式写了个微信小程序小插件–数字滚动； 效果图： wxml页面布局代码： <!--pages/main/index.wxml--><viewclass="anima...
CountUp.js用法 让数字动起来的插件
weixin_34100227的博客
07-21 1318
CountUp.js 无依赖的、轻量级的 JavaScript 类，可以用来快速创建以一种更有趣的动画方式显示数值数据。尽管它的名字叫 countUp，但其实可以在两个方向进行变化，这是根据你传递的 startVal 和 endVal 参数判断的。 再加上滚轮事件判断……   可配置的参数：target = 目标元素的 ID；startVal = 开始值；endVal = 结束值；decima...
公告滚动显示插件
weixin_33928137的博客
11-13 153
公告滚动显示插件(jQuery插件编写) 插件代码： /** * 2014年11月13日 * 公告滚动显示插件 */ (function ($) { $.fn.scrollNews = function (width) { if (this.find("li").length == 0) return; var ulWidt...
简单实用的一款数字滚动插件countUP
yezip的博客
10-14 522
最近做网页需求是让数字滚动，在网上找到了一款非常简单的插件countUP，简单实用、废话不说直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> &...
CountUp.js – 让数字以非常有趣的动画方式显示
weixin_34384915的博客
07-05 897
插件说明jquery.countup.js是一款轻量级jquery数字动画插件。该数字动画插件可以在页面滚动时，将指定的数字从0开始计数增加动画。 该数字动画插件可以控制动画的延迟时间和动画过渡时间。它依赖于Waypoints插件来监听滚动事件。 安装 可以通过npm或bower来安装jquery.countup.js插件。 12npm ...
数字滚动抽奖小程序
weixin_39833509的博客
03-20 9374
**# coding:utf-8** import tkinter import time import threading import random class Choujiang: #初始化魔术方法 def __init__(self): #准备好界面 self.root = tkinter.Tk() self.root.title('...
微信小程序-API 本地存储
最新发布
weixin_42284031的博客
06-17 275
存储 ： wx.setStorageSync获取：wx.getStorageSync删除：wx.removeStorageSync清空：wx.clearStorageSync。
开发微信小程序打卡记录
07-27
开发微信小程序的打卡记录功能可以按照以下步骤进行： 1. 首先，你需要设计小程序的用户登录授权规范。根据微信官方的要求，用户在未授权之前应该能够大概了解小程序的功能。因此，在用户进入小程序时，你可以展示一些功能的预览，但在使用这些功能之前，需要用户进行授权。这样可以避免审核不通过的问题。\[2\] 2. 接下来，你需要设计打卡记录的界面和功能。用户可以在小程序中进行打卡操作，并记录相关的信息，如打卡时间、地点等。你可以使用小程序提供的数据存储功能，将打卡记录保存在后台服务器或云数据库中。 3. 如果你的打卡记录功能涉及到上传图片，你可以使用循环上传的方法来实现批量上传图片。在选择图片时，将图片存储在一个数组中，然后循环这个数组，使用小程序提供的上传文件接口将图片上传到服务器。\[3\] 4. 在上传图片时，你可以考虑使用微信官方提供的图片内容安全检测接口，对上传的图片进行法规检验，以防止包含违规、涉黄等信息。这样可以增加审核通过的几率。\[1\] 5. 最后，完成开发后，你需要将小程序的代码上传并提交给微信官方进行审核。等待审核通过后，你的小程序就可以正式上线，用户可以使用打卡记录功能了。 总结起来，开发微信小程序的打卡记录功能需要设计用户登录授权规范，实现打卡记录的界面和功能，处理批量上传图片的难点，并在上传图片时进行内容安全检测。完成开发后，将代码上传并提交审核，等待审核通过后即可上线使用。 #### 引用[.reference_title] - *1* *2* *3* [微信小程之打卡小程序开发](https://blog.csdn.net/zyf_smile/article/details/106671111)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值