2024年前端最新快应用开发快速上手及简明教程，建议细读-CSDN博客

本文链接：https://blog.csdn.net/2401_84618926/article/details/138516128

最后

前15.PNG

前16.PNG

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

声明页面可以处理某种请求，页面可以从$page获取打开页面的参数。filter的结构如下：

“filter”: {

“”: {

“uri”: “”

}

| 属性 | 类型 | 默认值 | 必填 | 描述 |

| — | — | — | — | — |

| uri | Pattern | - | 是 | 请求的数据的匹配规则。必须是正则表达式。如https?://.*可以匹配所有http和https类型的网址。 |

display

用于定义与UI显示相关的配置。

| 属性 | 类型 | 默认值 | 描述 |

| — | — | — | — |

template 结构

{{($item || {}).name}}

{{($item || {}).value}}

This is children of hint templete.

开发基础

保留字

除了传统保留字，添加了 show tid 等;

生命周期

页面生命周期

| 属性 | 类型 | 参数 | 返回值 | 描述 | 触发时机 |

| — | — | — | — | — | — |

A页面的生命周期接口的调用顺序：

打开页面A：onInit() -> onReady() -> onShow()
在页面A打开页面B：onHide()
从页面B返回页面A：onShow()
A页面返回：onBackPress() -> onHide() -> onDestroy()

应用生命周期

| 属性 | 类型 | 参数 | 返回值 | 描述 | 触发时机 |

| — | — | — | — | — | — |

预置对象

全局对象 (通过 this 访问)

| 的属性 | 类型 | 参数 | 描述 |

| — | — | — | — |

| $app | Object | - | 应用对象 |

* this.$page.setTitleBar 参数属性包括：

{

text: ‘Hello QuickApp’, //标题栏文字

textColor: ‘#ffff’, //文字颜色

backgroundColor: ‘#434343’, //背景颜色

backgroundOpacity: ‘0.8’, //背景透明度

menu: false, //是否在标题栏右上角显示菜单按钮 | 设置当前

}

| 属性 | 类型 | 参数 | 描述 |

| — | — | — | — |

| $e l e m e n t ∣ F u n c t i o n ∣ i d : St r in g ∣ 获取指定 i d 的组件 d o m 对象，如果没有指定 i d ，则返回根组件 d o m 对象用法： ‘ t hi s .$ element(‘xxx’)获取id为xxx的组件实例对象 this.$element()` 获取根组件实例对象 |

$forceUpdate | Function | 无 | 强制页面刷新

| 公共属性 | 类型 | 参数 | 描述 |

| — | — | — | — |

| $set | Function | key: String

value: Any | 添加数据属性，必须在onInit函数中使用，用法：this.$set('key',value) |

| $d e l e t e ∣ F u n c t i o n ∣ k ey : St r in g ∣ 删除数据属性，如果在 o n I ni t 函数中使用，用法： ‘ t hi s .$ delete(‘key’)` |

| 元素属性/方法 | 类型 | 参数 | 描述 |

| — | — | — | — |

| $set | Function | key: String

value: Any | 添加数据属性，用法：this.$vm('id').$set('key',value) |

| $d e l e t e ∣ F u n c t i o n ∣ k ey : St r in g ∣ 删除数据属性，用法： ‘ t hi s .$ vm(‘id’).$delete(‘key’)` |

| $on | Function | eventName: String

handler: Function | 在当前页面注册监听事件，可监听$emit()、 $dispatch()、 $broadcast()等触发的自定义事件，不能用于注册组件节点的事件响应 |

| $off | Function | eventName: String

handler: Function | 移除事件监听，参数 fnHandler 为可选，传递仅移除指定的响应函数，不传递则移除此事件的所有监听 |

* 注意，获取元素应该在页面已渲染后，如 onReady 事件中或 onReady 事件执行完以后。

页面设计

布局和尺寸

采用 border-box 模型且不支持 box-sizing 属性
设计稿1px / 设计稿基准宽度 = 框架样式1px / 项目配置基准宽度(项目配置基准宽度:/src/manifest.json 中 config.designWidth 的值，默认750)

可以使用内联样式、tag选择器、class选择器、id选择器来为组件设置样式
仅可以使用并列选择、后代选择器、子代选择器
支持@import引入外部样式、内联样式、行内样式
颜色值不支持缩写，伪类支持不完全（支持:disabled,:checked,:focus等)

通用

通用事件：click, longpress, focus, blur, appear(组件出现)，disappear(组件消失)，swipe(快速滑动，参数direction:[left|right|up|down])
通用属性： id, class, style, if, elif, else, for, show, disabled 等；
通用样式：width, height, padding, padding-, margin, margin-, border, border-style, border-width, border-color, border--color, border--width, border-radius, border---radius, background-color, background-size, background-image(仅本地图片), background-repeat, opacity, display(flex|none), flex, flex-grow, flex-shrick, flex-basis, position(none|fix), linear-gradient, repeating-inear-gradient, transform-origin, animation, animation-name, animation-delay, animation-duration, animation-iteration-count, animation-timing-function, animation-fill-mode, @key-frames(background-color|opacity|width|height|transform), transform(translate|translateX|translateY|rotate|rotateX|rotateY|scale|scaleX|scaleY)(以上*代表枚举[left|right|top|bottom], 具体和 css 一致。注：缩写形式和展开形式不要同时使用)

组件

默认支持通用事件、属性和样式

<text>、<a>、<span>、<label>组件为文本容器组件，其它组件不能直接放置文本内容

<div>: 和 HTML 一样

支持样式 flex-direction, flex-wrap, justify-content, align-items, align-content

<popup>: 气泡框

支持属性 target 和 placement
支持样式 mask-color
支持事件 visibilitychange
自组件只能是<text>

<refresh>: 下拉刷新

支持属性 offset 和 refreshing
支持样式 background-color 和 progress-color
支持事件 refresh

<richtext>: 富文本编辑器

支持属性 type(值为 html)
支持div样式, height 无效
不支持子组件

<stack>: 子组件排列方式为层叠排列，每个直接子组件按照先后顺序依次堆叠，覆盖前一个子组件

支持div样式

<swiper>: 轮播视图容器

支持属性 index, interval, autoplay 和 indicator(是否显示indicator)
支持样式 indicator-color, indicator-selected-color 和 indicator-size
支持事件 change
支持方法 swipeTo(index)

<tabs>: 选项卡

支持属性 index
支持事件 change
子组件仅支持最多一个和最多一个

<tab-bar>: 用来展示tab的标签区，子组件排列方式为横向排列

支持属性 mode(scrollable|fix)
支持样式 height
支持事件 visibilitychange

<tab-content>: 用来展示tab的内容区，高度默认充满tabs剩余空间，子组件排列方式为横向排列

支持属性 target 和 placement
支持样式 mask-color
支持事件 visibilitychange

<list>: 开发者在页面中实现长列表或者屏幕滚动等效果时，习惯使用div组件做循环遍历

子组件必须是 <list-item>;
支持属性 scrollpage，默认关闭，标志是否将顶部页面中非<list>的元素随<list>一起滚动。开启 scrollpage 会降低<list>渲染性能
组件的性能优化分为: 精简 DOM 层级、复用<list-item>、细粒度划分<list-item>、关闭 scrollpage 四个方面
支持 flex-direction 和 column
具有方法scrollTo(num)和事件scroll, scrollBottom, scrollTop

<list-item> list 的子元素

的子组件可以是任何标签或除<list>以外的组件
有一个属性 type，type 值相同的 <list-item> 后代 DOM 必须一模一样，如果不一样，请使用不同的 type 值。type 不能为空！
支持<div>样式和 column-span，不支持 position

<a>: 链接

支持属性 href
href 属性值可根据路由配置
href还支持http和https开头的网址，点击后会打开webview加载网页
href还可以通过“?param1=value1”的方式添加参数，参数可以在页面中通过this.param1的方式使用
子组件仅支持
仅支持 `text
支持 sms, tel, mailto
支持样式 lines, color, font-style, font-weight(normal|bold),text-decoration, text-align, line-height, text-overflow

<image>: 图片

支持属性 src 和 alt
支持样式 resize-mode(cover|contain|stretch|center)
不支持子组件

<process>: 进度条

支持属性 percent 和 type(horizontal|circular)
支持样式 color 和 stroke-width
支持事件 visibilitychange
不支持子组件

<rating>: 星级评分

支持属性 numstars(总数), stepsize(步长), indicator(是否可操作)和 rating(值)
支持样式 star-background, star-secondary, star-foreground（三种状态的图片）
支持事件 change，不支持click、longpress事件
不支持子组件

<span>: 格式化的文本

只能作为<text>与<a>的子组件
不支持 show 和 disabled 属性
支持样式 color, font-size, font-style, font-weight(normal|bold),text-decoration
不支持任何事件
不支持子组件

<text>: 文本内容写在标签内容区，支持转义字符”\”

仅支持<a>与<span>子组件
支持样式 lines, color, font-style, font-weight(normal|bold),text-decoration, text-align, line-height, text-overflow

<input>: 接收用户的输入

不支持子组件
支持属性 type(button|checkbox|radio|text|email|date|time|number|password), name, value, checked 和 placeholder
支持样式 color, placeholder-color, width, height 和 font-size
支持事件 change
支持方法 focus()

<label>: 为input、textarea组件定义标注

不支持子组件
支持属性 target
支持样式 lines, color, font-style, font-weight(normal|bold),text-decoration, text-align, line-height, text-overflow
不支持事件

<option>: <select>的子组件，用来展示下拉选择具体项目

不支持子组件
支持属性 value 和 selected
不支持事件

<picker>: 滚动选择器，目前支持三种选择器，普通选择器，日期选择器，时间选择器。默认为普通选择器。

支持子组件
支持属性 type(text|date|time), range, start, end, value 和 selected
不支持 click 事件, 支持 change 事件
支持方法 show()

<select>: 下拉菜单

仅支持子组件
不支持 click 事件, 支持 change 事件

<slider>: 滑动选择器

不支持子组件
支持属性 min, max, value 和 step
支持样式 color, selected-color, padding 仅支持 left 和 right
支持事件 change

<switch>: 开关选择

不支持子组件
支持属性 checked
支持事件 change

<textarea>: 接收用户的输入

不支持子组件
支持属性 placeholder
支持样式 color, placeholder-color 和 font-size
支持事件 change
支持方法 focus()

<video>: 视频播放器

支持属性 src, poster 和 autoplay
支持事件 prepared, start, pause, finish, error, seeking, seeked, timeupdate 和 fullscreenchange
支持方法 start(), pause(), setCurrentTime(seconds), requestFullscreen() 和 exitFullscreen()

<web>: 用于显示在线的html页面

必须声明”打开网页”接口，否则会提示缺乏权限。
支持属性 src, src 值为 Deeplink, 参考下文 Deeplink 部分
支持样式 mask-color
支持事件 titlereceive, pagestart, pagefinish 和 error
支持方法 reload(), forward(), back(), canForward(callback), canBack(callback)

接口

以下接口通过 import app from '@system.app' 或 require('@system.app')方式引入

接口申明在 manifest 文件的 features 中，除了@system.app使用前以外都需要申明。

@system.app

getInfo(), 得到应用名称、版本名称、版本号、log级别，三级来源

@system.share

内置分享，接口声明：{"name": "system.share"}
share({type: MIME Type, data:String/URL/FileList, success, fail, cancel, complete}): 分享调用
第三方分享，接口声明：{"name": "service.share","params": {"appSign": "abcdefg...","qqKey":"1234567","wxKey":"wx1234","sinaKey":"1234"}}
manifest 参数说明: appSign 签名; qqKey QQ后台ID; wxKey: 微信后台ID, sinaKey 新浪后台ID
getProvider(): 获取厂商信息
share({shareType:int, title, summary, targetUrl,imagePath, mediaUrl, success, fail, cancel, complete})

其中 shareType 默认图文０,纯文字1,纯图片2,音乐３,视频４

cancel

@system.router

接口声明：{"name": "system.router"}
push({url, params:Object}): 跳转url
replace({url, params:Object}): 跳转url, 后退不会来
back(): 后退
clear(): 清空历史栈
getLength(): 获取历史栈长度
getState(): 获取当然页面位置，名称，路径

@system.prompt

接口声明：{"name": "system.prompt"}
showToast({message, duratuon:(0 or 1)}): 显示吐司
showDialog({title:, message:, buttons:[{text,color}], success({index}), fail, cancel, complete}): 显示对话框
showContextMenu({itemList:String[], itemColor:HexColor, success, fail, cancel, complete}): 显示上下文菜单

@system.notification

接口声明：{"name": "system.notification"}
show({contentTitle, contentText, clickAction:{url}}): 显示通知

@system.vibrator

接口声明：{"name": "system.vibrator"}
vibrate(): 震动1s

@system.webview

接口声明：{"name": "system.webview"}
loadUrl({url}): 通过 webview 加载 url
在webview打开的网页中可以使用的api: system.go(path): url 跳转

@system.request

接口声明：{"name": "system.request"}
upload({url, header:Object, method(POST|GET), files:{filename,name,url,type}[], data:{name,value}[], success({code,data,headers}), fail, complete}): 上传
download({url, header:Object, success({token}), fail, complete}): 下载
onDownloadComplete({token, success({url}), fail({code}), complete}): 监听下载任务

@system.fetch

接口声明：{"name": "system.fetch"}
fetch({url, header:Object, method(POST|GET), files:{filename,name,url,type}[], data:{name,value}[], success({code,data,headers}), fail, complete}): 发起请求

@system.storage

接口声明：{"name": "system.storage"}
get({key, default, success({data}), fail, complete}): 获取值
set({key, value, success, fail, complete}): 存储值
clear({success, fail, complete}): 清空数据
delete({key, success, fail, complete}): 删除数据

@system.file

接口声明：{"name": "system.file"}
move({srcUri, dstUri, success, fail({code}), complete}): 移动文件
copy({srcUri, dstUri, success, fail({code}), complete}): 复制文件
list({uri, success(fileList:{uil,list,lastModifiedTime}[]), fail({code}), complete}): 获取目录下文件列表
get({uri, success({uil,list,lastModifiedTime}), fail({code}), complete}): 获取文件信息
delete({uri, success, fail(code**), complete}): 获取文件信息

@system.barcode (需要用户授权)

接口声明：{"name": "system.barcode"}
scan({success({result}), fail(code:201用户拒绝), cancel, complete}): 扫描二维码

@system.sensor

接口声明：{"name": "system.sensor"}
subscribeAccelerometer({callback(x,y,c)}): 获取重力感应数据
unsubscribeAccelerometer(): 停止获取重力感应数据
subscribeCompass({callback(direction)}): 获取罗盘数据
unsubscribeCompass(): 停止获取罗盘数据
subscribeProximity({callback(distance)}): 获取距离感应数据
unsubscribeProximity(): 停止获取距离感应数据
subscribeLight({callback(intensity)}): 获取光线感应数据
unsubscribeLight(): 停止获取光线感应数据

@system.clipboard

接口声明：{"name": "system.clipboard"}
set({text, success, fail, complete}): 写入
get({success({text}), fail, complete}): 读取

@system.geolocation (需要用户授权)

接口声明：{"name": "system.geolocation"}
getLocation({timeout, success({longitude, latitude}), fail, complete}): 获取地理位置
subscribe({callback(longitude, latitude), fail}): 监听用户位置
unsubscribe(): 取消监听用户位置

@system.shortcut (需要用户授权)

接口声明：{"name": "system.shortcut"}
hasInstalled({success, fail, complete}): 是否已创建桌面图标
install({success, fail, complete}): 创建桌面图标

@system.calandar (需要用户授权)

接口声明：{"name": "system.calandar"}
insert({title, description, startDate:number, endDate:number, timezone:string, allDay:boolean是否整天, rrule:string重复规则, remindMinutes:number[]提前提醒时间, organizer: string, success, fail, cancel}): 插入日历事件

@system.network

接口声明：{"name": "system.network"}
getType({success(metered是否按流量计费, type网络类型), fail, complete}): 获取网络类型
subscribe({callback(metered, type), fail}): 监听网络情况
unsubscribe(): 取消监听网络情况

@system.device (需要用户授权)

接口声明：{"name": "system.device"}
getInfo({success({brand, manufacturer, model, product, osType, osVersionName, osVersionCode, platformVersionName, platformVersionCode, language, region, screenWidth, screenHeight}), fail, complete}): 获取设备基本信息
getId({type(device|mac|user|advertising)[], success({device, mac, user, advertising}), fail, complete}): 获取设备标识
getDeviceId({success({deviceId}), fail, complete}): 获取设备ID
getUserId({success({userId}), fail, complete}): 获取用户ID
getAdvertisingId({success({advertisingId}), fail, complete}): 获取广告ID
getTotalStorage({success({totalStorage}), fail, complete}): 获取总容量
getAvailableStorage({success({availableStorage}), fail, complete}): 获取可用容量
getCpuInfo({success({cpuInfo}), fail, complete}): 获取cpu信息

@system.brightness

接口声明：{"name": "system.brightness"}
getValue({success({value}), fail, complete}): 获取屏幕亮度
setValue({value, success(value:0手动;1自动), fail, complete}): 设置屏幕亮度
getMode({success(value:0手动;1自动), fail, complete}): 获取屏幕亮度模式
setMode({value, success, fail, complete}): 设置屏幕亮度模式 1. 接口声明：{"name": "system.volume"}

@system.volume

接口声明：{"name": "system.volume"}
getMediaValue({success(value:0到1), fail, complete}): 获取音量
setMediaValue({value, success, fail, complete}): 设置音量

@system.battary

接口声明：{"name": "system.battary"}
getStatus({success(charging, level:0到1), fail, complete}): 获取当前电池状态

@system.package

接口声明：{"name": "system.package"}
hasInstalled({package包名, success(result:boolean), fail, complete}): 判断是否安装了某个应用
install({package, success(result:boolean), fail, complete}): 安装应用
利用路由中的 push 操作打开应用

@system.record (需要用户授权)

接口声明：{"name": "system.record"}
start({success({url}), fail, complete}): 开始录音
record.stop(): 停止录音

@system.cipher

接口声明：{"name": "system.cipher"}
rsa({action:encrypt|decrypt, text, key加密为公钥|解密为私钥, transformation补充项，success({text}), fail, complete}): rsa 加密解密

@system.media (需要用户授权)

接口声明：{"name": "system.media"}
takePhoto({success({uri}), fail, complete, cancel}): 拍照
takeVideo({success({uri}), fail, complete, cancel}): 录像
pickImage({success({uri}), fail, complete, cancel}): 选择图片
pickVideo({success({uri}), fail, complete, cancel}): 选择视频

@system.image

接口声明：{"name": "system.image"}
getImageInfo({uri, success({uri, width, height, size}), fail, complete, cancel}): 获取图片基础信息
compressImage({uri, quality:1到100, ratio:number缩放比, format:图片格式, success({uri, width, height, size}), fail, complete, cancel}): 压缩图片
applyOperations({uri, operations:Object[](如下), quality, format, success({uri}), fail, complete, cancel}}): 对图片按顺序执行编辑操作

剪裁: {action: 'crop', x, y, width, height}
缩放: {action: 'scale', scaleX, scaleY}
旋转: {action: 'rotate', degree}

editImage({uri, success({uri}), fail, complete, cancel}): 使用编辑器编辑图片

@system.audio

接口声明：{"name": "system.audio"}
play(): 播放
pause(): 暂停
属性: src, currentTime, duration, autoplay, loop, volume, muted
事件: play, pause, loadeddata, ended, durationchange, error, timeupdate

@system.push

接口声明：{"name": "system.push"}
getProvider(): 获取服务提供商
subscribe({success({regId}), fail, complete}): 订阅push
unsubscribe(): 取消订阅push
on({callback(messageId, data)}): 添加push事件回调
off(): 移除push事件回调

@system.pay

接口声明：{"name": "system.pay"}
getProvider(): 获取服务提供商
pay({orderInfo:String, success({code, message, result}), fail({code, message}), complete}): 付款

@system.stats

接口声明：{"name": "system.stats"}
getProvider(): 获取服务提供商
recordCountEvent({category, key, map}): 计数类型事件
recordCalculateEvent({category, key, value, map}): 计算类型事件

@system.account

接口声明：{"name": "system.account"}
getProvider(): 获取服务提供商
authorize({type:string(code|token), redirectUri, scope, state, success({state, code, accessToken, tokenType, expiresIn, scope}), fail, complete): 认证
getProfile({token, success({openid, id, unionid, nickname, avatar}), fail, complete}): 获取用户认证信息

@system.alipay

接口声明：{"name": "system.alipay"}
pay({orderInfo:string, callback}): 支付
支付宝支付细节，请查看请求参数说明文档

@system.wxpay

接口声明：{"name": "service.wxpay", "params": {"package": "com.your.package", "sign": "abcdefg", "url": "http://your.domain/page"}}
两种方式的 manifest 配置：

app 原生：package: 包名，sign: 签名
web 方式：url：H5 url

getType(): 返回调用方式(none|APP|MWEB)
pay({prepayid, extra, success({prepayid,final_url}), fail(code**), complete}): 支付

extra app 版参数如下

app_id: 微信支付订单中的app_id
partner_id: 微信支付订单中的partner_id
package_value: 微信支付订单中的package_value
nonce_str: 微信支付订单中的nonce_str
time_stamp: 微信支付订单中的time_stamp
order_sign: 微信支付订单中的order_sign

extra app 版参数如下

mweb_url: 在微信的支付服务器下单以后，微信返回的 MWEB_URL，在CP用于微信支付的h5页面中，直接将mweb_url取出后跳转过去即可，但这个做法并不是强制的，您也可以通过其他自定义键值向您自己的服务器换取MWEB_URL
custome_key: 其他的自定义键值，cp可以根据需要增加其他自己认为需要的键名和键值
微信支付细节,请参考微信网页支付和微信app支付