1. 首页
  2. 标签
  3. 小程序
【小程序开发】uniapp引入iconfont图标及使用方式
System
2024-08-08
所有,小程序

在uniapp中引入iconfont图标，你需要进行以下几个步骤：

  1. 在iconfont官网搜索你需要的图标，添加到项目，生成font-class。
  2. 下载生成的字体文件到本地。
  3. 将字体文件和demo_index.html放到uniapp项目的静态资源目录，如static。
  4. 在App.vue或者需要使用图标的页面中引入字体文件。
  5. 使用类名前缀加上iconfont类以及对应的图标font-class名称来使用图标。

示例代码：




<!-- App.vue 或 页面的 <style> -->
<style>
@font-face {
  font-family: 'iconfont';
  src: url('~@/static/iconfont.eot'); /* IE9 */
  src: url('~@/static/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('~@/static/iconfont.woff2') format('woff2'),
  url('~@/static/iconfont.woff') format('woff'),
  url('~@/static/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('~@/static/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
 
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>



<!-- 页面中使用 -->
<text class="iconfont icon-example"></text>

注意：

  • 路径 ~@/static/iconfont.xxx 是uniapp项目中静态资源的引用方式，~ 表示项目根目录。
  • 图标font-class名称如 icon-example 是你在iconfont网站生成字体时设置的。
- 阅读更多 -
小程序的 web-view 组件：实现点击跳转外部链接的高级技巧
System
2024-08-08
所有,小程序

在小程序中，web-view 组件用于嵌入网页。如果你想要实现点击 web-view 内的某个链接后在小程序外打开浏览器访问，可以在网页中通过 JavaScript 监听点击事件并调用 wx.miniProgram.navigateToMiniProgram 方法来实现跳转至小程序的其他页面，或者直接在网页中打开外部链接。

以下是在网页中打开外部链接的示例代码：




<!-- 假设这是你的 web-view 中加载的网页内容 -->
<!DOCTYPE html>
<html>
<head>
    <title>Web View Test</title>
    <script type="text/javascript">
        // 监听点击事件
        function openLink(url) {
            // 在小程序中打开外部链接
            if (typeof wx === 'object' && typeof wx.miniProgram === 'object') {
                wx.miniProgram.navigateToMiniProgram({
                    appId: 'your-miniprogram-appid', // 你的小程序 appId
                    path: 'pages/index/index', // 跳转的小程序页面路径
                    extraData: {
                        url: url // 需要传递的额外参数
                    },
                    success(res) {
                        // 打开小程序页面成功的回调
                    }
                });
            } else {
                // 在浏览器中打开外部链接
                window.location.href = url;
            }
        }
    </script>
</head>
<body>
    <a href="https://www.example.com" onclick="openLink(this.href); return false;">访问外部链接</a>
</body>
</html>

在上述代码中，openLink 函数会在点击链接时被调用。如果在小程序环境中，它会使用 wx.miniProgram.navigateToMiniProgram 方法跳转至小程序内的指定页面，并通过 extraData 传递了外部链接的 URL。如果不在小程序环境中，它会使用 window.location.href 在浏览器中打开链接。注意替换 your-miniprogram-appid 和 pages/index/index 为你自己的小程序 appId 和页面路径。

- 阅读更多 -
启动uniapp小程序报错：Error:app.json:在项目根目录中未找到app.json
System
2024-08-08
所有,小程序

错误解释：

这个错误表明uniapp框架在尝试启动小程序时，无法在项目的根目录中找到app.json文件。app.json是小程序的配置文件，包含了小程序的全局配置，如页面路径、窗口表现、导航条样式等。

解决方法：

  1. 确认app.json文件是否存在于项目根目录中。如果不存在，需要创建一个。
  2. 如果文件存在，检查文件名是否正确，确保没有拼写错误。
  3. 确保app.json文件位于项目的最顶层目录，不要放在子目录中。
  4. 如果你是通过uniapp的官方工具HBuilderX创建的项目，可以尝试使用该工具重新生成app.json文件。
  5. 确认是否在正确的项目目录中运行了启动命令，有时候可能因为路径错误导致无法找到app.json。

如果以上步骤都无法解决问题，可以尝试清理项目缓存，重新安装依赖，或者查看项目的文件结构是否符合uniapp对项目结构的要求。

- 阅读更多 -
小程序半屏内嵌案例
System
2024-08-08
所有,小程序

在微信小程序中实现半屏内嵌，可以使用cover-view组件来创建一个可以覆盖在原生组件之上的视图，结合cover-image可以实现类似的效果。以下是一个简单的示例代码：




<view class="container">
  <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls="{{true}}" danmu-list="{{danmuList}}" enable-danmu="{{true}}" danmu-btn="{{true}}" show-center-play-btn="{{false}}" show-play-btn="{{false}}" show-fullscreen-btn="{{false}}" show-progress="{{true}}" bindplay="bindplay" bindpause="bindpause" bindtimeupdate="bindtimeupdate" bindended="bindended" poster="{{poster}}"></video>
  <cover-view class="controls">
    <cover-view class="play-btn" bindtap="bindPlay">{{isPlay ? '暂停' : '播放'}}</cover-view>
  </cover-view>
</view>



.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
video {
  width: 100%;
  height: 50%;
}
.controls {
  position: absolute;
  width: 100%;
  bottom: 0;
  display: flex;
  justify-content: center;
}
.play-btn {
  padding: 10rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 5rpx;
}



Page({
  data: {
    isPlay: false,
    poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    danmuList: [
      { text: '第1s出现的弹幕', time: 1 },
      { text: '第3s出现的弹幕', time: 3 }
    ]
  },
  bindplay: function() {
    this.setData({
      isPlay: true
    })
  },
  bindpause: function() {
    this.setData({
      isPlay: false
    })
  },
  bindtimeupdate: function(e) {
    // 处理播放时间更新
  },
  bindended: function() {
    // 处理播放结束
  },
  bindPlay: function() {
    this.videoContext.pause() || this.videoContext.play();
  },
  onReady: function(e) {
    this.videoContext = wx.createVideoContext('myVideo')
  }
})

在这个示例中，我们使用了cover-view来创建一个遮盖在视频组件上的播放按钮，实现了视频的半屏内嵌和播放按钮的覆盖。当用户点击cover-view按钮时

- 阅读更多 -
uniapp开发小程序-如何判断小程序是在手机端还是pc端打开
System
2024-08-08
所有,小程序

在uniapp中，可以通过uni.getSystemInfoSync()方法获取系统信息，然后通过platform属性来判断当前设备是手机端还是PC端。

示例代码如下：




const systemInfo = uni.getSystemInfoSync();
const platform = systemInfo.platform;
 
if (platform === 'android' || platform === 'ios') {
    // 手机端
    console.log('当前在手机端');
} else {
    // PC端
    console.log('当前在PC端');
}

这段代码会在小程序初始化时执行，判断小程序是在手机端还是PC端打开，并输出相应的信息。

- 阅读更多 -
小程序动态绑定样式，最强技术实现
System
2024-08-08
所有,小程序

在小程序中，可以使用数据绑定来动态地设置元素的样式。这可以通过在wx:if、wx:elif、wx:else等控制属性中使用三元运算符，或者在style属性中使用对象的方式来实现。

以下是一个简单的例子，演示如何根据数据动态绑定样式：




<view class="box" style="{{boxStyle}}"> 动态样式示例 </view>



Page({
  data: {
    isActive: true,
  },
  onLoad: function () {
    this.setData({
      boxStyle: 'color: ' + (this.data.isActive ? 'red;' : 'blue;') + 'font-size: 16px;'
    });
  }
});

在这个例子中，boxStyle是一个对象，它会根据isActive的值动态地设置文本的颜色。如果isActive为true，文本颜色为红色；否则，文本颜色为蓝色。font-size在任何情况下都会被设置为16px。

请注意，在实际开发中，为了代码的可读性和维护性，通常会将样式信息抽离到一个单独的对象中，然后再通过数据绑定的方式应用到元素上。

- 阅读更多 -
uniapp开发小程序使用vue的v-html解析富文本图片过大过宽显示超过屏幕解决办法
System
2024-08-08
所有,vue.js

在uniapp开发小程序时，使用v-html解析富文本内容时，图片可能会因为尺寸过大或过宽导致超出屏幕显示范围。为了解决这个问题，可以在数据绑定中对图片的宽度进行控制。

以下是一个简单的例子，展示如何在uniapp中使用v-html并控制图片的大小：




<template>
  <view>
    <rich-text :nodes="articleContent"></rich-text>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      rawHtmlContent: '<div>这里是富文本内容，其中包含过大的图片...</div>'
    };
  },
  computed: {
    articleContent() {
      // 使用正则表达式匹配所有的img标签，并添加样式控制图片大小
      return this.rawHtmlContent.replace(/<img[^>]*>/gi, (match) => {
        return match.replace(/style="[^"]*"/gi, '').replace(/width="[^"]*"/gi, '').replace(/height="[^"]*"/gi, '') + ' style="max-width:100%;height:auto;"';
      });
    }
  }
};
</script>

在这个例子中，我们使用了一个计算属性articleContent来处理原始的HTML内容。通过正则表达式找到所有的<img>标签，并且替换掉原有的width、height和style属性，然后添加了一个新的样式style="max-width:100%;height:auto;"，这样图片就会自适应宽度，并且高度会自动调整保持图片比例。

请注意，这个例子只是一个简单的说明，实际使用时可能需要根据具体的富文本内容进行适当的调整。

- 阅读更多 -
【uniapp】uniapp小程序中实现拍照同时打开闪光灯的功能，拍照闪光灯实现
System
2024-08-07
所有,小程序

在uniapp中实现拍照的同时打开闪光灯功能，可以通过调用系统相机API以及相关的硬件API来实现。以下是实现这个功能的示例代码：

首先，需要在pages.json中配置相机和闪光灯的权限：




{
  "permission": {
    "camera": {
      "desc": "你的应用程序要使用摄像头" // 摄像头权限说明
    }
  }
}

然后，在需要调用拍照的页面的.vue文件中，可以使用如下代码：




<template>
  <view>
    <button @click="takePhoto">开启闪光灯并拍照</button>
  </view>
</template>
 
<script>
export default {
  methods: {
    takePhoto() {
      // 打开系统相机
      uni.chooseImage({
        count: 1, // 默认9，设置图片的数量
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
          // 成功选择图片后打开闪光灯
          this.openFlash();
        },
        fail: (err) => {
          console.log('Error while opening camera:', err);
        }
      });
    },
    openFlash() {
      // 判断平台，此处以平台区分处理
      const platform = uni.getSystemInfoSync().platform;
      if (platform === 'android') {
        // Android平台调用系统相机的闪光灯API
        uni.getCamera({
          success: (res) => {
            uni.setCameraFlash(res.cameraFacing === 'front' ? 'off' : 'torch');
          },
          fail: (err) => {
            console.log('Error while getting camera:', err);
          }
        });
      } else if (platform === 'ios') {
        // iOS平台可能需要使用其他方式或者第三方库来控制闪光灯
        // 例如使用第三方库：https://github.com/zhangbobell/camera-flash
      }
    }
  }
}
</script>

在这段代码中，takePhoto方法调用了uni.chooseImage来打开系统相机，并在成功选择照片后调用openFlash方法。openFlash方法根据平台不同（Android和iOS），使用相应的API打开闪光灯。

注意：在Android平台上，你可以通过uni.getCamera获取相机信息，并通过uni.setCameraFlash来控制闪光灯。但在iOS平台上，由于iOS系统的安全限制，无法直接通过uniapp调用系统API来控制闪光灯，可能需要使用第三方库或者其他方式来实现。

- 阅读更多 -
小程序如何设置余额充值和消费功能
System
2024-08-07
所有,小程序

在小程序中实现余额充值和消费功能，通常需要后端支持，以下是一个简化的流程和示例代码：

  1. 用户在小程序前端选择充值金额。
  2. 小程序前端发送充值请求到后端。
  3. 后端接收请求，处理支付，更新用户余额。
  4. 小程序展示充值结果。

后端示例代码（使用Node.js和MongoDB）:




const express = require('express');
const bodyParser = require('body-parser');
const MongoClient = require('mongodb').MongoClient;
 
const app = express();
app.use(bodyParser.json());
 
const mongoUrl = 'mongodb://localhost:27017/mydatabase';
const client = new MongoClient(mongoUrl);
 
app.post('/api/recharge', async (req, res) => {
  const userId = req.body.userId;
  const amount = req.body.amount;
 
  try {
    await client.connect();
    const db = client.db('mydatabase');
    const users = db.collection('users');
 
    const user = await users.findOne({ _id: userId });
    if (user) {
      const newBalance = user.balance + amount;
      await users.updateOne({ _id: userId }, { $set: { balance: newBalance } });
      res.json({ status: 'success', balance: newBalance });
    } else {
      res.status(404).json({ status: 'error', message: 'User not found' });
    }
  } catch (error) {
    res.status(500).json({ status: 'error', message: error.message });
  } finally {
    await client.close();
  }
});
 
app.post('/api/consume', async (req, res) => {
  // 消费逻辑类似充值逻辑，只是在这里更新余额时减去消费金额
});
 
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

小程序前端示例代码（假设使用微信小程序）:




// 在小程序前端，用户选择充值金额后，发送请求到后端
wx.request({
  url: 'https://yourserver.com/api/recharge',
  method: 'POST',
  data: {
    userId: 'user123',
    amount: 100 // 例如用户选择了充值100元
  },
  success(res) {
    if (res.data.status === 'success') {
      wx.showToast({
        title: '充值成功',
        duration: 2000
      });
      // 更新用户余额显示
    } else {
      wx.showToast({
        title: '充值失败',
        icon: 'none',
        duration: 2000
      });
    }
  },
  fail() {
    wx.showToast({
      title: '请求失败',
      icon: 'none',
      duration: 2000
    });
  }
});

确保你的小程序有相应的权限请求用户的支付权限，并且在微信公众平台配置好支付API。这样一来，用户在小程序内选择充值金额后，可以通过微信支付等方式进行充值操作。

注意：实际的生产环境中，你需要对用户的充值请求进行安全验证，比如使用签名，并且确保你的后端与微信支付的API对接正确，处理好各种异常情况，比如用户余额不足、支付失败等。

- 阅读更多 -
uniapp小程序过大，uniapp小程序压缩
System
2024-08-07
所有,小程序

在uniapp开发的小程序中，如果发现小程序过大，可以尝试以下方法进行优化：

  1. 图片压缩：使用工具如TinyPNG或者智图压缩工具，对小程序中的图片进行压缩，减少图片大小。
  2. 代码优化：删除不必要的代码，注释，去除重复代码，使用ES6语法代替ES5，减少全局变量和函数的使用。
  3. 第三方库优化：移除不需要的第三方库，或者更换更轻量级的库。
  4. 开启压缩：在uni-config.js中开启代码压缩，例如：



module.exports = {
    compile: {
        // 开启压缩
        uglify: true,
    }
}
  1. 按需加载：使用import按需加载模块，而不是全部打包。
  2. 网络资源本地化：将网络资源转换为本地资源，减少网络请求。
  3. 移除console.log：在生产环境中移除或者注释掉console.log语句。
  4. 使用分包加载：对小程序进行分包，只有在用户访问对应分包时才会加载。
  5. 使用云服务：将一些静态资源和计算任务放到云服务上，减少小程序包的大小。
  6. 图片懒加载：对于可以懒加载的图片，比如非首屏的图片，在用户滚动到相应位置时才加载。

在实施以上优化措施时，可能需要结合实际项目的代码结构和功能进行分析，以保证优化的同时不影响用户体验。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号