标签归档：微信小程序

在微信小程序中引入lucide图标库

一、步骤

1、把 lucide 项目下载到本地；

2、把这个项目 svg-path-outline-with-inkscape 下载到本地；

3、把 lucide 项目里面的 icons 文件夹下的 svg 图片复制到 svg-path-outline-with-inkscape 项目的 src 目录下；

4、给 svg-path-outline-with-inkscape 项目里面的 convert.sh 执行权限；

chmod +x convert.sh

5、执行 ./convert.sh 开始转换；

6、打开 iconfont.cn 创建项目；

7、上传 svg-path-outline-with-inkscape 项目里面的 out 下的 svg 图片到项目，等审核通过；

8、下载到本地，解压 download.zip；

9、更改 iconfont.css 拓展为 iconfont.wxss，复制到小程序项目中并引用；

10、创建小程序组件 components/icon

components/icon/icon.js

/**
 * Icon Component (iconfont)
 * Usage: <l-icon name="home" size="48" color="#059669" />
 */
Component({
    properties: {
        name: {
            type: String,
            value: ''
        },
        size: {
            type: Number,
            value: 48
        },
        color: {
            type: String,
            value: ''
        }
    }
})

components/icon/icon.json

{
  "component": true,
  "styleIsolation": "apply-shared"
}

components/icon/icon.wxml

<text wx:if="{{name}}" class="iconfont icon-{{name}}"
    style="font-size: {{size}}rpx;{{color ? ' color: ' + color + ';' : ''}}" />

components/icon/icon.wxss

/* Icon Component Styles */
.iconfont {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

11、配置为小程序全局组件

app.json

{
    "usingComponents": {
        "l-icon": "/components/icon/icon"
    },
    ......
}

12、业务页面引用

<l-icon name="log-in" size="44" />

二、Q&A

为什么要有 svg-path-outline-with-inkscape 这个项目？

lucide 下载的 svg 直接上传到 iconfont 无法正常使用，提示「上传失败，请尝试将所有图层进行轮廓化」，文件太多，sketch 无法处理，需要使用 Illustrator 一个个处理不现实（不知道有没有批量操作、软件需要付费、卒），于是乎就做让 AI 写了一个批量处理的工具。

[渲染层网络层错误] Failed to load image https://x.y.com/abcdefg.jpg the server responded with a status of 404 (HTTP/1.1 404)From server x.x.x.x

调试用微信开发者工具调试图片显示，控制台始终提示【图 1】的错误，但是浏览器可以正常访问【图 2】，最终是因为 ngnix 缓存问题，导致无法正常显示，实际图片确实是 404。

图 1

图 1

图 2

图 2

上面潜在有一个坑，因为项目是测试阶段为了方便就把 upload 目录上传到 git 仓库了。github workflow 在服务器上执行构建是会先把本地更改丢失，这就是上次发版和本次发版时间段内在服务器上上传的图片，在本次发版时会把图片给删除，在加上测试 ngnix 上给图片做了缓存，图片删除了还能访问。

这就是多个雷区叠加到只的问题，切记该怎么做就怎么做不要走捷径。

下面是排查定位问题的几个方向：

  1. 微信开发者工具：菜单栏-设置-代理设置
    • ☑️ 不使用任何代理，勾选后直连网络
    • 使用系统代理
    • 手动设置代理
  2. 微信开发者工具：编辑器-右上角【三】详情-
    • ☑️ 不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书
  3. Charles：Tools – Map Remote…
  4. Charles： macOS Proxy
  5. 图片缓存
    • 确认服务器 ngnix 是否为图片或目录设置了静态缓存，浏览器可访问，切换无痕模式再次访问试试。

微信小程序“MP3”无法播放的问题

发表评论

音频通道1

为小程序『我为学习狂』添加了26个英文字母读音之后，发现一个神奇的 bug ，在 MacBook 上开发可以正常播放，手机上调试就无法不放，手机上带上耳机也可以播放，发正式环境下也是无法播放。工作项目忙就一直没有解决。

今天就查看了一下mp3文件信息，发现无法正常播放的 MP3 的“音频通道”（音频通道：2）和可以正常播放的 MP3 不一样（音频通道：1），没做过音频处理，不晓得怎么改变 MP3 的音频通道。然后换了一个资源文件就可以播放了。

如果你也碰到类似 MP3 无法播放的问题，可以尝试看下自己的 MP3 资源文件的音频通道是否是“1”。

特此Mark一下。

<!– more –>

怎么播放 MP3

Page({
  data: {
    motto: '26个英文字母读音'
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.playAudio('https://m10.music.126.net/20180904013509/d01ab86edc3f28b25c2f02182ee74866/ymusic/69d2/0fd2/dda6/6035fc3521bce8f32548c4500000162e.mp3');
  },
  playAudio: function (src) {
    const innerAudioContext = wx.createInnerAudioContext()
    innerAudioContext.src = src;
    innerAudioContext.playbackRate = 0.5;
    innerAudioContext.play();
    innerAudioContext.onPlay(() => {
      console.log('开始播放')
    })
    innerAudioContext.onEnded(() => {
      console.log('播放结束')
      innerAudioContext.destroy;
    })
  }
})

TODO

如何改变 MP3 的音频通道？

wiki

wx.createInnerAudioContext()

我为学习狂

【转】微信小程序wx.showModal内容如何才能自定义换行

发表评论 
wx.showModal({
    title: '提示',
    content: '这是一个\r\n模态弹窗',
    success: function(res) {
        if (res.confirm) {
            console.log('用户点击确定')
        } else if (res.cancel) {
            console.log('用户点击取消')
        }
    }
 });

@疯狂的迈步：\r\n 可以换行的，在开发者工具上显示不换行，但是在真实环境下是正常换行的。

实测可行。

转自：https://segmentfault.com/q/1010000009619659