微信小程序开发实战，微信小程序开发实战黑马程序员

原标题：微信小程序开发实战，微信小程序开发实战黑马程序员

导读：

小程序云开发实战总结|快速上手&场景实战1、安装vant weapp推荐使用yarn，因为它会自动添加package.json。安装后，您会看到额外的文件。配置步骤中，确保...

小程序云开发实战 总结|快速上手&场景实战

1、安装vant weAPP 推荐使用yarn，因为它会自动添加 package.json。安装后，您会看到额外的文件。配置步骤中，确保勾选npm模块并进行构建。初期版本的微信小程序可能需要手动操作，但后续可以直接构建。删除不必要的目录结构，调整 app.json和App.wxss，以便正确引入vant weapp组件。

2、微信小程序「云函数」入门，快速上手指南第一步：在小程序开发助手中开启云开发功能，创建云环境，为后续操作建立基础。第二步：于小程序根目录下，建立一个名为 cloudfunction 的文件夹，作为云函数的管理目录。

3、首先，通过云开发创建项目，目录结构会包含基本文件。接着，按照vant weapp官方文档进行配置，从安装组件开始。推荐使用yarn而非npm，因为yarn会自动创建package.json文件，避免后续手动添加的麻烦。在快速上手过程中，务必勾选使用npm模块，然后在工具中选择构建npm。

【uniapp实战笔记】微信小程序设置 字体的开发踩坑记录

1、在微信小程序中开发uni-app时，我遇到了几个有关字体设置的问题，这里记录了开发中的踩坑记录。在使用canvas渲染文字时，必须设置文字的字体大小为整数。此外，微信小程序对于文字字体集的兼容性较差。在iOS端，能成功设置的字体只有三种：Arial， Courier New， Georgia。

2、理解生命周期的概念，uniapp小程序包含自身页面生命周期与vue组件生命周期，确保在组件中正确应用如`onLoad`等生命周期方法。以上内容旨在提供在uniapp+vue3开发微信小程序过程中可能遇到的问题及解决方案，通过持续优化和学习，开发者能够更高效地解决开发中的挑战。

3、使用微信小程序官方组件video 在安卓真机上出现了变形，在ios真机以及模拟器上显示正常。设置object-fill：container不起作用。解决办法：用阿里云转码时将视频画面比例16：9改成原始宽高比3：2就可以了。

4、uniapp之h5反向代理设置踩坑，解决跨域问题uniapp可以适应多个平台开发，你会发现在HBuilderX上的内置浏览器上调接口，没问题；在小程序中，也没问题；连接手机联调也没问题；当后台设置允许跨域之后，前端h5需要进行设置反向代理才能解决这个问题。

Flutter开发微信小程序实战:构建一个简单的天气预报小程序

接下来，创建新Flutter项目，运行终端命令。在pubspec.yaml中添加所需依赖，并执行flutter pub get。在lib目录下的pages文件夹内创建weather_page.dart，编写页面布局代码。创建Weatherpage类，获取天气数据并渲染页面。

综上所述，目前使用Flutter进行微信小程序开发并不是一种理想的选择。若需求是将已有的Flutter页面快速迁移到小程序中，一种可能的途径是：使用Flutter for web 生成H5页面，并在小程序中嵌入此H5页面。但需注意，这一方法在企业号上支持，而在个人号上可能存在限制，具体操作需验证。

实操过程包括获取FinClip sdk的凭据，集成到Flutter项目中，如在`pubspec.yaml`中添加依赖，并针对M1芯片的iOS环境进行相应配置。使用时，需先初始化SDK，通过官方提供的API打开、管理小程序，获取小程序信息，并在官方文档中查找更多细节。例如，初始化SDK和获取小程序信息的接口是基础操作。

我们通过指定编译选项裁剪CanvasKit尺寸，使其符合微信分包要求，并通过修改canvaskit.js实现微信小程序对应的方法。在运行FlutterWeb于微信小程序中，主要难点在于补充完整FlutterWeb所需的WebAPI，特别是在Document、Window、Navigator等类的实现。我们已经开源了相关代码，开发者可以阅读这些文件以深入了解。