diff --git a/src/platforms/quickapp-vue/README.md b/src/platforms/quickapp-vue/README.md index f32707b19dc98fafd8f919b9e67ab94d225fb560..ebf67116b9176669315ce061aa7627c85f03d1c4 100644 --- a/src/platforms/quickapp-vue/README.md +++ b/src/platforms/quickapp-vue/README.md @@ -1,26 +1,65 @@ -## 快应用适配教程 +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 + ``` - -2.编译快应用 `rpk` +### 调用快应用平台 API ``` -npm run dev:quickapp-vue + ``` -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 diff --git a/src/platforms/quickapp-vue/service/api/network/request.js b/src/platforms/quickapp-vue/service/api/network/request.js new file mode 100644 index 0000000000000000000000000000000000000000..88b020604d193b8eda4ef5aed667a58535cb6754 --- /dev/null +++ b/src/platforms/quickapp-vue/service/api/network/request.js @@ -0,0 +1,134 @@ +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 || 6e5 + } + 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' + } +} diff --git a/src/platforms/quickapp-vue/service/base-api.js b/src/platforms/quickapp-vue/service/base-api.js index 302b7c293a35dc6f1b302b7ceb1bb457dbca49df..931a424fe2bbbb3a53367d24219ff9c585788225 100644 --- a/src/platforms/quickapp-vue/service/base-api.js +++ b/src/platforms/quickapp-vue/service/base-api.js @@ -5,5 +5,6 @@ export * from 'uni-core/service/api/base/interceptor' 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/context/background-audio' +export * from 'uni-core/service/api/network/request' // TODO diff --git a/src/platforms/quickapp-vue/service/bridge.js b/src/platforms/quickapp-vue/service/bridge.js index 3a2b6525075db0bc698fe2c4c448c5fb534d956d..ab4859ecea86cec55902f38ff2e83b638868dec4 100644 --- a/src/platforms/quickapp-vue/service/bridge.js +++ b/src/platforms/quickapp-vue/service/bridge.js @@ -1,3 +1,7 @@ export function invoke (...args) { return global.UniServiceJSBridge.invokeCallbackHandler(...args) } + +export function publish (name, ...args) { + return global.UniServiceJSBridge.emit('api.' + name, ...args) +} diff --git a/src/platforms/quickapp-vue/service/platform-api.js b/src/platforms/quickapp-vue/service/platform-api.js index a0a78e4d43f3fb95b5004969df1f162ae689ffd8..91a86ba4e00592a552694938271e11c016fb51fc 100644 --- a/src/platforms/quickapp-vue/service/platform-api.js +++ b/src/platforms/quickapp-vue/service/platform-api.js @@ -4,3 +4,6 @@ export * from './api/route/redirect-to' // device export * from './api/device/clipboard' + +// network +export * from './api/network/request'