Taro开发小程序、H5相关

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

1. taro环境准备

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. 路由-参数的传递和读取

// 跳转方式
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.样式-长度单位

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

选择器：推荐使用类选择器,不要使用属性选择器和标签选择器.  .list-box

4.引入图片的方式

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

5.Icon组件

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触底加载更多

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环境

1. 全局安装taro4 npm i -g @tarojs/cli@beta
2. taro创建react-demo项目,编译器选vite taro init react-demo 
3. 安装依赖: 进入react-demo文件夹, 在终端里执行 npm install --force 
4. 安装鸿蒙插件: npm i @tarojs/plugin-platform-harmony-ets@beta
5. 修改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', // 不动
   },
}
6. 编译运行：在 package.json 里添加以下的 scripts 命令,运行命令,Taro 可将打包结果生成到配置的鸿蒙主项目路径中.
"scripts": {
    "build:harmony": "taro build --type harmony",
    "dev:harmony": "npm run build:harmony -- --watch"
}
7. npm run dev:harmony ,taro打包的entry文件夹会覆盖鸿蒙项目里的entry. 

2.鸿蒙环境

1. 注册华为账号+安装、配置 DevEco Studio.   √     
  1.1 登录  HarmonysOS 应用开发门户， 注册开发者账号  √ 
  1.2 进入  HUAWEI DevEco Studio 套件货架中心，申请白名单---申请中  
  1.3 安装 DevEco Studio √  目前安装的是 devecostudio-windows-5.0.3版本 
2. 创建新项目harmony01, save location: 保存的路径=新增的空文件夹【注意：taro的config.js 编译配置那里要用.】 
3. entry文件夹下: entry/src/main/module.json5文件中的 srcEntry属性为'./ets/app.ets '
注意:有2处 extensionAbilities: [{ "srcEntry": """" }] // 报错error: unKnown module 'entry' in the command line. 时, 重启Dev statudio 重新执行Taro项目的脚本.
4.  预览+调试 : 选择设备 run 'default'.
a. 使用预览器 previewer× 提示:请使用经授权的华为帐号查阅该文档   
b. 使用模拟器 ×    原因：未开启Hyper-V, 需要Window10 专业版，家庭版 程序和功能里没有配置选项。√【**找了些指令，已解决】
c. 本地真机: 真机需要使用华为侧提供的测试机，测试机中会安装纯鸿蒙的系统镜像，能够体验到完整的鸿蒙系统功能，纯鸿蒙应用目前还不能完美地在 HarmonyOS 4.0 的商用机侧跑起来 【未实际操作】