快应用开发快速上手及简明教程，一次违反常规的前端大厂面试经历总结框架原理真的深入某一部分具体的代码和实现方式时，要多注

总结

框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！ 开源分享：docs.qq.com/doc/DSmRnRG… }

}

console 仅支持 info, log, warn, error, debug 方法。

LESS 支持

安装 less、less-loader
在 style 标签上添加 lang="less" 属性即可

Async Function 支持

安装 babel-runtime
将 babel 注入项目全局

/* app.ux 文件（如果没有自己在 Common 里建一个）*/

目录结构与 manifest

目录结构

根目录下的 sign 文件上文已经提到过，其他文件目录不再赘述，因为前端项目大多如此，这里仅仅说 src 目录：

src

├── manifest.json # 配置文件

├── app.ux # 入口文件

├── Page1 # 页面1

│ ├── page1.ux

├── Page2 # 页面2

│ ├── page2.ux

└── Common # 公共页面和资源

├── ComponentA.ux

├── ComponentB.ux

└── xxx.png

manifest

manifest

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

| --- | --- | --- | --- | --- |

config

用于定义系统配置和全局数据。

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

| --- | --- | --- | --- |

router

用于定义页面的组成和相关配置信息，如果页面没有配置路由信息，则在编译打包时跳过。

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

| --- | --- | --- | --- |

router.page

用于定义单个页面路由信息。

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

| --- | --- | --- | --- | --- |

| path | String | /<页面名称> | 否 | 页面路径，例如“/user”,不填则默认为/<页面名称>。path必须唯一,不能和其他page的path相同。下面page的path因为缺失,会被设置为“/Index”："Index": {"component": "index"} |

router.page.filter

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

"filter": {

"": {

"uri": ""

}

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

| --- | --- | --- | --- | --- |

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

display

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

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

| --- | --- | --- | --- |

template 结构

/* 引入外部 CSS/LESS */ @import '../Common/global.less'; .container{ /* 定义样式，less 支持 */ }

开发基础

保留字

除了传统保留字，添加了 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, //是否在标题栏右上角显示菜单按钮 | 设置当前

}

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

| --- | --- | --- | --- |

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

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

| --- | --- | --- | --- |

| $set | Function | key: String

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

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

| --- | --- | --- | --- |

| $set | Function | key: String

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

| $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支付

以上接口错误列表如下：

- 201 用户拒绝

- 202 参数错误

- 204 超时

- 300 I/O错误

- 301 路径不存在

- 900 签名有误

- 901 包名有误

- 1000 应用未安装|下载失败|位置开关关闭

- 1001 url配置找不到|任务不存在

- 2001 内部错误

页面切换和参数传递

传递方法1. <a>标签配合 queryString 传递参数, 这个和前端一致。

跳转页面

传递方法2. 通过 router 接口：router.push(), router.replace(), 接受一个如下结构的对象，用法这个和前端 router 一致。

{

url: '/src/home/index.html',

params: { key: 2333 /* 需要传递的参数 */ }

}

接收方法：上述2种传递参数的方法，其接收方法一致，在接收参数页面的 protected 对象中获取即可（可设置默认值）