跨平台uniapp和taro实战

15-跨平台uniapp和taro实战

https://www.bilibili.com/video/BV1GV411L7qS

uniapp

P1 405--day115_邂逅跨平台-uniapp基础语法-uni-

taro ta他楼

原生开发的特点:
1性能稳定,使用流畅,用户体验好、功能齐全,安全性有保证,兼容性好,可使用手机所有硬件功能等口但是开发周期长、维护成本高、迭代慢、部署慢、新版本必须重新下载应用口不支持跨平台,必须同时开发多端代码

跨平台开发的特点:
口可以跨平台,一套代码搞定iOS、Android、微信小程序、H5应用等口开发成本较低,开发周期比原生短
口适用于跟系统交互少、页面不太复杂的场景。
口但是对开发者要求高,除了本身JS的了解,还必须熟悉一点原生开发口不适合做高性能、复杂用户体验,以及定制高的应用程序。比如:抖音、微信、QQ等。
口同时开发多端兼容和适配比较麻烦、调试起来不方便。

_P2 406--day115_邂逅跨平台-uniapp基础语法-uni-ui.

应该如何选择?个人建议
口需要做高性能、复杂用户体验、定制高的APP、需硬件支持的选原生开发
口需要性能较好、体验好、跨Android,iOS平台、H5平台、也需要硬件支持的选Flutter(采用Dart开发)
口需要跨小程序、H5平台、Android,iOS平台、不太复杂的先选uni-app,其次选Taro
口不需要扩平台的,选择对应技术框架即可。

Cordova
Xamarin
React Native
Weex
Uniapp
Flutter

P3 407--day115_邂逅跨平台-uniapp基础语法-uni-ui.

uni-app 和 微信小程序,应该如何选择?
口需要跨平台、不太复杂的应用选uni-app,复杂的应用使用uni-app反而增加了难度。
口不需要跨平台、较复杂、对兼容和稳定性要求高的选原生微信小程序。

P4 408--day115_邂逅跨平台-uniapp基础语法-uni-ui.
P5 409--day115_邂逅跨平台-uniapp基础语法-uni-ui.
P6 410--day115_邂逅跨平台-uniapp基础语法-uni-ui.
P7 411--day115-邂逅跨平台-uniapp基础语法-uni-ui
P8 412--day115-邂逅跨平台-uniapp基础语法-uni-ui.
P9 413--day115-邂逅跨平台-uniapp基础语法-uni-ui.

P10 414--day115-邂逅跨平台-uniapp基础语法-uni-u

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		globalData:{
			name:'koo'
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>
console.log(getApp().globalData.name)

P11 415--day115_邂逅跨平台-uniapp基础….
P12 416--day115_邂逅跨平台-uniapp基础语..
P13 417--day115_邂逅跨平台-uniapp基础语
P14 419--day115_邂逅跨平台-uniapp基础语.
P15 420--day115-邂逅跨平台-uniapp基础语
P16 421--day116_uni-ui-页面生命周期-自定义.
P17 422--day116_uni-ui-页面生命周期-自定义
P18 423--day116_uni-ui-页面生命周期-自定义
P19 424--day116_uni-ui-页面生命周期-自定义.

P20 425--day116_uni-ui-页面生命周期-自定义.

:deep(.btn){
    
}

:global(){
    
}
<navigator></>

在uni-app中,常见页面通讯方式:
方式一:url查询字符串和EventChannel
方式二:使用事件总线
方式三:全局数据 globalData
方式四:本地数据存储
方式五:Vuex和Pinia,状态管理库。

// 在起始页面跳转到test.vue页面,并监听test.vue发送过来的事件数据
uni.navigateTo({
  url: '/pages/test?id=1',
  events: {
    // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
  }
})

// 在test.vue页面,向起始页通过事件传递数据
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
  eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
  // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })
}

P21 426--day116_uni-ui-页面生命周期-自定..

<template>
	<view class="content">
		<button @tap="go">go</button>
	</view>
</template>

<script>
	export default {
		methods: {
			go(){
				uni.navigateTo({
					url:'/pages/news/news',
					events:{
						send({msg}){
							console.log(msg,55555)
						}
					}
				})
			}
		}
	}
</script>

<template>
	<view>
		<button @tap="back">back</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
				const eventChannel=this.getOpenerEventChannel()
				eventChannel.emit('send',{msg:'hello'})
			}
		}
	}
</script>

<style lang="scss">

</style>


P22 427--day116_uni-ui-页面生命周期-自定义..

a#ifdef:if defined 仅在某平台存在a

ifndef:if not defined 除了某平台,其它平台均存在1

%PLATFORM%:平台名称

uni.$emit/$on $off取消监听 事件总线

P23 428--day116_uni-ui-页面生命周期-自定义..
P24 429--day116_uni-ui-页面生命周期-自定义..

P25 429--day116_uni-ui-页面生命周期-自定义..

更多:https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle


P26 430--day116_uni-ui-页面生命周期-自定义..
P27 431--day116_uni-ui-页面生命周期-自定义..

P28 432--day116_uni-ui-页面生命周期-自定义..

符合esxxx规范的components不需要引入和注册

https://uniapp.dcloud.net.cn/component/#easycom

P29 433--day116_uni-ui-页面生命周期-自定义..

P30 434--day116_uni-ui-页面生命周期-自定义..

vue3

defineProps({})
<script setup>
	import {ref,getCurrentInstance} from 'vue'
	let $instance=ref(getCurrentInstance().proxy)
	function back(){
		uni.navigateBack({
			delta:1
		})
		const eventChannel=$instance.value.getOpenerEventChannel()
		eventChannel.emit('send',{msg:'hello'})		
	}
</script>
		methods: {
			go(){
				uni.navigateTo({
					url:'/pages/news/news',
					events:{
						send({msg}){
							console.log(msg,55555)
						}
					},
					success: (res) => {
						// res.eventChannel.emit('msg',data)
					}
				})
			}
		}

P31 435--day116_uni-ui-页面生命周期-自定义
P32 435--day116_uni-ui-页面生命周期-自定义
P33 436--day116_uni-ui-页面生命周期-自定义
P34 437--day116_uni-ui-页面生命周期-自定义

P35 438--day117_Pinia状态管理-购物街项目-

认识Pinia口Pinia(发音为/pinjA/,如英语中的peenya)是Vue的存储库,它允许跨组件、页面共享状态.
Ouni-app内置了Pinia,使用HBuilder X不需要手动安装,直接使用即可。
口使用CLI需要手动安装,执行yarn add pinia 或 npm install pinia.

storeToRefs(counterStore)

P36 439--day117_Pinia状态管理-购物街项目-
P37 440--day117_Pinia状态管理-购物街项目-
P38 441--day117_Pinia状态管理-购物街项目-
P39 442--day117_Pinia状态管理-购物街项目-.
P40 443--day117_Pinia状态管理-购物街项目-

api http://152.136.185.210:7878/api/hy66

152.136.185.210:7878/api/hy66/home/multidata


P41 444--day117_Pinia状态管理-购物街项目-
P42 445--day117_Pinia状态管理-购物街项目-
P43 446--day117_Pinia状态管理-购物街项目-
P44 447--day117_Pinia状态管理-购物街项目-
P45 448--day117_Pinia状态管理-购物街项目-
P46 449--day117_Pinia状态管理-购物街项目-
P47 450--day117_Pinia状态管理-购物街项目-
P48 451--day117_Pinia状态管理-购物街项目-

P49 452--day117_Pinia状态管理-购物街项目-

vue3-lazy h5 app 图片懒加载 vue-lazy vue3-lazy

P50 453--day117_Pinia状态管理-购物街项目-

block template 替换

P51 454--day117_Pinia状态管理-购物街项

P52 455--day117_Pinia状态管理-购物街项目

服务器配置

P53 456--day117_Pinia状态管理-购物街项目

dev.dcloud.net.cn/pages/app/detail

Dcloud后台 app 证书管理

P54 457--day117_Pinia状态管理-购物街项目

apk 自定义证书

P55 458--day117_Pinia状态管理-购物街项目

离线打包

nativesupport.dcloud.net.cn/AppDocs/usesdk/android

P56 459--day117_Pinia状态管理-购物街项目

ios打包 ask.dcloud.net.cn/article/152

成开发者要 钱

离线打包 nativesupport.dcloud.net.cn/AppDocs/usesdk/ios

苹果APP开发者帐号申请3种类型及费用说明

标签: APP开发 访问: 69812023-01-19

一、个人账号

1.费用:99 美元/年(¥688)

2.协作人数:仅限开发者自己

3.不需要填写公司的邓百氏编码( D-U-N-S Number)

4.支持账号下的 app 上线 App Store

5.需要创建 Apple ID

二、公司账号

1.费用:99 美元/年(¥688)

2.允许多个开发者协作开发

3.需要填写公司的邓百氏编码( D-U-N-S Number)

4.该账号下的 app 可上线至 App Store

5.需要创建 Apple ID

三、苹果企业开发者账号

1.费用:299 美元/年

2.允许多个开发者协作开发

3.需要填写公司的邓百氏编码( D-U-N-S Number)

4.该账号下的 app 不能发布到 App Store 中

5.需要创建 Apple ID

6.企业账号申请比较困难

注册步骤网站:https://developer.apple.com/cn/support/app-account

P57 01-上午
P58 02-下午

vscode 插件 Remote SSH

uni-ui grid https://uniapp.dcloud.net.cn/component/uniui/uni-grid.html

uni-app 开发鸿蒙应用

https://uniapp.dcloud.net.cn/tutorial/harmony/dev.html#uni-app-开发鸿蒙应用

taro

P59 460--day118_邂逅Taro-内置组件-页面生

vue 支h5 小程序

react 支持 rn

iPhoneGap Cordova
2015 React Native 跨平台框架-> React
2016 Weex-> Vuel
2017 Flutter
2017 weapp uni-app
2018 taro

P60 461--day118_邂逅Taro-内置组件-页面生

Taro 3 可以支持转换到 H5、ReactNative 以及任意小程序平台(重心是小程序端)。

Taro:官方的Taro UI,只支持小程序和H5(不支持RN),截至到2019年10月28日,Taro只有64个插件。

Taro和uni-app如何选择?
如需要跨平台,并且应用不是很复杂,可选 Taro 和 uni-app。
如熟悉Vue可优先选择uni-app;如熟悉React推荐使用 Taro
uni-app在资料、生态、工具、开发效率、跨端数会比Taro略胜一筹。
当然Taro也有独特的优势,如:用React开发非常的灵活。

P61 462--day118_邂逅Taro-内置组件-页面生.

推荐使用 VSCode 或 WebStorm.
当你使用 VSCode 时,推荐安装 ESLint 插住,如果你使用 TypeScript,别忘了配置 eslint.probe 参数。
如果使用 Vue,推荐安装 Vetur 或 Volar 插件。前面那个vue2 后面那个vue3

taro v3.5.7视频 我的Taro v3.6.32

查看版本 npm view @tarojs/cli versions

taro init project-name

注意事项:
口开发支付宝小程序时,Webpack4暂不支持使用React18.
受小程序环境限制,诸如新 SSR Suspense等特性将不能在小程序中使用。
ORN 暂不支持 React v18,需要等待 RN 官方输出支持方案。

口为了顺利地用Taro来开发App,我们强烈地建议您,先对React Native开发进行学习。

报错处理

P62 463--day118_邂逅Taro-内置组件-页面生.
P63 464--day118_邂逅Taro-内置组件-页面生.

P64 465--day118_邂逅Taro-内置组件-页面生.

为了实现多端兼容,综合考虑编译速度、运行性能等因素,Taro可以约定了如下开发规范:
口页面文件遵循React组件(JSx)规范
口 组件标签靠近小程序规范(但遵从大驼峰,并需导包),详见Taro组件规范
口 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 Taro(需导包),详见Taro接口规范
口数据绑定及事件处理同React规范,同时补充了App及页面的生命周期
口为兼容多端运行,建议使用flex布局进行开发,推荐使用px单位(750设计稿)。
口在React中使用Taro内置组件前,必须从@tarojs/components进行引入.
口 文档直接查看Taro的官网文档:https://docs.taro.zone/docs


P65 466--day118_邂逅Taro-内置组件-页面生.

在入口app.js组件中我们可以:
口定义应用的生命周期
onLaunch-> useEffect:在小程序环境中对应app的 onLaunch
componentDidshow-> useDidshow:在小程序环境中对应app的onshow.
componentDidHide-> useDidHide:在小程序环境中对应app的onHide.

定义全局数据
taroGlobalData

函数式 不好定义taroGlobalData

P66 467--day118_邂逅Taro-内置组件-页面生.

View:视图容器。用于包裹各种元素内容(Taro3.3以后支持使用HTML标签进行开发).
Text:文本组件、用于包裹文本内容。
Button:按钮组件,多端主题色一样。 统一颜色 不好像uniapp

Image:图片。默认为图片宽高,支持JPG,PNG,SVG,WEBP,GIF 等格式以及云文件ID口支持导入 和 网络图片

P67 468--day118_邂逅Taro-内置组件-页面生.

Taro默认以750px作为换算尺寸标准,如设计稿不是750px为标准需修改designWidth.
口比如:设计稿是640px,则需修改 config/index.js 中 designWidth 为 640

desi在Taro中单位建议使用 px、百分比%,Taro 默认会对所有单位进行转换。
在 Taro中写尺寸按照 11 关系来写,即设计稿量长度 100px,那么尺寸就写 100px,当转成微信小程序时尺寸为100rpx,当转成H5时尺寸以rem为单位.
如你希望部分 px 单位不被转换成 rpx 或 rem,最简单做法就是在 px 单位中增加一个大写字母。

JS 中行内样式的转换
在编译时,Taro 会帮你对样式做尺寸转换操作
但是如果是在 JS 中书写了行内样式,那么编译时就无法做替换了针对这种情况,Taro 提供了 API Taro.pxTransform 来做运行时的尺寸转换。

/*postcss-pxtransform disable*/ 不转换css px PX

P68 469--day118_邂逅Taro-内置组件-页面生.

全局样式
Taro页面和普通组件导入的样式默认都是全局样式
那在Taro中应该如何编写局部的样式呢?使用CsS Modules功能

css-in-js https://docs.taro.zone/docs/css-in-js

默认都是全局样式

config/index.js/mini.cssModules.enable=true

index.module.scss
.test{
    color: red;
}
//全局样式
:global(.title){
    color: orange;
}

import css from './index.module.scss'
<Text className={css['test']}>hello world</Text>

P69 470--day118_邂逅Taro-内置组件-页面生.

Taro支持使用在 css 里设置背景图片,使用方式与普通web项目大体相同,但需要注意以下几点:口支持 base64 格式图片,支持网络路径图片。

使用本地背景图片需注意:
口小程序不支持在css中使用本地文件,包括本地的背景图和字体文件。需以base64方式方可使用
口为了方便开发,Taro提供了直接在样式文件中引用本地资源的方式,其原理是通过PostCSS的postcss-url插件将样式中本地资源引用转换成 Base64 格式,从而能正常加载。

P70 471--dav118 邂逅Taro-内置组件-页面生.

快速创建页面
taro create --name home

Taro有两种页面路由跳转方式:使用Navigator组件跳转、调用API跳转。
组件:Navigator
常用API:navigate、redirectTo、switchTab,navigateBack

P71 472--day118_邂逅Taro-内置组件-页面..

$intance = Taro.getCurrentInstance()

eventChanner 参考 只支持微信小程序

P72 473--day118_邂逅Taro-内置组件-页面生.

全局事件总线

为了支持跨组件、跨页面之间的通信,Taro 提供了全局事件总线:Taro.eventCenter
Taro.eventCenter.on(eventName,function)监听一个事件
Taro.eventCenter.trigger(eventName,data)触发一个事件
Taro.eventCenter.off(eventName,function)取消监听事件

注意事项:
口需先监听,再触发事件,比如:你在A界面触发,然后跳转到B页面后才监听是不行的。
口通常on和off是同时使用,可以避免多次重复监听
口适合页面返回传递参数、适合跨组件通讯,不适合界面跳转传递参数

P73 474--day118_邂逅Taro-内置组件-页面生.

coderwhy页面生命周期
Taro页面组件除了支持React组件生命周期方法外,还根据小程序的标准,额外支持以下页面生命周期:'
onLoad(options)在小程序环境中对应页面的 onLoad通过访问 options 参数或调用 getCurrentinstance().router,可以访问到页面路由参数
componentDidShow()在小程序环境中对应页面的 onShow
onReady()在小程序环境中对应页面的 onReady。
可以使用 createCanvasContext 或 createSelectorQuery 等 API 访问小程序渲染层 DOM 节点
componentDidHide()在小程序环境中对应页面的 onHide.
onUnload()在小程序环境中对应页面的 onUnload。
一般情况下建议使用React 的componentWillUnmount 生命周期处理页面卸载时的逻辑。
onPullDownRefresh()监听用户下拉动作。
onReachBottom()监听用户上拉触底事件。
更多生命周期函数:https://docs.taro.zone/docs/react-page

coderwhy Hooks 生命周期
Taro使用Hooks很简单,Taro专有Hooks,例如usePageScroll,useReachBottom,需从@tarojs/taro中引入
React框架自己的 Hooks,例如 useEffect,useState,从对应的框架引入。
更多的Hooks可查看官网:https://docs.taro.zone/docs/hooks React Honks

P74 475--day118_邂逅Taro-内置组件-页面生..
P75 01-上午
P76 02-下午


P77 476--day119_Taro自定义组件-Redux-卷..

coderwhy跨端兼容方案
Taro的设计初衷就是为了统一跨平台的开发方式,并且已经尽力通过运行时框架、组件、AP1去抹平多端差异,但是由于不同的平台之间还是存在一些无法消除的差异,所以为了更好的实现跨平台开发,Taro 中提供了如下的解决方案。
方案一:内置环境变量
Taro 在编译时提供了一些内置的环境变量来帮助用户做一些特殊处理。
通过这个变量来区分不同环境,从而使用不同的逻辑。在编译阶段,会移除不属于当前端的代码,只保留当前端的代码。内置环境变量虽然可以解决大部分跨端的问题,但是会让代码中存在很多逻辑判断的代码,影了响代码的可维护性,而且也让代码变得丑陋。
为了解决这种问题,Taro 提供了另外一种跨端开发的方式作为补充。
方案二:統一接口的多端文件
口开发者可以通过将文件修改成原文件名+端类型 的命名形式(端类型对应着 process.env.TARO_ENV的取值),不同端的文件代码对外保持统一接口,而引用的时候仍然是 import 原文件名的文件。
口Taro在编译时,会跟根据当前编译平台类型,精准加载对应端类型的文件,从而达到不同的端加载其对应端的文件。

P78 477--day119_Taro自定义组件-Redux-卷..

P79 478--day119_Taro自定义组件-Redux-卷..

coderwhy内置环境变量
内置环境变量(process.env.TARO_ENV),该环境变量可直接使用
o process.env.TARO_ENV,用于判断当前的编译平台类型,有效值为:weapp/swan/alipay/tt/qq/jd/h5/rn.
口通过这个变量来区分不同环境,从而使用不同的逻辑。

      {
        process.env.TARO_ENV==='h5'&& <Text>h5</Text>
      }
注意事项:不要解构 process.env来获取环境变量,请直接以完整书写的方式(process.env.TARO_ENV)来进行使用
index.h5.jsx  other(index.jsx)

coderwhy统一接口的多端文件
统一接口的多端文件这一跨平台兼容写法有如下三个使用要点:
1.不同端的对应文件一定要统一接口和调用方式。
2.引用文件的时候,只需写默认文件名,不用带文件后缀。
3.最好有一个平台无关的默认文件,这样在使用 TS 的时候也不会出现报错。

P80 479--dav119 Taro自定义组件-Redux-卷..

coderwhy认识Redux ToolkitRTK)
件
Redux Toolkit 是官方推荐的编写 Redux 逻辑的方法。
口以前我们在使用redux的时候,通常会将redux代码拆分在多个文件中,比如:constants,action,reducer等
கா
口 这种代码组织方式过于繁琐和麻烦,导致代码量过多,也不利于后期管理
□ Redux Toolkit 就是为了解决这种编码方式而诞生。
口并且以前的 createStore 方式已标为过时,而 Redux Toolkit 已成为官方推荐

安装Redux Toolkit:
npm install @reduxjs/toolkit react-redux

Redux Toolkit的核心API主要是如下几个:
口 configureStore:包装createStore以提供简化的配置选项和良好的默认值。
可自动组合 slice reducer v可添加其它Redux中间件,redux-thunk默认包含
v默认启用Redux DevTools Extension口 createSlice:接受切片名称、初始状态值和reducer函数的对象,并自动生成切片reducer,并带有相应的actions.
口 createAsyncThunk:接受一个动作类型字符串和一个返回承诺的函数,并生成一个pending/fulfilled/rejected基于该承诺分派动作类型的l thunk。简单理解就是专门用来创建异步Action

在函数式组件中可以使用react-redux提供的Hooks API连接、操作store.
口 useSelector 允许你使用 selector 函数从 store 中获取数据(root state)口useDispatch 返回 redux store 的 dispatch 引用。你可以使用它来 dispatch actions.
□ useStore 返回一个 store 引用,和 Provider 组件引用完全一致。

P81 480--day119_Taro自定义组件-Redux-卷...
P82 481--day119_Taro自定义组件-Redux-..


P83 482--day119_Taro自定义组件-Redux-卷…
P84 483--day119_Taro自定义组件-Redux-卷…
P85 484--day119_Taro自定义组件-Redux-卷…
P86 485--day119_Taro自定义组件-Redux-卷…
P87 486--day119_Taro自定义组件-Redux-卷…
P88 487--day119_Taro自定义组件-Redux-卷…
P89 488--day119_Taro自定义组件-Redux-卷….
P90 489--day119_Taro自定义组件-Redux-卷….

84

P91 490--day119_Taro自定义组件-Redux-卷..
P92 491--day119_Taro自定义组件-Redux-卷..
P93 492--day119_Taro自定义组件-Redux-卷.
P94 493--day119_Taro自定义组件-Redux-卷..
P95 494--day119_Taro自定义组件-Redux-卷..
P96 495--day119_Taro自定义组件-Redux-卷..
P97 496--day119_Taro自定义组件-Redux-卷..
P98 497--day119_Taro自定义组件-Redux-卷..

Taro 项目 url codercba.com:9060/juanpi/api/homeinfo

源代码 https://github.com/later-zc/hyJPApp/tree/main

posted @   KooTeam  阅读(126)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示