快速熟悉vue3的语法
本文前提 — 特别熟悉vue2,有一定的基础。对比一下vue3有哪些新的语法,以便可以快速上手vue3
基础setupsetup是新增的生命周期,早于beforeCreate,setup里没有this,是组合式API的入口,只在组件初始化时执行一次。
123456789101112131415161718192021<script lang="ts"> import { reactive, toRefs } from 'vue' export default { setup(props,context){ const data = reactive({ message: 'hello' }) const change = () => { data.message = 'wor ...
鸿蒙app编译构建的配置文件解析(鸿蒙六)
build-profile.json5
build-profile.json5文件分为工程级与模块级,其中buildOption在工程级文件和模块级文件均可配置,其中相同字段以模块级的字段为准,不同字段模块级的buildOption配置会继承工程级配置。为什么记录这个,是在开发中涉及到混淆配置,所以记录下
工程级123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172{ "app": { // 签名 "signingConfigs": [ { "name": "release", "type": "HarmonyOS", "material&quo ...
前端如何支付
项目中做到鸿蒙app下单支付,记录一下支付流程
支付宝支付如果是app
调用后端接口,后端会生成一个订单号。
调用支付接口jspay,传入订单号,后端会返回一个支付链接。
app通过支付链接,跳转到支付宝支付页面。
回到app,判断已经点击过支付(模拟从支付宝回来),跳转支付结果页面,查询支付结果的接口,如果返回成功则展示支付成功信息。否则调3次,结果还是失败就展示失败信息。
如果是web
调用后端接口,后端会生成一个订单号。(同上)
调用支付接口,传入订单号,后端会返回一个支付链接。(同上)
把支付链接转成一个二维码,可供手机扫码。(用了一个插件qrcode.vue)
轮询查支付结果。当返回成功时,跳转成功页。否则一直轮询,因为不知道用户什么时候扫码。
微信支付微信与支付宝不同的是微信的支付链接是固定的,而支付宝的支付链接是变化的。
如果是web
调用后端接口,后端会生成一个订单号。
支付链接自己拼接好。微信的支付链接:https://www.beeselect.net/miniprogram?orderNo=&totalAmount=&goodsDesc ...
hsp和har的转换(鸿蒙五)
在一个项目中业务量比较大,会把一些功能分包,创建的时候分两种类型:share Library和static Library,前者创建出来的类型是hsp,后者是har。
开发过程中可能会遇到共享包转型场景,主要有hsp转har包和har转hsp包两种情况。共享包转换核心思路就是将配置文件统一,比如将hsp支持的配置文件转换为har的配置文件,主要涉及module.json5、hvigorfile.ts、(build-profile.json5文件),以及路由方式切换等场景。
hsp转har
在hsp下的module.json5中,把”type”: “shared”修改为”type”: “har”,删除”deliveryWithInstall”、”pages”字段。
然后再找到hsp下的hvigorfile.ts文件,将里面的hspTasks改为harTasks
由于har中不能声明page,需要先删除原hsp中module.json5的page声明;har不能用router.pushurl路由方式,需要修改原有router.pushurl路由为navigation(推荐)或命名路由跳转方 ...
我劝你不要乱写三元表达式
我劝你不要乱写三元表达式,你看看这容易读懂吗代码是写给人看的,不是写给机器看的,机器只喜欢01,你会写01吗?发现别的同事写的一段代码,实在是难以理解,如下:
12345678910item.renewalStartDate = item.orderStatus == 2 ? item.payType == 3 ? item.auditDate ? dayjs(item.auditDate).format('YYYY-MM-DD') : '' : item.payDate ? dayjs(item.payDate).format('YYYY-MM-DD') : '' : '';
你看看上面这段代码,它容易读懂吗?真是服了,写的啥啊?给上面的代码加一下小括号,应该可以协助理解,经过仔细研究,改写成这样:
123456789101112131415161718item.renewalStartDate = i ...
应用程序包(鸿蒙四)
HAP(Harmony Ability Package)一个HAP文件包含应用的所有内容,其文件后缀名为.hap。HAP包是由代码、资源、三方库及应用配置文件等打包生成的模块包。其主要分为两种类型:entry和feature。
entry:应用的主模块,作为应用的入口,提供了应用的基础功能。
feature:应用的动态特性模块,作为应用能力的扩展,可以根据用户的需求和设备类型进行选择性安装。
应用程序包可以只包含一个基础的entry包,也可以包含一个基础的entry包和多个功能性的feature包。
使用场景单HAP场景如果只包含UIAbility组件,无需使用ExtensionAbility组件,优先采用单HAP(即一个entry包)来实现应用开发。虽然一个HAP中可以包含一个或多个UIAbility组件,为了避免不必要的资源加载,推荐采用“一个UIAbility+多个页面”的方式。
多HAP场景如果应用的功能比较复杂,需要使用ExtensionAbility组件,可以采用多HAP(即一个entry包+多个feature包)来实现应用开发,每个HAP中包含一个UIAbility组 ...
Ability Kit(鸿蒙三)
Ability Kit 简介Ability Kit(程序框架服务)提供了应用程序开发和运行的应用模型,是系统为开发者提供的应用程序所需能力的抽象提炼,它提供了应用程序必备的组件和运行机制。
使用场景应用的多Module开发:应用可通过不同类型的Module(HAP、HAR、HSP)来实现应用的功能开发。其中,HAP用于实现应用的功能和特性,HAR与HSP用于实现代码和资源的共享。
应用内的交互:应用内的不同组件之间可以相互跳转。比如,在支付应用中,通过入口UIAbility组件启动收付款UIAbility组件。
应用间的交互:当前应用可以启动其他应用,来完成某个任务或操作。比如,启动浏览器应用来打开网站、启动文件应用来浏览或编辑文件等。
应用的跨设备流转:通过应用的跨端迁移和多端协同,获得更好的使用体验。比如,在平板上播放的视频,迁移到智慧屏继续播放。
应用模型应用模型是系统为开发者提供的应用程序所需能力的抽象提炼,它提供了应用程序必备的组件和运行机制。有了应用模型,开发者可以基于一套统一的模型进行应用开发,使应用开发更简单、高效。
应用模型的构成要素
应用组件
应用进程模型
应 ...
鸿蒙app的数据管理(鸿蒙二)
状态管理LocalStorageAppStoragePersistentStorageEnvironment
AppStorage: 应用全局的UI状态存储AppStorage是应用全局的UI状态存储,是和应用的进程绑定的,由UI框架在应用程序启动时创建,为应用程序UI状态属性提供中央存储。
@StorageProp当appstorage中的某个属性值被修改,可以将值传递过来,配合@watch监听可以修改其他值
12345@StorageProp(CACHE_USER_INFO) @Watch('onLoginChange') userInfo:string = ''onLoginChange() { this.nickName = JSON.parse(this.userInfo).nickName}
@StorageLink@StorageLink(key)是和AppStorage中key对应的属性建立双向数据同步:1.本地修改发生,该修改会被写回AppStorage中;2.AppStorage中的修改发生后,该修改 ...
arkts入门 鸿蒙入门(鸿蒙一)
写在前面:本人是一个web工程师,现在开始学习鸿蒙,所以可能会带有一些web的惯性思维,和从安卓开发转到鸿蒙的开发思维习惯会有差异。这是在沟通中发现的。安卓能转鸿蒙,web也能转鸿蒙,各有各的优势。本笔记会持续更新…
认识arkTSarkts是在ts上拓展了声明式UI、状态管理等相应能力的ts超集
基本语法装饰器
装饰类、结构、方法和变量,赋予其特殊含义。
@Component自定义组件,可重用的UI单元@Entry页面的默认入口组建,一个页面有且只有一个@entry@Builder自定义构建函数@BuilderParam引用@Builder函数@Styles定义组件重用样式@Extend定义扩展组件样式
—— 状态管理 ——@State装饰的变量值发生改变时会触发自定义组件的UI界面自动刷新@Link@Link装饰的变量和父组件构建双向同步关系的状态变量,父组件会接受来自@Link装饰的变量的修改的同步,父组件的更新也会同步给@Link装饰的变量。父组件传入子组件时,不能用this.aa,而要用$aa@Prop@Prop装饰的变量可以和父组件建立单向同步关系,@Prop装饰 ...
markdown语法
标题(一级标题对应h1)后面得有个空格
123456# 一级标题 对应h1## 二级标题 对应h2### 三级标题 对应h3#### 四级标题 对应h4##### 五级标题 对应h5###### 六级标题 对应h6
效果如下(数字序号1.1.1是我自己加的):
二级标题三级标题四级标题五级标题六级标题引用说明区块1> 此处是引用
此处是引用
代码块少量代码 单行使用<html></html>
大量代码 多行使用123<html> <body></body></html>
图片1![图片描述](url)
分隔符1---
1***
强调斜体1*斜体*
斜体
加粗1**加粗**
加粗
删除线1~~删除线~~
删除线
转义1\\
\ 转义
表格1234|姓名|年龄|性别|学号||:-:|:-:|:-:|:-:||张三|18|男|001|
姓名
年龄
性别
学号
张三
18
男
001
列表无序列表形式一:
123+ a+ b+ c
a
b
c
形式二:
123- a- b- c
...