Commit e1ef1e6f authored by cwuyiqing's avatar cwuyiqing
Browse files

update: rm uni app template

parent b4d2141c
Showing with 21 additions and 826 deletions
+21 -826
......@@ -14,29 +14,28 @@ Github 开源地址:[https://github.com/TencentCloudBase/cloudbase-framework](
欢迎大家贡献应用模板:[https://github.com/TencentCloudBase/cloudbase-framework/blob/master/doc/app.md](https://github.com/TencentCloudBase/cloudbase-framework/blob/master/doc/app.md)
| | 名称 | 应用示例介绍 | 基于模板创建项目 |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------------------------------------ | ------------------------------------------- |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/vue"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/9892a3212a49bdd65ba499f2da62ac23.png"></a> | Vue 应用 | Vue + 云函数 + 静态网站部署 | `cloudbase init --template vue` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/react-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/d94d993269048beb4827b2612ed53692.png"></a> | React 应用 | React + 云函数 + 静态网站部署 | `cloudbase init --template react-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/react-custom"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/dbc204f8fc25387645aea9282c6d1b99.png"></a> | React Custom CRA | React + 云函数 + 静态网站部署 | `cloudbase init --template react-custom` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/nuxt-spa"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/4a2bb546f6d59133976dccd1ac962378.png"></a> | Nuxt SPA 应用 | Nuxt SPA + 云函数 + 静态网站部署 | `cloudbase init --template nuxt-spa` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/nuxt-ssr"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/338ce75aaf22e407a02d8b5f096212d0.png"></a> | Nuxt SSR 应用 | Nuxt SSR + 服务端部署 + 静态网站部署 | `cloudbase init --template nuxt-ssr` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/koa-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/bc7e3f2989fcf65b2fe8ad37ea3f69a9.png"></a> | Koa 应用 | Koa + 服务端部署 | `cloudbase init --template koa-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/express-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/ce7fa0617399ac5e7f7bdbef5efb29d9.png"></a> | Express 应用 | Express + 服务端部署 | `cloudbase init --template express-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/nest-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/79fdd61df8b2154ccaa479301fcc57a6.png"> | Nest 应用 | Nest + 服务端部署 | `cloudbase init --template nest-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/egg-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/9b26c345d8180b1003954d5a7b28f41f.png"> | Egg 应用 | Egg + 服务端部署 | `cloudbase init --template egg-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/node-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/7b50431d8cef29d9ebb82c4ff2e6032c.png"></a> | Node.js 云函数示例 | Node.js 云函数 | `cloudbase init --template node-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/php-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/63782b30178cf5666fdd1e15501aba9b.png"></a> | PHP 云函数示例 | PHP 云函数 | `cloudbase init --template php-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/java-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/20510a20be999a59458204afcf0fe205.png"></a> | Java 云函数示例 | Java 云函数 | `cloudbase init --template java-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/vuepress"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/230c115bee4300384fa557710daa2928.jpg"></a> | VuePresss 网站应用 | VuePresss + 静态网站部署 | `cloudbase init --template vuepress` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/node"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/82da2591cd2aed610d7f91f9dd881930.png"></a> | Node.js 云托管应用 | Node.js + 云托管部署 | `cloudbase init --template node` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/dart"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/2d1c438165480b9a7937e3b81c4873e3.jpg"></a> | Aqueduct (Dart Server) 云托管应用 | Aqueduct (Dart Server) + 云托管部署 | `cloudbase init --template dart` |
| | 名称 | 应用示例介绍 | 基于模板创建项目 |
| ------------------------------------------------------------ | --------------------------------- | ------------------------------------ | ------------------------------------------- |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/vue"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/9892a3212a49bdd65ba499f2da62ac23.png"></a> | Vue 应用 | Vue + 云函数 + 静态网站部署 | `cloudbase init --template vue` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/react-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/d94d993269048beb4827b2612ed53692.png"></a> | React 应用 | React + 云函数 + 静态网站部署 | `cloudbase init --template react-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/react-custom"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/dbc204f8fc25387645aea9282c6d1b99.png"></a> | React Custom CRA | React + 云函数 + 静态网站部署 | `cloudbase init --template react-custom` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/nuxt-spa"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/4a2bb546f6d59133976dccd1ac962378.png"></a> | Nuxt SPA 应用 | Nuxt SPA + 云函数 + 静态网站部署 | `cloudbase init --template nuxt-spa` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/nuxt-ssr"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/338ce75aaf22e407a02d8b5f096212d0.png"></a> | Nuxt SSR 应用 | Nuxt SSR + 服务端部署 + 静态网站部署 | `cloudbase init --template nuxt-ssr` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/koa-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/bc7e3f2989fcf65b2fe8ad37ea3f69a9.png"></a> | Koa 应用 | Koa + 服务端部署 | `cloudbase init --template koa-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/express-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/ce7fa0617399ac5e7f7bdbef5efb29d9.png"></a> | Express 应用 | Express + 服务端部署 | `cloudbase init --template express-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/nest-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/79fdd61df8b2154ccaa479301fcc57a6.png"> | Nest 应用 | Nest + 服务端部署 | `cloudbase init --template nest-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/egg-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/9b26c345d8180b1003954d5a7b28f41f.png"> | Egg 应用 | Egg + 服务端部署 | `cloudbase init --template egg-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/node-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/7b50431d8cef29d9ebb82c4ff2e6032c.png"></a> | Node.js 云函数示例 | Node.js 云函数 | `cloudbase init --template node-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/php-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/63782b30178cf5666fdd1e15501aba9b.png"></a> | PHP 云函数示例 | PHP 云函数 | `cloudbase init --template php-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/java-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/20510a20be999a59458204afcf0fe205.png"></a> | Java 云函数示例 | Java 云函数 | `cloudbase init --template java-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/vuepress"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/230c115bee4300384fa557710daa2928.jpg"></a> | VuePresss 网站应用 | VuePresss + 静态网站部署 | `cloudbase init --template vuepress` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/node"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/82da2591cd2aed610d7f91f9dd881930.png"></a> | Node.js 云托管应用 | Node.js + 云托管部署 | `cloudbase init --template node` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/dart"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/2d1c438165480b9a7937e3b81c4873e3.jpg"></a> | Aqueduct (Dart Server) 云托管应用 | Aqueduct (Dart Server) + 云托管部署 | `cloudbase init --template dart` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/omi-starter"><img width="200" style="max-width:none;" src="https://user-images.githubusercontent.com/11473889/88882843-4f2b7780-d265-11ea-8fcf-49cb297240c7.png"></a> | Omi 应用 | Omi + 云函数 + 静态网站部署 | `cloudbase init --template omi-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/uni-app-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/721bfc09d7e0a2ccd49b40ac6287f8ac.png"></a> | uni-app 应用 | uni-app + 云函数 + 静态网站部署 | `cloudbase init --template uni-app-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/taro-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/625bbdc0b37744aae33aff46b8aeeeb8.png"></a> | taro 应用 | taro + 云函数 + 静态网站部署 | `cloudbase init --template taro-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/deno"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/408157ecaba08c2594dc953b4c690aec.jpg"></a> | deno 云托管应用 | deno + 云托管部署 | `cloudbase init --template deno` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/next-ssr"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/918830a5ad3321fd0524eaef4c0e4c1e.png"></a> | Next SSR 应用 | Next SSR + 服务端部署 + 静态网站部署 | `cloudbase init --template next-ssr` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/go-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/10dd8964ac25c3f40dc229a00664d914.jpg"></a> | Go 云函数 | Go + 云函数 | `cloudbase init --template go-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/taro-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/625bbdc0b37744aae33aff46b8aeeeb8.png"></a> | taro 应用 | taro + 云函数 + 静态网站部署 | `cloudbase init --template taro-starter` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/deno"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/408157ecaba08c2594dc953b4c690aec.jpg"></a> | deno 云托管应用 | deno + 云托管部署 | `cloudbase init --template deno` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/next-ssr"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/918830a5ad3321fd0524eaef4c0e4c1e.png"></a> | Next SSR 应用 | Next SSR + 服务端部署 + 静态网站部署 | `cloudbase init --template next-ssr` |
| <a href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/go-starter"><img width="200" style="max-width:none;" src="https://main.qcloudimg.com/raw/10dd8964ac25c3f40dc229a00664d914.jpg"></a> | Go 云函数 | Go + 云函数 | `cloudbase init --template go-starter` |
## CloudBase Framework 核心贡献者计划
......
.DS_Store
node_modules/
unpackage/
dist/
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.project
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
<a href="https://github.com/TencentCloudBase/cloudbase-templates"><img src="https://main.qcloudimg.com/raw/721bfc09d7e0a2ccd49b40ac6287f8ac.png"></a>
# uni-app 多端全栈应用示例
这个目录是基于云开发的一个 [uni-app](https://uniapp.dcloud.io/) 全栈应用示例,包含 uni-app + 云函数 + 静态网站部署,可以基于 **[CloudBase Framework](https://github.com/TencentCloudBase/cloudbase-framework)** 框架将项目一键部署到云开发环境
## 线上演示地址
[https://framework-1258016615.tcloudbaseapp.com/uni-app/](https://framework-1258016615.tcloudbaseapp.com/uni-app/)
点击下方按钮使用 [CloudBase Framework](https://github.com/TencentCloudBase/cloudbase-framework) 可以在云端一键部署本项目到自己的云开发账号上。
[![](https://main.qcloudimg.com/raw/67f5a389f1ac6f3b4d04c7256438e44f.svg)](https://console.cloud.tencent.com/tcb/env/index?action=CreateAndDeployCloudBaseProject&appUrl=https%3A%2F%2Fgithub.com%2FTencentCloudBase%2Fcloudbase-templates&workDir=uni-app-starter&appName=uni-app-starter)
## 部署一个 uni-app 多端全栈应用
### 创建云开发环境
#### 云开发环境说明
这里有个地方需要注意一下,如果要使用小程序云开的能力的话,务必要在小程序开发者工具里面进行创建环境,在腾讯云官网创建的环境暂时还无法和小程序进行绑定。
![](https://main.qcloudimg.com/raw/ee0607b57358a6148aca966810dc88e3.png)
#### 多端共用云环境
如果要 H5 和小程序使用同一个云环境,在小程序云开发创建的环境一定要改成按量付费模式,这样才能开启静态网站托管的服务,才能部署 H5。
![](https://main.qcloudimg.com/raw/beac976f00336d8c315bd6df7ffef9f0.png)
### 步骤一. 准备工作
具体步骤请参照 [准备云开发环境和 CloudBase CLI 命令工具](https://github.com/TencentCloudBase/cloudbase-framework/blob/master/CLI_GUIDE.md)
### 步骤二. 初始化应用示例
在命令行执行
```bash
cloudbase init --template uni-app-starter
```
### 步骤三. 一键部署
#### H5 部署
进入到项目目录,在命令行执行
```bash
cloudbase framework:deploy
```
#### 小程序部署
在使用 CI 之前,需要先前往 mp 平台下载上传密钥,具体操作方式,可以[点击前往](https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html)
进入到项目目录,在命令行执行
```bash
// 部署开发版,默认生成二维码
npm run wxci:preview
// 部署体验版,直接上传到mp平台
npm run wxci:upload
```
## 开发命令及配置
### 本地开发
```bash
npm run dev
```
### 上线部署
```bash
npm run deploy
```
### Lint
```bash
npm run lint
```
### CloudBase Framework 相关开发配置
查看 [CloudBase Framework 配置](https://github.com/TencentCloudBase/cloudbase-framework).
### uni-app 相关开发配置
查看 [Configuration Reference](https://uniapp.dcloud.io/collocation/pages).
const plugins = []
if (process.env.UNI_OPT_TREESHAKINGNG) {
plugins.push(require('@dcloudio/vue-cli-plugin-uni-optimize/packages/babel-plugin-uni-api/index.js'))
}
if (
(
process.env.UNI_PLATFORM === 'app-plus' &&
process.env.UNI_USING_V8
) ||
(
process.env.UNI_PLATFORM === 'h5' &&
process.env.UNI_H5_BROWSER === 'builtin'
)
) {
const path = require('path')
const isWin = /^win/.test(process.platform)
const normalizePath = path => (isWin ? path.replace(/\\/g, '/') : path)
const input = normalizePath(process.env.UNI_INPUT_DIR)
try {
plugins.push([
require('@dcloudio/vue-cli-plugin-hbuilderx/packages/babel-plugin-console'),
{
file (file) {
file = normalizePath(file)
if (file.indexOf(input) === 0) {
return path.relative(input, file)
}
return false
}
}
])
} catch (e) {}
}
process.UNI_LIBRARIES = process.UNI_LIBRARIES || ['@dcloudio/uni-ui']
process.UNI_LIBRARIES.forEach(libraryName => {
plugins.push([
'import',
{
'libraryName': libraryName,
'customName': (name) => {
return `${libraryName}/lib/${name}/${name}`
}
}
])
})
module.exports = {
presets: [
[
'@vue/app',
{
modules: 'commonjs',
useBuiltIns: process.env.UNI_PLATFORM === 'h5' ? 'usage' : 'entry'
}
]
],
plugins
}
{
"envId": "{{envId}}",
"$schema": "https://framework-1258016615.tcloudbaseapp.com/schema/latest.json",
"functionRoot": "cloudfunctions",
"framework": {
"name": "uni-app",
"plugins": {
"client": {
"use": "@cloudbase/framework-plugin-website",
"inputs": {
"buildCommand": "npm run build",
"outputPath": "dist/build/h5",
"cloudPath": "/uni-app"
}
},
"server": {
"use": "@cloudbase/framework-plugin-function",
"inputs": {
"functionRootPath": "cloudfunctions",
"functions": [{
"name": "uni-app-echo",
"timeout": 5,
"envVariables": {},
"runtime": "Nodejs10.15",
"memory": 128
}]
}
}
}
}
}
const cloud = require("@cloudbase/node-sdk");
exports.main = async (event, context) => {
const app = cloud.init({
env: cloud.SYMBOL_CURRENT_ENV,
});
// todo
// your code here
return {
event,
};
};
{
"name": "helloworld",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {},
"author": "",
"license": "ISC",
"dependencies": {
"@cloudbase/node-sdk": "1.1.1"
}
}
{
"name": "uniapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "npm run dev:h5",
"build": "npm run build:h5",
"deploy:client": "cloudbase framework:deploy client",
"deploy:server": "cloudbase framework:deploy server",
"build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
"build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
"build:mp-360": "cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",
"build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
"build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
"build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
"build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
"build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
"build:quickapp-native": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build",
"build:quickapp-webview": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build",
"build:quickapp-webview-huawei": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build",
"build:quickapp-webview-union": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build",
"dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
"dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
"dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
"dev:mp-360": "cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch",
"dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
"dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
"dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
"dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
"dev:quickapp-native": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch",
"dev:quickapp-webview": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch",
"dev:quickapp-webview-huawei": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch",
"dev:quickapp-webview-union": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch",
"info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
"serve:quickapp-native": "node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js",
"test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
"test:h5": "cross-env UNI_PLATFORM=h5 jest -i",
"test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",
"test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i",
"test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i",
"wxci:preview": "node wx_ci.js preview",
"wxci:upload": "node wx_ci.js upload"
},
"dependencies": {
"@cloudbase/vue-provider": "^0.3.0",
"@dcloudio/uni-app-plus": "^2.0.0-28320200727001",
"@dcloudio/uni-h5": "^2.0.0-28320200727001",
"@dcloudio/uni-helper-json": "*",
"@dcloudio/uni-mp-360": "^2.0.0-28320200727001",
"@dcloudio/uni-mp-alipay": "^2.0.0-28320200727001",
"@dcloudio/uni-mp-baidu": "^2.0.0-28320200727001",
"@dcloudio/uni-mp-qq": "^2.0.0-28320200727001",
"@dcloudio/uni-mp-toutiao": "^2.0.0-28320200727001",
"@dcloudio/uni-mp-weixin": "^2.0.0-28320200727001",
"@dcloudio/uni-quickapp-native": "^2.0.0-28320200727001",
"@dcloudio/uni-quickapp-webview": "^2.0.0-28320200727001",
"@dcloudio/uni-stat": "^2.0.0-28320200727001",
"core-js": "^3.6.5",
"flyio": "^0.6.2",
"regenerator-runtime": "^0.12.1",
"vue": "^2.6.11",
"vuex": "^3.2.0"
},
"devDependencies": {
"@dcloudio/types": "*",
"@dcloudio/uni-automator": "^2.0.0-28320200727001",
"@dcloudio/uni-cli-shared": "^2.0.0-28320200727001",
"@dcloudio/uni-migration": "^2.0.0-28320200727001",
"@dcloudio/uni-template-compiler": "^2.0.0-28320200727001",
"@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.0-28320200727001",
"@dcloudio/vue-cli-plugin-uni": "^2.0.0-28320200727001",
"@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.0-28320200727001",
"@dcloudio/webpack-uni-mp-loader": "^2.0.0-28320200727001",
"@dcloudio/webpack-uni-pages-loader": "^2.0.0-28320200727001",
"@vue/cli-plugin-babel": "^4.4.0",
"@vue/cli-service": "^4.4.0",
"babel-plugin-import": "^1.11.0",
"copy-webpack-plugin": "^6.0.3",
"cross-env": "^7.0.2",
"jest": "^25.4.0",
"mini-types": "*",
"miniprogram-api-typings": "*",
"miniprogram-ci": "^1.0.60",
"postcss-comment": "^2.0.0",
"vue-template-compiler": "^2.6.11"
},
"browserslist": [
"Android >= 4",
"ios >= 8"
],
"uni-app": {
"scripts": {}
}
}
const path = require('path')
module.exports = {
parser: require('postcss-comment'),
plugins: [
require('postcss-import')({
resolve (id, basedir, importOptions) {
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
} else if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
} else if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
}
return id
}
}),
require('autoprefixer')({
remove: process.env.UNI_PLATFORM !== 'h5'
}),
require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
]
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
})
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
\ No newline at end of file
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style>
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<!-- #ifdef H5 -->
<p>
点击查看
<a
href="https://docs.cloudbase.net/cloudbase-vue/introduce.html"
target="_blank"
rel="noopener"
>云开发 Vue 插件</a>
文档
</p>
<!-- #endif -->
<template v-if="isLoginSuccss">
<LoginState v-slot="{ loginState }">
<h2>登录云开发</h2>
<p>{{ loginState ? "已登录" : "未登录" }}</p>
</LoginState>
<h2>调用云函数</h2>
<p>
点击
<a href="javascript:;" @click="callFunction">调用 hello world 云函数</a>
</p>
<p>
<b>云函数执行结果</b>
</p>
<p>{{ callFunctionResult }}</p>
</template>
<template v-else-if="isLoginSuccss === false">
<h2>为了演示云开发功能,需要开启匿名登录</h2>
<p>
<a
v-bind:href="
`https://console.cloud.tencent.com/tcb/env/login?envId=${envId}`
"
target="_blank"
rel="noopener noreferrer"
>
控制台登录授权页面
<svg
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
x="0px"
y="0px"
viewBox="0 0 100 100"
width="15"
height="15"
class="icon outbound"
>
<path
fill="currentColor"
d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
/>
<polygon
fill="currentColor"
points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
/>
</svg>
</a>中,将“匿名登录”一栏打开,然后等待 1 分钟后刷新页面。
</p>
<p>
<img src="https://main.qcloudimg.com/raw/f342f7b23513e12c2b06677a54a5efbc.png" alt="开启匿名登录" />
</p>
</template>
<h2>本示例 Github 源码地址:</h2>
<a
href="https://github.com/TencentCloudBase/cloudbase-templates/tree/master/uni-app-starter"
>https://github.com/TencentCloudBase/cloudbase-templates/tree/master/uni-app-starter</a>
<h2>
开发部署工具: CloudBase Framework
<a href="https://github.com/TencentCloudBase/cloudbase-framework">
<img
alt="CloudBase Framework"
src="https://img.shields.io/github/stars/TencentCloudBase/cloudbase-framework?style=social"
/>
</a>
</h2>
<a
href="https://github.com/TencentCloudBase/cloudbase-framework"
title="CloudBase Framework: 云开发前后端一体化部署工具"
>
<img
class="cloudbase-logo"
width="100%"
src="https://main.qcloudimg.com/raw/615038b16047fa677646011fae909102.png"
/>
</a>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
isLoginSuccss: null,
envId: "",
callFunctionResult: "",
};
},
props: {
msg: String,
},
async created() {
this.envId = this.$cloudbase.config.env;
// 以匿名登录为例
// #ifdef H5
try {
const auth = this.$cloudbase.auth({ persistence: "local" });
if (!auth.hasLoginState()) {
await auth.anonymousAuthProvider().signIn();
}
console.log("用户id", auth.hasLoginState().user.uid);
this.isLoginSuccss = true;
} catch (e) {
if (e.message.includes("100007")) {
this.isLoginSuccss = false;
}
console.error(e);
console.log(e.code);
}
// #endif
// #ifdef MP-WEIXIN
this.isLoginSuccss = true;
// #endif
},
methods: {
async callFunction() {
try {
const res = await this.$cloudbase.callFunction({
name: "uni-app-echo",
data: {
name: "erikqin",
sex: 1,
},
});
this.callFunctionResult = JSON.stringify(res);
} catch (e) {
this.callFunctionResult = e.message;
}
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
margin: 15rpx;
font-size: 40rpx;
}
h2 {
margin: 15rpx;
font-size: 30rpx;
}
h3 {
font-size: 20rpx;
margin: 40rpx 0 0;
}
p {
line-height: 60rpx;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10rpx;
}
a {
color: #42b983;
}
.hello {
margin: 0 auto;
word-break: break-all;
}
.cloudbase-logo {
max-width: 420rpx;
max-height: 60rpx;
}
</style>
import Vue from 'vue'
import App from './App'
import globalMix from '@/mixins/global'
import config from "../cloudbaserc"
// #ifdef H5
import Cloudbase from "@cloudbase/vue-provider"
Vue.use(Cloudbase, {
env: config.envId,
})
// #endif
// #ifdef MP-WEIXIN
if (wx.cloud) {
Vue.prototype.$cloudbase = wx.cloud
Vue.prototype.$cloudbase.config = {
env: config.envId,
persistence: 'local',
timeout: 15000,
platform: 'mp-weixin'
}
wx.cloud.init({
env: config.envId,
})
} else {
console.error('您的环境还没有开通云开发环境!')
}
// #endif
Vue.config.productionTip = false
Vue.mixin(globalMix)
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
{
"name": "",
"appid": "",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"h5": {
"publicPath": "/uni-app/",
"router": {
"mode": "history",
"base": "/uni-app/"
},
"optimization": {
"treeShaking": {
"enable": true
}
}
},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false
},
"cloudfunctionRoot": "cloudfunctions/",
"usingComponents": true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"mp-qq" : {
"usingComponents" : true
}
}
export default {
data() {
return {
g_prefix: '/'
}
},
created() {
// #ifdef H5
// 如果h5的访问路径为 http://xxx.xxxxx.com/uni-app/ 否则无需修改
this.g_prefix = '/uni-app/'
// #endif
},
}
\ No newline at end of file
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
<template>
<view class="content">
<img class="logo" alt="CloudBase logo" :src="`${g_prefix}static/cloudbase.png`" />
<img class="logo" alt="Vue logo" :src="`${g_prefix}static/logo.png`" />
<HelloWorld msg="欢迎使用云开发 CloudBase uni-app App" />
</view>
</template>
<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
components: {
HelloWorld
}
}
</script>
<style>
.content {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60rpx;
}
.logo {
width: 120rpx;
height: 120rpx;
padding: 10rpx;
}
</style>
uni-app-starter/src/static/cloudbase.png

10.5 KB

uni-app-starter/src/static/logo.png

3.93 KB

/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:24rpx;
$uni-font-size-base:28rpx;
$uni-font-size-lg:32rpx;
/* 图片尺寸 */
$uni-img-size-sm:40rpx;
$uni-img-size-base:52rpx;
$uni-img-size-lg:80rpx;
/* Border Radius */
$uni-border-radius-sm: 4rpx;
$uni-border-radius-base: 6rpx;
$uni-border-radius-lg: 12rpx;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20rpx;
$uni-spacing-row-lg: 30rpx;
/* 垂直间距 */
$uni-spacing-col-sm: 8rpx;
$uni-spacing-col-base: 16rpx;
$uni-spacing-col-lg: 24rpx;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40rpx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36rpx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30rpx;
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment