Merge pull request #52 from TencentCloudBase/feature/add-tcb-official…

…-website

feat: 添加云开发企业官网源码模板

miniprogram/tcb-official-website/README.md

@@ -0,0 +1,50 @@
+<br />
+<div align="center">
+    <img src="https://qcloudimg.tencent-cloud.cn/raw/f97dc74fbf9af5d7b2b3d8bc0a4e91d4.png" alt="Logo" width="400">
+
+<h1 align="center">云开发企业官网模板</h1>
+
+<p align="center">
+  一键创建企业官网
+    <br />
+  </p>
+</div>
+
+## 说明
+
+本项目为云开发企业官网模板的小程序，提供首页、解决方案、最新动态、联系我们、详情页等页面。
+
+本项目默认使用体验数据运行，同时也能够使用真实数据。配置好云开发后端后，即可一键切换至真实数据。
+
+注：体验数据通过本地 Mock 数据实现。
+
+本项目的后端可前往[https://tcb.cloud.tencent.com/cloud-template/detail?appName=electronic-business&from=wxide_tcb_shop](https://tcb.cloud.tencent.com/cloud-template/detail?appName=electronic-business&from=wxide_tcb_shop)安装。
+
+## 社区
+
+欢迎添加企微群沟通交流：
+
+<div>
+    <img src="https://qcloudimg.tencent-cloud.cn/raw/bbb904f6fd6da01aa677e8a31e37651d.jpg" style="width:30%;">
+</div>
+
+## 安装依赖
+
+1. 安装 npm 依赖
+
+```shell
+npm install
+```
+
+如果安装失败，请检查是否有足够权限执行命令，或尝试用更高权限安装依赖：
+
+```shell
+sudo npm install
+```
+
+2. 构建 npm
+   点击微信开发者工具菜单栏中的「工具」->「构建 npm」
+
+## 运行小程序
+
+在微信开发者工具中导入本项目即可运行，若想配合后端运行完整应用，请前往[https://tcb.cloud.tencent.com/cloud-template/detail?appName=electronic-business&from=wxide_tcb_shop](https://tcb.cloud.tencent.com/cloud-template/detail?appName=electronic-business&from=wxide_tcb_shop)安装。

miniprogram/tcb-official-website/app.js

@@ -0,0 +1,18 @@
+import { init } from '@cloudbase/wx-cloud-client-sdk';
+import updateManager from './common/updateManager';
+
+wx.cloud.init({
+  env: 'lowcode-0gtl65sefd4e81f3', // 指定云开发环境 ID
+});
+const client = init(wx.cloud);
+const models = client.models;
+// 接下来就可以调用 models 上的数据模型增删改查等方法了
+globalThis.dataModel = models;
+
+App({
+  onLaunch: async function () {},
+  onShow:  function () {
+    // 管理小程序的更新。主要功能包括：检查更新，下载新版本，提示用户更新
+    updateManager();
+  },
+});

miniprogram/tcb-official-website/app.json

@@ -0,0 +1,53 @@
+{
+  "pages": [
+    "pages/index/index",
+    "pages/solution/index",
+    "pages/aboutUs/index",
+    "pages/news/index",
+    "pages/detail/index"
+  ],
+  "window": {
+    "backgroundColor": "#F6F6F6",
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#F6F6F6",
+    "navigationBarTitleText": "企业官网",
+    "navigationBarTextStyle": "black"
+  },
+  "sitemapLocation": "sitemap.json",
+  "style": "v2",
+  "lazyCodeLoading": "requiredComponents",
+  "tabBar": {
+    "color": "#A2A9B0",
+    "selectedColor": "#0F62FE",
+    "backgroundColor": "#ffffff",
+    "borderStyle": "black",
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "text": "首页",
+        "iconPath": "images/icons/index.png",
+        "selectedIconPath": "images/icons/index-active.png"
+      },
+      {
+        "pagePath": "pages/solution/index",
+        "text": "解决方案",
+        "iconPath": "images/icons/solution.png",
+        "selectedIconPath": "images/icons/solution-active.png"
+      },
+      {
+        "pagePath": "pages/aboutUs/index",
+        "text": "联系我们",
+        "iconPath": "images/icons/about.png",
+        "selectedIconPath": "images/icons/about-active.png"
+      }
+    ]
+  },
+  "usingComponents": {
+    "cloud-template-guide": "/components/cloud-template-guide/index"
+  },
+  "permission": {
+    "scope.userLocation": {
+      "desc": "你的位置信息将用于小程序位置定位"
+    }
+  }
+}

miniprogram/tcb-official-website/app.wxss

@@ -0,0 +1,31 @@
+/**app.wxss**/
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+} 
+
+button {
+  background: initial;
+}
+
+button:focus{
+  outline: 0;
+}
+
+button::after{
+  border: none;
+}
+
+
+page {
+  background: #F2F4F8;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.news_list {
+  padding: 0 20rpx;
+}

miniprogram/tcb-official-website/common/updateManager.js

@@ -0,0 +1,26 @@
+export default () => {
+  if (!wx.canIUse('getUpdateManager')) {
+    return;
+  }
+  const updateManager = wx.getUpdateManager();
+  updateManager.onCheckForUpdate(function (res) {
+    // 请求完新版本信息的回调
+    console.log('版本信息', res);
+  });
+  updateManager.onUpdateReady(function () {
+    wx.showModal({
+      title: '更新提示',
+      content: '新版本已经准备好，是否重启应用？',
+      success(res) {
+        if (res.confirm) {
+          // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
+          updateManager.applyUpdate();
+        }
+      },
+    });
+  });
+
+  updateManager.onUpdateFailed(function () {
+    // 新版本下载失败
+  });
+};

miniprogram/tcb-official-website/components/cloud-template-guide/index.js

@@ -0,0 +1,41 @@
+import { cloudbaseTemplateConfig } from '../../config/index';
+
+Component({
+  properties: {
+    show: {
+      type: Boolean,
+      value: cloudbaseTemplateConfig.useMock,
+    },
+    title: {
+      type: String,
+      value: '安装模板后端',
+    },
+    text: {
+      type: String,
+      value: '当前为前端模拟数据，如需使用模板后端，请打开下方链接，跟随指引进行安装',
+    },
+    url: {
+      type: String,
+      value:
+        'https://tcb.cloud.tencent.com/cloud-template/detail?appName=electronic-business&from=wxide_tcb_official_website',
+    },
+  },
+
+  data: {
+    dialogShow: false,
+  },
+
+  methods: {
+    open() {
+      this.setData({ dialogShow: true });
+    },
+    close() {
+      this.setData({ dialogShow: false });
+    },
+    copy() {
+      wx.setClipboardData({
+        data: this.data.url,
+      });
+    },
+  },
+});

miniprogram/tcb-official-website/components/cloud-template-guide/index.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog"
+  }
+}

miniprogram/tcb-official-website/components/cloud-template-guide/index.wxml

@@ -0,0 +1,18 @@
+<view wx:if="{{show}}" class="cloud-template-guide">
+  <view class="left">
+    <t-icon color="#0052D9" name="info-circle-filled" size="40rpx" />
+    当前为体验数据，可替换为真实数据
+  </view>
+  <view class="right" bind:tap="open">去替换＞</view>
+</view>
+<t-dialog visible="{{dialogShow}}">
+  <view slot="content" class="cloud-template-guide-dialog">
+    <view class="title">{{title}}</view>
+    <view class="text">{{text}}</view>
+    <view class="url">{{url}}</view>
+    <view class="btns">
+      <t-button class="copy" bind:tap="copy" theme="primary">复制地址</t-button>
+      <t-button class="close" bind:tap="close" theme="outline">暂不打开</t-button>
+    </view>
+  </view>
+</t-dialog>

miniprogram/tcb-official-website/components/cloud-template-guide/index.wxss

@@ -0,0 +1,57 @@
+.cloud-template-guide {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #f2f3ff;
+  margin: 20rpx;
+  padding: 20rpx;
+  border-radius: 10rpx;
+  font-size: small;
+}
+
+.cloud-template-guide .left {
+  gap: 10rpx;
+  display: flex;
+  align-items: center;
+}
+
+.cloud-template-guide .right {
+  align-items: center;
+  color: #0052d9;
+}
+
+.cloud-template-guide-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 30rpx;
+}
+
+.cloud-template-guide-dialog .title {
+  font-size: large;
+  text-align: center;
+}
+
+.cloud-template-guide-dialog .btns {
+  display: flex;
+  justify-content: space-between;
+  gap: 30rpx;
+}
+
+.cloud-template-guide-dialog .close {
+  color: #0052d9;
+  border-color: #0052d9;
+  border: solid 1rpx #0052d9;
+}
+
+.cloud-template-guide-dialog .text {
+  color: rgba(0, 0, 0, 0.5);
+  font-size: small;
+}
+
+.cloud-template-guide-dialog .btns button {
+  flex: 1;
+}
+
+.cloud-template-guide-dialog .url {
+  word-break: break-all;
+}

miniprogram/tcb-official-website/components/newsList/index.js

@@ -0,0 +1,46 @@
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    number:{
+      type: Number,
+      value:0
+    },
+    title:{
+      type:String,
+      value:""
+    },
+    time:{
+      type:String,
+      value:""
+    },
+    image:{
+      type:String,
+      value:""
+    },
+    id:{
+      type:String,
+      value:""
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    async goDetail(event){
+      wx.navigateTo({
+        url: `/pages/detail/index?type=news&id=${this.id}&title=${event.currentTarget.dataset.title}`
+      })
+    }  
+  },
+})

miniprogram/tcb-official-website/components/newsList/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

miniprogram/tcb-official-website/components/newsList/index.wxml

@@ -0,0 +1,8 @@
+<view  wx:if="{{number >0}}" class="news_item_border"></view>
+<view class="news_item" catch:tap="goDetail" data-title="{{title}}">
+  <view class="news_cont">
+    <text class="news_list_title">{{title}}</text>
+    <text class="news_time">{{time}}</text>
+  </view>
+  <view class="news_image"><image src="{{image}}"></image></view>
+</view>