Taro开发小程序、H5相关一、taro开发微信小程序、H5 1. taro环境准备 2. 路由-参数的传递和读取 3. - 掘金

一、taro开发微信小程序、H5

1. taro环境准备

js

体验AI代码助手

代码解读

复制代码

`npm install -g @tarojs/cli@3.4.14 全局安装taro
taro -v // 查看安装后的taro版本
npm run dev:weapp // 编译微信小程序代码-微信开发者工具里运行
npm run dev:h5 // 编译H5代码-浏览器端运行
npm run build:weapp // 打包小程序代码
npm run build:h5 // 打包h5端代码`

2. 路由-参数的传递和读取

js

体验AI代码助手

代码解读

复制代码

`// 跳转方式
Taro.navigateTo({url:''}) // 1.打开新页面,有返回按钮
Taro.redirectTo({url:''}) // 2.在当前页面打开新页面，无返回按钮
Taro.switchTab({url:''}) // 3.跳转到tabBar对应的页面
// 参数传递+读取参数
Taro.navigateTo({url: '/pages/detail/index?id=2&type=4'})
const params = this.$router.params // {id:2, type:4}`

3.样式-长度单位

js

体验AI代码助手

代码解读

复制代码

`推荐使用：px 或百分比%. Taro默认设计稿为750px,开发时尺寸按照设计稿1:1开发即可.
Taro中会对px自动转换：1.运行小程序时,px会转换成rpx. 2.运行H5时,会默认转换成rem.
注意：如果部分的px单位不转换成rpx或rem, px单位改大写字母PX || Px,这样Taro会忽略.
选择器：推荐使用类选择器,不要使用属性选择器和标签选择器. .list-box`

4.引入图片的方式

js

体验AI代码助手

代码解读

复制代码

`// 方式1 import Plug from '../assets/plus.png' <Image src={plug}></Image>
// 方式2: <Image src={require('../assets/plus.png')}></Image>`

5.Icon组件

js

体验AI代码助手

代码解读

复制代码

`import { View, Icon, Text } from '@taro/components'
//type 图标类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
<View className="item">
<Icon type="circle" size={18}></Icon>
<Text>吃饭</Text>
<Icon type="clear" size={18}></Icon>
</View>`

6.onReachBottom触底加载更多

js

体验AI代码助手

代码解读

复制代码

`getList(){
const { id, currentPage, pageSize } = this.state
const res = await Taro.request({ url: '', method:'get' })
this.setState({ list: [...list, res.data], total: res.data.total }) // 加载更多
}
// 触底监听 【适用于没有自定义的底部tabbar 列表页】.
onReachBottom(){
const {total, currentPage, pageSize} = this.state
// hasMore:true // 如果当前页小于总页数说明true有数据 false已经是最后一页
const hasMore = currentPage < Math.ceil(total / pageSize) // 如果当前页小于总页数说明有数据,否则无数据
this.setState({hasMore}}
if(!hasMore) return // 没有更多数据则不执行下面语句
this.setState({
currentPage:this.state.currentPage+1
},()=>{
this.getList()
})
}`

二、taro编译鸿蒙应用步骤

1. taro环境

js

体验AI代码助手

代码解读

复制代码

`1. 全局安装taro4 npm i -g @tarojs/cli@beta

  1. taro创建react-demo项目,编译器选vite taro init react-demo
  2. 安装依赖: 进入react-demo文件夹, 在终端里执行 npm install --force
  3. 安装鸿蒙插件: npm i @tarojs/plugin-platform-harmony-ets@beta
  4. 修改config.js的编译配置:

const path = require("path") // 没有path的需要手动加一下
config = {
plugins: ['@tarojs/plugin-platform-harmony-ets'], // 配置使用插件
// harmony 相关配置 【注意:' ../harmony01' == 鸿蒙studio里创建新项目的保存的文件夹名称, taro项目和它挨着.】
harmony: {
compiler: 'vite', // 将编译方式设置为使用 Vite 编译 不动
projectPath: path.resolve(process.cwd(), '../harmony01'),
hapName: 'entry', // 不动
name: 'default', // 不动
},
}

  1. 编译运行：在 package.json 里添加以下的 scripts 命令,运行命令,Taro 可将打包结果生成到配置的鸿蒙主项目路径中.

"scripts": {
"build:harmony": "taro build --type harmony",
"dev:harmony": "npm run build:harmony -- --watch"
}

  1. npm run dev:harmony ,taro打包的entry文件夹会覆盖鸿蒙项目里的entry.`

2.鸿蒙环境

js

体验AI代码助手

代码解读

复制代码

`1. 注册华为账号+安装、配置 DevEco Studio. √
1.1 登录 HarmonysOS 应用开发门户， 注册开发者账号 √
1.2 进入 HUAWEI DevEco Studio 套件货架中心，申请白名单---申请中
1.3 安装 DevEco Studio √ 目前安装的是 devecostudio-windows-5.0.3版本

  1. 创建新项目harmony01, save location: 保存的路径=新增的空文件夹【注意：taro的config.js 编译配置那里要用.】
  2. entry文件夹下: entry/src/main/module.json5文件中的 srcEntry属性为'./ets/app.ets '

注意:有2处 extensionAbilities: [{ "srcEntry": """" }] // 报错error: unKnown module 'entry' in the command line. 时, 重启Dev statudio 重新执行Taro项目的脚本.

  1. 预览+调试 : 选择设备 run 'default'.

a. 使用预览器 previewer× 提示:请使用经授权的华为帐号查阅该文档
b. 使用模拟器 × 原因：未开启Hyper-V, 需要Window10 专业版，家庭版 程序和功能里没有配置选项。√【**找了些指令，已解决】
c. 本地真机: 真机需要使用华为侧提供的测试机，测试机中会安装纯鸿蒙的系统镜像，能够体验到完整的鸿蒙系统功能，纯鸿蒙应用目前还不能完美地在 HarmonyOS 4.0 的商用机侧跑起来 【未实际操作】`

原网址: 访问
创建于: 2025-07-17 18:24:21
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论