微信小程序js中引用本地视频

要在微信小程序中引用本地视频，需要将视频文件放在小程序的本地存储目录中，然后在页面中使用 `<video>` 标签来引用它。以下是一个示例：

1. 在小程序开发工具中，选择项目根目录，右键选择“新建文件夹”，创建一个名为“videos”的文件夹。

2. 将视频文件放入“videos”文件夹中。

3. 在 wxml 文件中，使用 `<video>` 标签来引用视频文件：

<video src="/videos/myvideo.mp4"></video>

其中，`src` 属性指定视频文件的路径。在小程序中，路径以 “/” 开头表示根目录。

4. 在 js 文件中，可以通过 `wx.getFileSystemManager()` 方法获取小程序的文件系统管理器，然后使用 `wx.getFileSystemManager().getSavedFileList()` 方法获取已保存在本地的视频文件列表。

wx.getFileSystemManager().getSavedFileList({
  success: function(res) {
    console.log(res.fileList)
  }
})

注意：在小程序中播放本地视频文件可能存在兼容性问题，请确认您的小程序版本支持该功能。

相关问题

微信小程序开发怎么使用本地自定义字体

### 微信小程序开发使用本地自定义字体方法教程

#### 准备工作
在微信小程序中使用本地自定义字体前，需准备所需的字体文件。通常情况下，这些字体文件为 `.ttf` 或其他常见格式。如果字体文件较大，则建议先对其进行压缩处理[^3]。

#### 将字体文件加入项目资源
将下载并可能已压缩过的字体文件放置于项目的合适位置，比如 `static/fonts/` 文件夹下。这一步骤确保了后续能够正确引用该字体文件。

#### 转换字体至 Base64 编码（可选）
对于某些场景来说，可以考虑将字体文件转换成 Base64 格式的字符串嵌入样式表内，从而减少 HTTP 请求次数。不过需要注意的是这样做会增加 CSS 文件大小，在实际操作时应权衡利弊后再做决定。

#### 修改 app.json 配置项
为了让整个应用程序都能识别新引入的字体家族名称，在全局配置文件 `app.json` 中添加如下字段：

{
  "usingComponents": {},
  "style": "v2",
  "fontFace": [
    {
      "family": "CustomFontFamilyName", // 定义新的字体族名
      "src": "url('/path/to/local/fontfile.ttf')" // 设置相对路径指向本地存储的字体文件
    }
  ]
}

注意这里的 `"path/to/local"` 应替换为你自己项目结构中的具体路径[^1]。

#### 加载字体到页面组件
除了可以在启动函数里调用外，也可以单独创建一个用于初始化字体的方法，并将其挂载到生命周期钩子上执行。下面是一个简单的例子展示如何实现这一点:

Page({
  onLoad: function () {
    this.setFont();
  },
  
  setFont(){
     const fontPath = '/static/fonts/mycustomfont.ttf';
     
     wx.loadFontFace({
       global: false,
       family: 'MyCustomFont',
       source: `url(${fontPath})`,
       success(res){
         console.log('字体加载完成');
       },
       error(err){
         console.error('字体加载失败:',err);
       }
     });
  }
})

上述代码片段展示了怎样在一个特定页面实例化过程中动态加载指定的字体资源[^4]。

#### 页面 WXML 和 WXSS 的调整
最后不要忘记更新相应的模板 (WXML) 及样式表 (WXSS)，以便让文本元素采用刚刚注册的新字体系列。例如：

<view class="text-with-custom-font">这段文字将会显示为我们刚才设定好的自定义字体</view>

.text-with-custom-font {
  font-family: MyCustomFont; /* 对应之前设置的名字 */
}

通过以上几个步骤的操作就可以顺利地在微信小程序内部集成来自本地的个性化字体方案了。

微信小程序three.js加载本地资源

微信小程序中使用Three.js加载本地资源的过程与在传统的Web环境中略有不同，因为微信小程序的环境更为封闭，并且数据请求有特定的限制。不过，你可以通过以下步骤来尝试加载本地资源：

1. **使用File API**：
- 首先，你需要将图片或者其他资源转换为Base64编码，可以利用JavaScript原生的`FileReader`来读取文件内容并转码。

wx.getFileSystemManager().readFile({
  filePath: 'file://your/local/image.jpg',
  success: function (res) {
    let base64Data = res.data;
    // 然后可以将base64Data作为URL直接给THREE.ImageLoader使用
    var loader = new THREE.ImageLoader();
    loader.load('data:image/jpeg;base64,' + base64Data, function(image) {
      // 加载完成后创建纹理或者材质
      var texture = new THREE.Texture(image);
      var material = new THREE.MeshBasicMaterial({ map: texture });
      // 创建模型并添加到场景中
    });
  },
  fail: function() {
    console.error('Failed to read file');
  }
});

2. **使用缓存机制**：
如果文件较大，不适合每次都转化成Base64，可以考虑先上传到服务器，然后在小程序中引用远程地址。

- 将文件上传到云服务器后获取URL，再在Three.js中加载。
- 使用`wx.request`或其他网络请求工具从服务器下载资源，下载完后在回调中处理资源。

**注意事项**：
- 微信小程序对网络请求和文件操作有限制，可能会有请求次数、文件大小等方面的限制。
- 考虑用户隐私保护，避免过度收集用户的本地数据。