Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
m0_68066342
uni-app
提交
6f4602aa
U
uni-app
项目概览
m0_68066342
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
6f4602aa
编写于
4月 11, 2020
作者:
fxy060608
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'dev-quickapp' of
https://github.com/dcloudio/uni-app
into dev
上级
023e6934
f38477f9
变更
5
显示空白变更内容
内联
并排
Showing
5 changed file
with
215 addition
and
38 deletion
+215
-38
src/platforms/quickapp-vue/README.md
src/platforms/quickapp-vue/README.md
+72
-37
src/platforms/quickapp-vue/service/api/network/request.js
src/platforms/quickapp-vue/service/api/network/request.js
+134
-0
src/platforms/quickapp-vue/service/base-api.js
src/platforms/quickapp-vue/service/base-api.js
+2
-1
src/platforms/quickapp-vue/service/bridge.js
src/platforms/quickapp-vue/service/bridge.js
+4
-0
src/platforms/quickapp-vue/service/platform-api.js
src/platforms/quickapp-vue/service/platform-api.js
+3
-0
未找到文件。
src/platforms/quickapp-vue/README.md
浏览文件 @
6f4602aa
## 快应用适配教程
uni-app对快应用的适配,现状如下:
1.
在uni-app的cli版本中,提供了快应用的条件编译,在条件编译里,使用快应用的组件和api,可以直接运行和发布快应用。
2.
如果想使用uni-app的组件和api,在快应用里运行,需要一个中间适配层。这层目前DCloud官方完成一部分组件和api的适配,其余组件和api,计划交给社区开发者解决。
使用 uni-app 规范适配快应用
欢迎各位开发者一起参与完善,如下文档为开发者参与适配更多uni组件和API的教程。
### 参考文档
-
uni-app文档
[
https://uniapp.dcloud.io/
](
https://uniapp.dcloud.io/
)
-
快应用文档
[
https://doc.quickapp.cn/
](
https://doc.quickapp.cn/
)
-
[
快应用官网
](
https://doc.quickapp.cn/
)
,
[
使用 Vue开发快应用
](
https://doc.quickapp.cn/tutorial/others/vue.html
)
### 仓库介绍
[
uni-app
](
https://github.com/dcloudio/uni-app
)
uni-app 是一个使用 Vue.js 开发小程序、H5、App的统一前端框架。
[
hello quickapp
](
https://github.com/dcloudio/hello-quickapp-vue
)
测试uni-app快应用组件及 API,已包含 button 组件、剪切板、及平台调用示例
### 快速体验
1.
安装
[
快应用调试器
](
https://statres.quickapp.cn/quickapp/quickapp/201806/file/quickapp_debugger.apk
)
2.
打开快应用调试器,下载平台(快应用预览版:版本号1060)
3.
拉取
[
hello quickapp
](
https://github.com/dcloudio/hello-quickapp-vue
)
```
git clone https://github.com/dcloudio/hello-quickapp-vue.git
cd ./hello-quickapp-vue
yarn install
```
4.
编译快应用
`rpk`
```
npm run dev:quickapp-vue
```
5.
开启debug在线更新服务
```
npm run serve:quickapp-vue
```
6.
打开快应用调试器,扫码安装或右上角设置服务器地址(注意带上
`http://`
,关闭USB调试可看到扫码)
-
修改代码后,会主动通知调试器更新,或者手动点击在线更新(调试可以点击右下角开始调试)
### 开发
1.
Fork 仓库
`uni-app`
[
https://github.com/dcloudio/uni-app
](
https://github.com/dcloudio/uni-app
)
,切换到 dev-quickapp 分支
1.
Fork 仓库
`uni-app`
[
https://github.com/dcloudio/uni-app
](
https://github.com/dcloudio/uni-app
)
,切换到 dev-quickapp 分支
2.
使用 Vue 规范开发组件,参考
`Button`
组件及
`clipboard`
示例
2.
源码中有2个例子,分别是
`Button`
组件适配示例及
`clipboard`
API适配
示例
```
- button `src/platforms/quickapp-vue/view/components/button`
- clipboard `src/platforms/quickapp-vue/service/api/device/clipboard`
```
3.
编译 (输出目录
`packages/uni-quickapp-vue`
)
3.
编译 (输出目录
`packages/uni-quickapp-vue`
)
```
npm run build:quickapp-vue
```
手动替换
`uni-app`
编译输出目录
`packages/uni-quickapp-vue`
到
`hello quickapp`
工程
`node_modules/@dcloudio/uni-quickapp-vue`
, 可以考虑
`npm link`
#### `uni-app` 目录说明
```
...
...
@@ -41,44 +80,39 @@ src
│ └─button
```
### 测试
#### 搭建测试环境
1.
安装
[
快应用调试器
](
https://statres.quickapp.cn/quickapp/quickapp/201806/file/quickapp_debugger.apk
)
2.
打开快应用调试器,下载平台(快应用预览版:版本号1060)
#### 搭建测试工程
1.
测试工程
[
https://github.com/dcloudio/test-quickapp-vue
](
https://github.com/dcloudio/test-quickapp-vue
)
### 提交代码
使用
`pull request`
提交代码
使用 git clone(需要配置 git 命令行支持) 或下载 zip 解压
### 组件条件编译
```
git clone https://github.com/dcloudio/test-quickapp-vue.git
cd ./test-quickapp-vue
yarn install
<template>
<view>
<!-- #ifdef QUICKAPP-VUE -->
<button>Button</button>
<!-- #endif -->
</view>
</template>
```
2.
编译快应用
`rpk`
### 调用快应用平台 API
```
npm run dev:quickapp-vue
<script>
// 剪切板,注意权限配置
var clipboard = $app_require$("@app-module/system.clipboard");
</script>
```
3.
开启debug在线更新服务
### 权限配置
```
npm run serve:quickapp-vue
```
4.
打开快应用调试器,扫码安装或右上角设置服务器地址(注意带上
`http://`
,关闭USB调试可看到扫码)
5.
修改代码后,会主动通知调试器更新,或者手动点击在线更新(调试可以点击右下角开始调试)
src/manifest.json
6.
手动替换
`uni-app`
编译输出目录
`packages/uni-quickapp-vue`
到测试工程
`node_modules/@dcloudio/uni-quickapp-vue`
, 可以考虑
`npm link`
### 提交代码
使用
`pull request`
提交代码
"quickapp-vue": {
"icon": "static/logo.png",
"package": "com.example.demo",
"features": [{ "name": "system.clipboard" }] //剪切板权限
}
```
...
...
@@ -89,6 +123,7 @@ openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out ce
```
-
发布快应用时需要使用自己的证书,开发期间为debug证书
注意:
hello uni-app使用了px单位,在快应用里等同于rpx,故页面显示异常,非调试ui阶段,
可以自己修改manifest.json->quickapp->config->designWidth=自己手头设备的逻辑像素,如360
注:目前华为快应用还不支持这种开发方式,华为版的适配,uni-app官方会另行提供。
QQ交流群:148203425
src/platforms/quickapp-vue/service/api/network/request.js
0 → 100644
浏览文件 @
6f4602aa
import
{
publish
}
from
'
../../bridge
'
import
stream
from
'
@system.fetch
'
let
requestTaskId
=
0
const
requestTasks
=
{}
const
publishStateChange
=
res
=>
{
publish
(
'
onRequestTaskStateChange
'
,
res
)
delete
requestTasks
[
requestTaskId
]
}
export
function
createRequestTaskById
(
requestTaskId
,
{
url
,
data
,
header
,
method
=
'
GET
'
,
responseType
,
sslVerify
=
true
}
=
{})
{
let
abortTimeout
let
aborted
const
timeout
=
60000
if
(
timeout
)
{
abortTimeout
=
setTimeout
(()
=>
{
aborted
=
true
publishStateChange
({
requestTaskId
,
state
:
'
fail
'
,
statusCode
:
0
,
errMsg
:
'
timeout
'
})
},
(
timeout
+
100
))
}
const
options
=
{
method
,
url
:
url
.
trim
(),
header
,
type
:
responseType
,
timeout
:
timeout
||
6
e5
}
if
(
method
!==
'
GET
'
)
{
options
.
body
=
data
}
try
{
stream
.
fetch
({
...
options
,
success
:
({
code
,
data
,
headers
})
=>
{
console
.
log
(
data
)
if
(
aborted
)
{
return
}
if
(
abortTimeout
)
{
clearTimeout
(
abortTimeout
)
}
const
statusCode
=
code
if
(
statusCode
>
0
)
{
publishStateChange
({
requestTaskId
,
state
:
'
success
'
,
data
:
data
,
statusCode
,
header
:
headers
})
}
else
{
publishStateChange
({
requestTaskId
,
state
:
'
fail
'
,
statusCode
,
errMsg
:
'
abort statusCode:
'
+
statusCode
})
}
},
fail
:
(
data
,
code
)
=>
{
publishStateChange
({
requestTaskId
,
state
:
'
fail
'
,
statusCode
:
code
,
errMsg
:
'
abort statusCode:
'
+
code
})
}
})
requestTasks
[
requestTaskId
]
=
{
abort
()
{
aborted
=
true
if
(
abortTimeout
)
{
clearTimeout
(
abortTimeout
)
}
publishStateChange
({
requestTaskId
,
state
:
'
fail
'
,
statusCode
:
0
,
errMsg
:
'
abort
'
})
}
}
}
catch
(
e
)
{
return
{
requestTaskId
,
errMsg
:
'
createRequestTask:fail
'
}
}
return
{
requestTaskId
,
errMsg
:
'
createRequestTask:ok
'
}
}
export
function
createRequestTask
(
args
)
{
return
createRequestTaskById
(
++
requestTaskId
,
args
)
}
export
function
operateRequestTask
({
requestTaskId
,
operationType
}
=
{})
{
const
requestTask
=
requestTasks
[
requestTaskId
]
if
(
requestTask
&&
operationType
===
'
abort
'
)
{
requestTask
.
abort
()
return
{
errMsg
:
'
operateRequestTask:ok
'
}
}
return
{
errMsg
:
'
operateRequestTask:fail
'
}
}
src/platforms/quickapp-vue/service/base-api.js
浏览文件 @
6f4602aa
...
...
@@ -6,4 +6,5 @@ export * from 'uni-core/service/api/base/upx2px'
export
*
from
'
uni-core/service/api/context/audio
'
export
*
from
'
uni-core/service/api/context/background-audio
'
export
*
from
'
uni-core/service/api/network/request
'
// TODO
src/platforms/quickapp-vue/service/bridge.js
浏览文件 @
6f4602aa
export
function
invoke
(...
args
)
{
return
global
.
UniServiceJSBridge
.
invokeCallbackHandler
(...
args
)
}
export
function
publish
(
name
,
...
args
)
{
return
global
.
UniServiceJSBridge
.
emit
(
'
api.
'
+
name
,
...
args
)
}
src/platforms/quickapp-vue/service/platform-api.js
浏览文件 @
6f4602aa
...
...
@@ -4,3 +4,6 @@ export * from './api/route/redirect-to'
// device
export
*
from
'
./api/device/clipboard
'
// network
export
*
from
'
./api/network/request
'
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录