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

写在前面

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

项目创建

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

js 复制代码
npm install -g @tarojs/cli
  • 安装结束
  • 选择框架组合
    (这里大家可以按照我的来,喜欢 ts 的在选择的时候可以选择 ts 即可,其他的编译工具,模板源都自行选择,只是在模板的时候选择一下 NutUi 即可,因为后面的 demo 是基于这个 UI 框架来的)
注意点:
  • 如果你是像我一样选择了框架搭配的话,这里的 app.js 不要配置了,否则后面你启动运行到开发工具的时候会失败

    这里是你自己使用 npm 安装 nutui 的时候需要手动配置一下,如果是选择了模板搭配的话,你的 app.js 和下面的一致即可,不需要再次手动引入
js 复制代码
import { createApp } from 'vue'
import './app.scss'

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

这个这样安装之后在开发的时候会有对应的提示:

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

命令对应的配置名字

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

这里之后可以看到我们的项目本地目录已经多了一个 dist 包文件

后面导入的时候直接导入这个包到对应的平台开发工具即可

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

微信小程序
js 复制代码
yarn dev:weapp
支付宝小程序
js 复制代码
yarn dev:alipay
京东小程序
js 复制代码
yarn dev:jd
H5 页面
js 复制代码
yarn dev:h5
百度小程序

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

写在最后

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

相关推荐
工作姬14 小时前
技术分享!《柬埔寨语翻译通》app:一款全面的柬埔寨语翻译工具,小语种翻译工具实现语音识别翻译的难点在哪里?
人工智能·小程序·语音识别·柬埔寨·柬埔寨语·高棉语·高棉语翻译
Java Fans15 小时前
微信小程序——用户隐私保护指引填写(详细版)
微信小程序·小程序·notepad++
2401_8441379518 小时前
PHP露营地管理平台小程序系统源码
大数据·微信·微信小程序·小程序·微信公众平台·微信开放平台
V+zmm1013419 小时前
停车共享小程序ssm+论文源码调试讲解
java·小程序·毕业设计·mvc·ssm·课程设计·1024程序员节
说私域19 小时前
服装品牌零售业态融合中的创新发展:以开源 AI 智能名片 S2B2C 商城小程序为视角
人工智能·小程序
qq22951165021 天前
微信小程序 高校教材征订系统
微信小程序·小程序
灰太狼大王灬1 天前
uniapp组件样式运行至小程序失效
小程序·uni-app
zhaoyapeng_1 天前
uniapp 小程序 周选择器
微信小程序·小程序·uni-app·uniapp
chaosama1 天前
禁止uni小程序ios端上下拉伸(橡皮筋效果)
ios·小程序
瑶琴AI前端1 天前
uniapp实现H5和微信小程序获取当前位置(腾讯地图)
微信小程序·小程序·uni-app