专栏首页HLQ_Struggle「微信小程序」开发常用事例(六)

「微信小程序」开发常用事例(六)

110

次推文

最近依然停留小程序的开发之中,原想着很快能完事儿,交工,不料真是计划赶不上变化。

将自己经历的一些问题记录在案,方便后续类似相同需求直接使用“CV 大法”,节省部分开发成本。当然,如果此文某一条正好对屏幕前的你有所帮助,点个小赞赞,我会贼老开心的~欢迎大家提供更好的解决方案,我比较是搞 Android 的,这方面还真不熟练。

1. 如何消除小程序云函数的警告信息?

解决方式:

项目根目录下新建 miniprogram 目录(名称随意),随后将除了 project.config.json 和云函数自身之外的所谓文件/文件夹全部放到 miniprogram 目录中;

随后在 project.config.json 中配置 miniprogramRoot 目录,部分代码如下所示:

{
  "miniprogramRoot": "miniprogram/", // 与刚刚创建的目录名称一一对应即可
}

随后执行编译即可,有可能需要重新打开微信开发者平台。

2. 微信小程序如何绘制简单基础表格?

比较尴尬的是,微信小程序一直没有提供类似 H5 中 table 标签,所以我们直接通过 flex table 属性间接实现表格效果。

下面着手实现如下简单表格,这里为了方便,我直接写死了。

回顾在 H5 中的 table、tr、td,这里先按照 H5 的方式实现静态代码编写:

<view class="table_content">
  <text class="table_name">季度汇总表</text>
  <view class="table">
    <view class="tr">
      <view class="td">日期</view>
      <view class="td">第一季度</view>
      <view class="td">第二季度</view>
      <view class="td">第三季度</view>
      <view class="td">第四季度</view>
    </view>
    <view class="tr">
      <view class="td">2020-12-12</view>
      <view class="td">111</view>
      <view class="td">222</view>
      <view class="td">333</view>
      <view class="td">444</view>
    </view>
    <view class="tr">
      <view class="td">总计</view>
      <view class="td">111</view>
      <view class="td">222</view>
      <view class="td">333</view>
      <view class="td">444</view>
    </view>
  </view>
</view>

随后我们开始编写对应的 CSS:

.table {
  display: table;
  width: 100%; 
  box-sizing: border-box;
  align-self: center;
}

.tr {
  display: table-row;
}

.td {
  display: table-cell;
  border: 1rpx solid gray;
  font-size: 28rpx;
  padding: 6rpx;
  text-align: center;
  vertical-align: middle;
}

而关于如何设置表头以及表尾加粗居中等样式只需要在遍历对应的 Array 时,获取当前 index 并设置对应 class/style 即可。这里拷贝关键代码作为引子:

<view 
  class="td  {{ idx == 0 ? 'font_weight' : '' }} {{ index == 0 ? 'min_width_170' : '' }}"
  style="background-color:{{ idx == yachtSailingTime.length - 1 ? 'lightgray' : '' }}"
  wx:for="{{ item }}" wx:for-item="regionalNum" wx:key="regionalNum">
  {{ regionalNum }}
</view>

3. 微信小程序如何实现水平滑动表格?

很多时候,当我们展示的 cel 较多,或者 cell 名儿较长时,一行肯定就不满足,那么如何实现水平滑动呢?先来看个效果:

其实需要改动的地方有两点:

  • 外部采用 scroll-view 包裹;
  • 设置 col width 为最大内容宽度即可;

现附上对应静态网页代码:

<view class="table_content" wx:if="{{ yachtSailingTime.length > 1 }}">
  <text class="table_name">游艇会出海艘次</text>
  <scroll-view scroll-x scroll-with-animation>
    <view class="table max_width">
      <view wx:for="{{ yachtSailingTime }}" wx:for-index="idx" wx:key="yachtSailingTime" class="tr">
        <view class="td  {{ idx == 0 ? 'font_weight' : '' }} {{ index == 0 ? 'min_width_170' : '' }}"
          style="background-color:{{ idx == yachtSailingTime.length - 1 ? 'lightgray' : '' }}"
          wx:for="{{ item }}" wx:for-item="regionalNum" wx:key="regionalNum">
          {{ regionalNum }}
        </view>
      </view>
    </view>
  </scroll-view>
</view>

而对应部分关键 CSS 样式如下:

.max_width {
  width: max-content;
}

4. 微信小程序如何实现跨行表格?

效果如下:

当初这块看的着实让我很蒙圈,这里先把完成后的页面结果关键部分截个图,大家一起来观察下:

关键的重点在于:

时间整体为一行,呈现的效果也就是跨行。其实是因为后续的 col 包含多个 col 则将此行撑大,间接实现跨行操作。

这里附上关键代码:

<view class="table_content" wx:if="{{ showMonthData}}">
  <scroll-view scroll-x scroll-with-animation>
    <view class="table max_width">
      <view class="tr">
        <view class="td font_weight">日期</view>
        <view class="td font_weight">俱乐部</view>
        <view class="td font_weight">本期数据</view>
        <view class="td font_weight">去年同期</view>
        <view class="td font_weight">同比增长</view>
      </view>
      <view wx:for="{{ monthData }}" wx:for-index="key" wx:for-item="value" class="tr">
        <view class="td_span">{{key}}</view>
        <view class="td_span" wx:for="{{ value }}" wx:for-item="item">
          <view class="td__span" wx:for="{{ item }}" wx:for-item="regionalNum" wx:for-index="idx"
            wx:key="regionalNum">
            {{ regionalNum }} </view>
        </view>
      </view>
    </view>
  </scroll-view>
</view>

以及对应的关键 CSS 代码:

.td_span {
  display: table-cell;
  border: 1rpx solid gray;
  font-size: 28rpx;
  text-align: center;
  vertical-align: middle;
}

.td__span {
  border-bottom: 1rpx solid #333;
  padding: 6rpx;
}

5. 原生 canvas 层级过高导致 uCharts 图片重叠怎么处理?

先看下效果:

这块功能主要是报表的一个筛选,用户可以按照日期或者月份进行筛选并查看相关报表以及图标。当首次查询完成之后再次点击选择日期,则会出现上面覆盖的情况。

原因很简单,微信原生 canvas 层级最高,而我们的 uCharts 无法覆盖。对此处理方案目前尝试有三种:

  • 方案一:点击弹框弹起/消失时设置图标对应的 position,使其真实位置离开遮罩弹框层下。缺陷是需要对每个遮罩层弹起以及消失做对应的处理,当然也可以直接抽取一个共有方法,直接引用,但是相对成本比较好,后期维护成本较大。当然,如果业务简单,仅仅只有少数遮罩弹框层的小伙伴忽略。毕竟也算是最为粗暴之解。
  • 方案二:图表加载完成后,默认转为图片,并获取其临时加载地址,并通过标志符去控制默认显示图表,遮罩弹起替换为图片。同理消失后替换为图表。缺点,需要处理两者直接替换,或者增加对应的动画处理,否则效果上会有很突兀的感觉。相对成本较低。
  • 方案三:更新 uCharts 版本,使用 2d 模式即可。优势则是无需处理方案一二那些繁琐的逻辑。

这里由于时间关系,不在录制对应的效果。解决方式讲清楚了,相信各位小伙伴分分钟就可以解决了,稍后也会附上对应的关键代码。

5.1 方案二:替换图片法

首先编写 html 代码部分:

<canvas hidden="{{ isImageShow }}" canvas-id="regionalSailingTimeHistogram" id="regionalSailingTimeHistogram" class="charts"/>
<image class="charts" hidden="{{ !isImageShow }}" src="{{ imageSrc }}"/> 

在图表渲染完成后,将图表转为临时图片,并拿到临时加载地址:

wx.canvasToTempFilePath({
  canvasId: 'regionalSailingTimeHistogram',
  success: (res) => {
    let tempFilePath = res.tempFilePath;
    that.setData({
      imageSrc: tempFilePath
    });
    console.log('---> canvasToTempFilePath', tempFilePath);
  }
}, that);

在对应遮罩层打开将 image 状态符设置为 true,同理关闭时设置为 false:

openCalendar() {
  console.log('----> openCalendar');
  let that = this;
  that.setData({
    isImageShow: true
  });
},

closedCalendar() {
  console.log('----> closedCalendar');
  let that = this;
  that.setData({
    isImageShow: false
  });
},

如果业务遮罩弹框较多时,建议直接抽取方法,根据不同 type 统一处理即可。

5.2 方案三:升级 uCharts 版本并使用 2d 版本

直接找到最新版本,复制对应的 uCharts 并替换即可实现无缝升级,?

<canvas type="2d" canvas-id="canvasLineB" id="canvasLineB" class="charts"/>

对应 css 文件如下:

.charts {
  width: 100%;
  height: 500rpx;
  background-color: #FFFFFF;
  margin: 30rpx 0;
}

关键 js 代码如下:

const query = wx.createSelectorQuery()
query.select('#canvasLineB')
  .fields({ node: true, size: true })
  .exec((res) => {
    const canvas = res[0].node
    const ctx = canvas.getContext('2d') 
    regionalTripsSeaHistogram = new uCharts({
      //这俩参数是新增加的,开启2d并传入ctx
      canvas2d: true,
      context: ctx,
      canvasId: canvasId,
      type: 'column',
      legend: true,
      fontSize: 11,
      background: '#FFFFFF',
      pixelRatio: 1,
      animation: true,
      categories: chartData.categories,
      series: chartData.series,
      enableScroll: true,
      xAxis: {
        disableGrid: true,
        itemCount: 5,
        scrollShow: true,
      },
      dataLabel: false,
      width: this.cWidth,
      height: this.cHeight,
      extra: {
        column: {
          type: 'stack',
          width: this.cWidth * 0.45 / 5,
        }
      }
    });
  })

参考资料

  • 小程序提示组织目录结构的处理方法
  • uCharts

本文分享自微信公众号 - 贺利权(hlq_struggle),作者:贺利权

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-01-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序 Notes|开发常用事例(三)

    而今再次负责小程序,时隔许久,真是一片懵逼,多亏了之前的简短记录,这里将会不断记录完善开发过程中遇到的一系列的小问题。

    HLQ_Struggle
  • 微信小程序开发常见问题(六)

    知晓程序员,专注微信小程序开发的程序员! 一、登录实现 小程序登录的实现,官方建议自己保存用户登录状态,不要频繁调用wx.login,否则会限制登录。 这里连...

    连胜
  • 微信小程序常见事例 Note(One)

    LZ-Says:不走,总会被逼着走。想要拥有 Change 的权利,背后需要付出更多_____

    HLQ_Struggle
  • 微信小程序开发系列六:微信框架API的调用

    通过前面五个章节的介绍,大家对微信小程序的视图和控制器,微信调试器,以及如何在微信控制器里编写JavaScript函数来响应微信小程序的用户事件已经有了一个最基...

    Jerry Wang
  • 微信小程序开发系列六:微信框架API的调用

    通过前面五个章节的介绍,大家对微信小程序的视图和控制器,微信调试器,以及如何在微信控制器里编写JavaScript函数来响应微信小程序的用户事件已经有了一个最基...

    Jerry Wang
  • 微信小程序开发-常见问题

    知晓程序员,专注微信小程序开发的程序员! 好久没写文章,今天总结一下小程序开发过程中遇到的问题,有不对的地方,欢迎各位指正~ 1、域名必须是HTTPS2、inp...

    企鹅号小编
  • 微信小程序开发-常见问题

    知晓程序员,专注微信小程序开发的程序员! 好久没写文章,今天总结一下小程序开发过程中遇到的问题,有不对的地方,欢迎各位指正~ 1、域名必须是HTTPS 非HT...

    连胜
  • 微信开发--微信小程序(二)

    相信大家都使用过微信小程序,那一定都知道微信小程序下拉刷新吧,其实下拉刷新是微信小程序自带的功能,只不过没有背景图看不出来而已,好坑诶.

    生南星
  • 微信开发--微信小程序(一)

    微信小程序开发相对于微信公众号的开发显得更为重要,下面就来简单介绍一下微信小程序的开发.

    生南星
  • 微信开发--微信小程序(三)

    将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。数据存储生命周期跟小程序本身一致,即除用户主动删除或超过一定时间被自动清理,否则...

    生南星
  • 微信开发--微信小程序(四)

    1.小程序向后台请求接口必须使用https,包括web-view里的网页,如果项目中有用到web socket,那么也必须使用wss协议。https证书一般会用...

    生南星
  • 微信小程序发送模版消息(事例)

    honey缘木鱼
  • 微信小程序开发工具 微信小程序平台开发小程序公司

    小程序倡导更加便捷的生活服务理念,无需下载,唾手可得,即用即走,未来,普通人的生活里,小程序将无处不在。

    微信小程序开发加盟服务商
  • 微信小程序开发常见问题(五)

    知晓程序员,专注微信小程序开发的程序员! 一、微信小程序审核未通过,怎么办? 小程序审核不通过的原因很多,微信会给出相应审核不通过 的原因。今天连胜老师给大家...

    连胜
  • 微信小程序开发常见问题(四)

    知晓程序员,专注微信小程序开发的程序员! 一、小程序不同页面之间的传值方式 a、URL传值 这种方式最常用,比如: wx.navigateTo({ url...

    连胜
  • 微信小程序开发常见问题(二)

    知晓程序员,专注微信小程序开发的程序员! 今天再给大家分享几个微信小程序开发的常见问题,顺便吐槽一下,武汉的冬天太TM冷了,没有暖气的冬天真的很难过,写文章的心...

    连胜
  • 微信小程序开发常见问题(七)

    知晓程序员,专注微信小程序开发的程序员! 一、判断小程序版本号 小程序的API是不断更新的,你可能使用某个API时,文档里会说明,此API在1.x.x版本开始...

    连胜
  • 微信小程序开发教程第六章:「我」的页面开发

    微信小程序「我」的页面效果图与需求: ? 用户有多张名片,需要左右切换查看,往下切换是菜单按钮。 这里需求两处滑动,用到了微信提供给我们的滑动组件 s...

    ytkah
  • 微信小程序二维码实例开发

    开始 小编初学微信小程序,想做一个二维码生成器;作为一个小白,踩了不少坑,在这里分享给大家“如何在微信小程序上生成二维码”。 步骤 就像写前端代码一样,html...

    benny

扫码关注云+社区

领取腾讯云代金券