feat: 添加小程序跳转微信小店模板

miniprogram/tcb-demo-mpToWxStore/.eslintrc.js

@@ -0,0 +1,31 @@
+/*
+ * Eslint config file
+ * Documentation: https://eslint.org/docs/user-guide/configuring/
+ * Install the Eslint extension before using this feature.
+ */
+module.exports = {
+  env: {
+    es6: true,
+    browser: true,
+    node: true,
+  },
+  ecmaFeatures: {
+    modules: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  globals: {
+    wx: true,
+    App: true,
+    Page: true,
+    getCurrentPages: true,
+    getApp: true,
+    Component: true,
+    requirePlugin: true,
+    requireMiniProgram: true,
+  },
+  // extends: 'eslint:recommended',
+  rules: {},
+}

miniprogram/tcb-demo-mpToWxStore/.gitignore

@@ -0,0 +1,3 @@
+miniprogram/node_modules
+miniprogram/miniprogram_npm
+miniprogram/package-lock.json

miniprogram/tcb-demo-mpToWxStore/README.md

@@ -0,0 +1,35 @@
+# 小程序跳转微信小店模板
+
+## 说明
+
+本项目为小程序跳转微信小店模板，可用于快速在小程序展示微信小店商品并支持跳转到微信小店。
+
+## 配套数据管理功能
+
+在[云模板](https://tcb.cloud.tencent.com/cloud-admin#/cloud-template/detail?tplId=tpl-1srBTDTiTOOprG&appName=wx_shop)中我们提供了相应的数据模型，用于配置需要在小程序中展示的微信小店和商品，可一键安装使用。
+
+## 安装依赖
+
+1. 安装 npm 依赖
+
+```shell
+npm install
+```
+
+ 如果安装失败，请检查是否有足够权限执行命令，或尝试用更高权限安装依赖：
+
+ ```shell
+ sudo npm install
+ ```
+
+2. 构建 npm
+点击微信开发者工具菜单栏中的「工具」->「构建 npm」
+
+## 社区
+
+欢迎添加企微群沟通交流：
+
+<div>
+    <img src="https://qcloudimg.tencent-cloud.cn/raw/bbb904f6fd6da01aa677e8a31e37651d.jpg" style="width:30%;">
+</div>
+

miniprogram/tcb-demo-mpToWxStore/miniprogram/app.js

@@ -0,0 +1,19 @@
+// app.js
+App({
+  onLaunch: function () {
+    if (!wx.cloud) {
+      console.error('请使用 2.2.3 或以上的基础库以使用云能力');
+    } else {
+      wx.cloud.init({
+        // env 参数说明：
+        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
+        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
+        //   如不填则使用默认环境（第一个创建的环境）
+        env: '',
+        traceUser: true,
+      });
+    }
+
+    this.globalData = {};
+  }
+});

miniprogram/tcb-demo-mpToWxStore/miniprogram/app.json

@@ -0,0 +1,13 @@
+{
+  "pages": [
+    "pages/index/index"
+  ],
+  "window": {
+    "backgroundColor": "#fff",
+    "backgroundTextStyle": "light",
+    "navigationStyle":"custom"
+  },
+  "sitemapLocation": "sitemap.json",
+  "style": "v2",
+  "lazyCodeLoading": "requiredComponents"
+}

miniprogram/tcb-demo-mpToWxStore/miniprogram/components/tipsModal/tipsModal.js

@@ -0,0 +1,46 @@
+// components/tipsModal.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    tipShow: Boolean,
+    title:String,
+    desc:String,
+    url:String
+  },
+  observers: {
+    tipShow: function (value) {
+      this.setData({ isShow: value })
+    }
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    isShow: false
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    onClose(){
+      this.setData({
+        isShow:false
+      })
+    },
+    copyToClipboard(){
+      wx.setClipboardData({
+        data:this.properties.url,
+        success(){
+          wx.showToast({
+            title: '链接已复制',
+            icon:"none"
+          })
+        }
+      })
+    }
+  }
+})

miniprogram/tcb-demo-mpToWxStore/miniprogram/components/tipsModal/tipsModal.json

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

miniprogram/tcb-demo-mpToWxStore/miniprogram/components/tipsModal/tipsModal.wxml

@@ -0,0 +1,14 @@
+<!--components/tipsModal.wxml-->
+<view class="modal-contianer" wx:if="{{isShow}}">
+  <view class="modal">
+    <view class="modal-content">
+      <view class="modal-title">{{title}}</view>
+      <view class="modal-desc">{{desc}}</view>
+      <view class="modal-link">{{url}}</view>
+    </view>
+    <view class="modal-btn-group">
+      <button class="copy-btn" bind:tap="copyToClipboard">复制地址</button>
+      <button class="close-btn" bind:tap="onClose">暂不打开</button>
+    </view>
+  </view>
+</view>

miniprogram/tcb-demo-mpToWxStore/miniprogram/components/tipsModal/tipsModal.wxss

@@ -0,0 +1,70 @@
+/* components/tipsModal.wxss */
+.modal-contianer {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.40);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal {
+  box-sizing: border-box;
+  width: 640rpx;
+  background-color: #fff;
+  border-radius: 24rpx;
+  padding: 32rpx;
+}
+.modal-content{
+  padding: 32rpx;
+}
+.modal-title {
+  text-align: center;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+.modal-desc {
+  color: rgba(0, 0, 0, 0.50);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  margin: 12px 0px 16px 0px;
+}
+
+.modal-link {
+  font-size: 14px;
+  font-weight: 400;
+  text-decoration-line: underline;
+  word-break: break-all;
+}
+
+.modal-btn-group {
+  margin-top: 16px;
+  display: flex;
+  justify-content: space-between;
+  gap: 32rpx;
+}
+
+.copy-btn {
+  background-color: #0052D9;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.close-btn {
+  background-color: #fff;
+  color: #0052D9;
+  border: #0052D9 1px solid;
+  font-size: 16px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+}

miniprogram/tcb-demo-mpToWxStore/miniprogram/envList.js

@@ -0,0 +1,6 @@
+const envList = [];
+const isMac = false;
+module.exports = {
+  envList,
+  isMac
+};

miniprogram/tcb-demo-mpToWxStore/miniprogram/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@cloudbase/wx-cloud-client-sdk": "^1.2.1"
+  }
+}

miniprogram/tcb-demo-mpToWxStore/miniprogram/pages/index/index.js

@@ -0,0 +1,81 @@
+const { init } = require('@cloudbase/wx-cloud-client-sdk')
+const client = init(wx.cloud)
+const models = client.models
+Page({
+  // wx391dea168d3accf2 10000151295117
+  data: {
+    menuPosition: wx.getMenuButtonBoundingClientRect(),
+    menuItems: [
+      {
+        key: 1,
+        title: "小店管理"
+      },
+      {
+        key: 2,
+        title: "商品管理"
+      }
+    ],
+    selectedItemIndex: 1,
+    tipShow:false,
+    title:"",
+    desc:"",
+    url:"",
+    isPreview:false,
+    storeList:[],
+    storeTotal:0,
+    productList:[],
+    productTotal:0
+  },
+  async onLoad(){
+    try{
+      // 查询店铺首页了列表
+      const {data:{records:storeList,total:storeTotal}}  = await models.store_home_3bzb1t4.list({
+        filter: {
+          where: {}
+        },
+        pageSize: 10, // 分页大小，建议指定，如需设置为其它值，需要和 pageNumber 配合使用，两者同时指定才会生效
+        pageNumber: 1, // 第几页
+        getCount: true, // 开启用来获取总数
+      });
+      // 查询商品列表
+      const {data:{records:productList,total:productTotal}}  = await models.store_product_zh57lp5.list({
+        filter: {
+          where: {}
+        },
+        pageSize: 10, // 分页大小，建议指定，如需设置为其它值，需要和 pageNumber 配合使用，两者同时指定才会生效
+        pageNumber: 1, // 第几页
+        getCount: true, // 开启用来获取总数
+      });
+      this.setData({
+        storeList,
+        storeTotal,
+        productList,
+        productTotal,
+        tipShow:true,
+        isPreview:false,
+        title:"使用云模板管理微信小店",
+        desc:"您已成功配置后台数据，可以打开下方地址对微信小店及商品进行增删改查等数据管理，配置后的数据将同步到该模板",
+        url:"https://tcb.cloud.tencent.com/cloud-admin#/management/content-mgr/index"
+      })
+    }catch(e){
+      this.setData({
+        tipShow:true,
+        isPreview:true,
+        title:"使用云模板快速接入微信小店",
+        desc:"当前为体验数据，切换为真实数据请复制下方链接并在浏览器中打开，帮您快速接入微信小店，管理小店及商品数据",
+        url:"https://tcb.cloud.tencent.com/cloud-admin#/cloud-template/detail?tplId=tpl-1srBTDTiTOOprG&appName=wx_shop"
+      })
+    }
+  },
+  onChangeTab(e) {
+    const {key}=e.target.dataset
+    this.setData({
+      selectedItemIndex:key
+    })
+  },
+  onOpenTipsModal(){
+    this.setData({
+      tipShow:true
+    })
+  }
+});

miniprogram/tcb-demo-mpToWxStore/miniprogram/pages/index/index.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarBackgroundColor": "#fff",
+  "usingComponents": {
+    "tips-modal": "/components/tipsModal/tipsModal"
+  }
+}

miniprogram/tcb-demo-mpToWxStore/miniprogram/pages/index/index.wxml

@@ -0,0 +1,37 @@
+<!--index.wxml-->
+<view>
+  <view style="margin-top: {{menuPosition.top}}px; height: {{menuPosition.height}}px;line-height: {{menuPosition.height}}px;" class="page-title">小程序打开微信小店</view>
+  <view class="banner-container">
+    <image src="../../images/banner.png" mode="aspectFill" class="banner" />
+  </view>
+  <view class="tabs">
+    <view class="tabs-header">
+      <view wx:for="{{menuItems}}" wx:key="key" class="{{selectedItemIndex===item.key?'tabs-header-item-selected':'tabs-header-item-normal'}}" data-key="{{item.key}}" bind:tap="onChangeTab">
+        {{item.title}}
+      </view>
+    </view>
+    <view class="tabs-body">
+      <block wx:if="{{selectedItemIndex===1}}">
+        <block wx:if="{{isPreview}}">
+          <image bind:tap="onOpenTipsModal" src="../../images/shop_home.png" mode="widthFix" style="width: 100%;"></image>
+        </block>
+        <block wx:else>
+          <block wx:for="{{storeList}}" wx:key="appid">
+            <store-home appid="{{item.appid}}"></store-home>
+          </block>
+        </block>
+      </block>
+      <block wx:if="{{selectedItemIndex===2}}">
+        <block wx:if="{{isPreview}}">
+          <image bind:tap="onOpenTipsModal" src="../../images/shop_product.png" mode="widthFix" style="width: 100%;">商品展示（预览数据）</image>
+        </block>
+        <block wx:else>
+        <block wx:for="{{productList}}" wx:key="product_id">
+          <store-product appid="{{item.appid}}" product-id="{{item.product_id}}" product-promotion-link="{{item.product_promotion_link}}"></store-product>
+        </block>
+        </block>
+      </block>
+    </view>
+  </view>
+  <tips-modal tipShow="{{tipShow}}" title="{{title}}" desc="{{desc}}" url="{{url}}"></tips-modal>
+</view>