Taro+NutUi 开发不同平台的小程序系列 -第一章节/项目多平台运行测试

news/2024/7/20 1:50:31 标签: taro, 小程序
写在前面

今天开始我们写 Taro+NutUi 的文章,第一篇先从创建一个项目开始,后续我们持续增加功能,发布到不同的平台开发工具上看一下具体的渲染效果怎么样,之前 uniapp 也是支持各个平台发布的,甚至可以直接发布到 app 上,我前面的文章也写过,今天我们使用 Taro 将这个过程走一遍,功能很简单,主要是测试一下平台的兼容性,uniapp 开发不是不行,是使用 vue 的时候很多方法是不兼容的,比如异步组件加载的方法,虽然他自己也提供了一套异步加载组件的方法,但是我个人是不喜欢使用的,因为我不希望使用一款 js 还要不兼容原本的框架语法,这个不是我希望看到的,那么这个 Taro 不仅仅可以兼容vue 的预发,还可以直接目前比较主流的 React 框架,那么我们废话不多说,直接开搞!

项目创建

这个章节你们可以看我的文章,也可以直接移步这里项目创建,下面的例子是全局安装 NutUi 的使用过程,前面的链接里面有按需加载的,大家注意一下

npm install -g @tarojs/cli

在这里插入图片描述

  • 安装结束

在这里插入图片描述

  • 选择框架组合
    (这里大家可以按照我的来,喜欢 ts 的在选择的时候可以选择 ts 即可,其他的编译工具,模板源都自行选择,只是在模板的时候选择一下 NutUi 即可,因为后面的 demo 是基于这个 UI 框架来的)

在这里插入图片描述

注意点:
  • 如果你是像我一样选择了框架搭配的话,这里的 app.js 不要配置了,否则后面你启动运行到开发工具的时候会失败
    在这里插入图片描述
    这里是你自己使用 npm 安装 nutui 的时候需要手动配置一下,如果是选择了模板搭配的话,你的 app.js 和下面的一致即可,不需要再次手动引入
import { createApp } from 'vue'
import './app.scss'

const App = createApp({
  onShow (options) {},
  // 入口组件不需要实现 render 方法,即使实现了也会被 taro 所覆盖
})
export default App
  • vscode 插件安装
插件市场搜索:nutui-vscode-extension

在这里插入图片描述
这个这样安装之后在开发的时候会有对应的提示:
在这里插入图片描述

运行到不同开发平台测试
读取配置文件

命令对应的配置名字

引入步骤
  • 运行命令 (使用微信小程序做例子)
yarn dev:weapp

在这里插入图片描述
这里之后可以看到我们的项目本地目录已经多了一个 dist 包文件

在这里插入图片描述
后面导入的时候直接导入这个包到对应的平台开发工具即可

在这里插入图片描述
到此就已经可以在小程序开发工具中打开该项目了,下面是我不同平台开发工具中打开的实际情况

微信小程序
yarn dev:weapp

在这里插入图片描述

支付宝小程序
yarn dev:alipay

在这里插入图片描述

京东小程序
yarn dev:jd

在这里插入图片描述

H5 页面
yarn dev:h5

在这里插入图片描述

百度小程序

百度的我运行失败了,不知道为什么, 原因我还没有找到,回头正常显示了的话,这里更新一下

写在最后

第一个章节基本上就到这了,到这之后开始业务已经没有问题了,至于后面发布,环境配置等一些操作我研究一下文档之后再进行更新,拜拜各位


http://www.niftyadmin.cn/n/5211317.html

相关文章

YOLOv5 分类模型 预处理 OpenCV实现

YOLOv5 分类模型 预处理 OpenCV实现 flyfish YOLOv5 分类模型 预处理 PIL 实现 YOLOv5 分类模型 OpenCV和PIL两者实现预处理的差异 YOLOv5 分类模型 数据集加载 1 样本处理 YOLOv5 分类模型 数据集加载 2 切片处理 YOLOv5 分类模型 数据集加载 3 自定义类别 YOLOv5 分类模型…

python+pytest接口自动化-requests发送post请求

简介 在HTTP协议中,与get请求把请求参数直接放在url中不同,post请求的请求数据需通过消息主体(request body)中传递。 且协议中并没有规定post请求的请求数据必须使用什么样的编码方式,所以其请求数据可以有不同的编码方式,服务…

MySQL 优化器 MRR

什么是 MRR MRR 的全称是 Multi-Range Read Optimization,是优化器将随机 IO 转化为顺序 IO 以降低查询过程中 IO 开销的一种手段,咱们对比一下 mrron & mrroff 时的执行计划: 其中表结构如下: mysql> show create tabl…

生态对对碰|华为OceanStor闪存存储与OceanBase完成兼容性互认证!

近日,北京奥星贝斯科技有限公司 OceanBase 数据库与华为技术有限公司 OceanStor Dorado 全闪存存储系统、OceanStor 混合闪存存储系统完成兼容性互认证。 OceanBase 数据库挂载 OceanStor 闪存存储做为数据盘和日志盘,在 OceanStor 闪存存储系统卓越性能…

C现代方法(第23章)笔记——库对数值和字符数据的支持

文章目录 第23章 库对数值和字符数据的支持23.1 <float.h>: 浮点类型的特性23.2 <limits.h>: 整数类型的大小23.3 <math.h>: 数学计算(C89)23.3.1 错误23.3.2 三角函数23.3.3 双曲函数23.3.4 指数函数和对数函数23.3.5 幂函数23.3.6 就近舍入、绝对值函数和取…

jQuery 第十一章(表单验证插件推荐)

文章目录 前言jValidateZebra FormjQuery.validValValidityValidForm BuilderForm ValidatorProgressionformvalidationjQuery Validation PluginjQuery Validation EnginejQuery ValidateValidarium后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&…

深度学习卷积神经网络参数计算难点重点

目录 一、卷积层图像输出尺寸 二、池化层图像输出尺寸 三、全连接层输出尺寸 四、卷积层参数数量 五、全连接层参数数量 六、代码实现与验证 以LeNet5经典模型为例子并且通道数为1 LeNet5网络有7层&#xff1a; ​ 1.第1层&#xff1a;卷积层 ​ 输入&#xff1a;原始的图片像素…

五种多目标优化算法(NSDBO、NSGA3、MOGWO、NSWOA、MOPSO)求解微电网多目标优化调度(MATLAB代码)

一、多目标优化算法简介 &#xff08;1&#xff09;非支配排序的蜣螂优化算法NSDBO 多目标应用&#xff1a;基于非支配排序的蜣螂优化算法NSDBO求解微电网多目标优化调度&#xff08;MATLAB&#xff09;-CSDN博客 &#xff08;2&#xff09;NSGA3 NSGA-III求解微电网多目标…