引用外部css 微信小程序_微信小程序开发常用事例（六）

最新推荐文章于 2023-05-18 15:12:37 发布

PraiseSunMan

最新推荐文章于 2023-05-18 15:12:37 发布

阅读量127

点赞数

文章标签：引用外部css 微信小程序

本文链接：https://blog.csdn.net/weixin_29706315/article/details/112522829

版权

第

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 的方式实现静态代码编写：

class=  class=  class=    class=      class=      class=      class=      class=      class=        class=      class=      class=      class=      class=      class=        class=      class=      class=      class=      class=      class=

随后我们开始编写对应的 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 即可。这里拷贝关键代码作为引子：

  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 为最大内容宽度即可；

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

class=  class=      class=      for=        class=          style="background-color:{{ idx == yachtSailingTime.length - 1 ? 'lightgray' : '' }}"          wx:for="{{ item }}" wx:for-item="regionalNum" wx:key="regionalNum">          {{ regionalNum }}

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

.max_width {  width: max-content;}

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

效果如下：

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

关键的重点在于：

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

这里附上关键代码：

class=      class=      class=        class=        class=        class=        class=        class=            for=        class=        class=          class=            wx:key="regionalNum">            {{ regionalNum }}

以及对应的关键 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 代码部分：

"{{ isImageShow }}" canvas-id=class=

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

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 并替换即可实现无缝升级，?

"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,        }      }    });  })

参考资料