feat: 页面渲染引擎

api/request.js

@@ -16,8 +16,8 @@ const {
 // request.js
 // 通常可以吧 baseUrl 单独放在一个 js 文件了
 // const baseUrl = "http://172.16.230.108:7777/pmall";
-// const baseUrl = "https://momclub-uat.feihe.com/pmall";//测试环境
-const baseUrl = "https://momclub-test.feihe.com/pmall";//测试环境2
+const baseUrl = "https://momclub-uat.feihe.com/pmall";//测试环境
+// const baseUrl = "https://momclub-test.feihe.com/pmall";//测试环境2
 // let baseUrl = "https://momclub.feihe.com/pmall";//生产环境   
 // const baseUrl = "https://docs.dui88.com/mock/1956/api";//mock
 // const baseUrl = "https://feihe.m.duibatest.com.cn/pmall"

pages/activity/engine/PageRenderEngine.vue

@@ -7,30 +7,17 @@ import HotArea from "./components/HotArea.vue";
 
 const props = defineProps<{
   id: string
+  pageConfig?: PageConfig
   debugMode?: boolean
 }>()
 
-const refreshingPageConfig = ref(false)
-const pageConfig = ref({} as PageConfig)
 const debugMode = computed(() => props.debugMode)
 
-async function refreshPageConfig() {
-  refreshingPageConfig.value = true
-  const resp = await fetchPageConfig(props.id)
-  pageConfig.value = JSON.parse(resp.data.content)
-  refreshingPageConfig.value = false
-  console.log(pageConfig.value)
-}
-
-onMounted(async () => {
-  await refreshPageConfig()
-})
-
 provide('debugMode', debugMode)
 </script>
 
 <template>
-  <view v-if="!refreshingPageConfig" class="page-render-engine">
+  <view v-if="pageConfig" class="page-render-engine">
     <template v-for="(component, index) in pageConfig.components" :key="'comp-' + index">
       <HotArea
         v-if="component.name === 'HotArea'"
@@ -38,9 +25,6 @@ provide('debugMode', debugMode)
       />
     </template>
   </view>
-  <view v-else>
-    加载中...
-  </view>
 </template>
 
 <style scoped lang="less">

pages/activity/page.vue

 <script setup lang="ts">
-import {ref} from 'vue'
+import {ref, provide} from 'vue'
 import PageRenderEngine from "./engine/PageRenderEngine.vue";
-import {onLoad} from "@dcloudio/uni-app";
+import {onLoad, onShareAppMessage, onShareTimeline} from "@dcloudio/uni-app";
+import {fetchPageConfig} from "./engine/api";
+import {PageConfig} from "./engine/types";
 
 const pageOptions = ref({})
 const pageId = ref<string>()
 const debugMode = ref(false)
+const shareData = ref({
+  title: '星妈会',
+  imageUrl: 'https://course.feihe.com/momclub-picture/activity/1015/v1/share-image.png',
+  path: '/pages/activity/page',
+})
+const refreshingPageConfig = ref(false)
+const pageConfig = ref<PageConfig>()
+
 
 function navBack() {
   try {
@@ -15,7 +25,6 @@ function navBack() {
         console.log('返回成功')
       },
       fail: () => {
-        // 如果返回失败，跳转到首页
         uni.redirectTo({
           url: '/pages/index/index'
         })
@@ -29,16 +38,69 @@ function navBack() {
   }
 }
 
-onLoad((options) => {
+function updateShareData(data) {
+  Object.assign(shareData.value, data)
+}
+
+async function refreshPageConfig() {
+  refreshingPageConfig.value = true
+  const resp = await fetchPageConfig(pageId.value)
+  pageConfig.value = JSON.parse(resp.data.content)
+  refreshingPageConfig.value = false
+  //console.log(pageConfig.value)
+
+  updateShareData({
+    title: pageConfig.value?.shareConfig?.title,
+    imageUrl: pageConfig.value?.shareConfig?.cover,
+  })
+}
+
+function getShareData() {
+  const {title, imageUrl, path} = shareData.value
+
+  console.log('分享参数:', {
+    title,
+    path,
+    imageUrl,
+  })
+
+  return {
+    title,
+    path,
+    imageUrl,
+  }
+}
+
+onLoad(async (options) => {
   pageOptions.value = options
   pageId.value = options.id
   debugMode.value = options.debugMode
+
+  shareData.value.path = '/pages/activity/page?id=' + pageId.value
+  await refreshPageConfig()
+})
+
+onShareAppMessage(() => {
+  return getShareData()
 })
 
+onShareTimeline(() => {
+  return getShareData()
+})
+
+provide('updateShareData', updateShareData)
 </script>
 
 <template>
-  <PageRenderEngine :id="pageId" :debug-mode="debugMode" />
+  <PageRenderEngine
+    v-if="!refreshingPageConfig"
+    :id="pageId"
+    :page-config="pageConfig"
+    :debug-mode="debugMode"
+  />
+  <view v-else class="loading-view">
+    <text>加载中…</text>
+  </view>
   <image class="btn-back" src="@/assets/images/back-btn.png" mode="aspectFit" @click="navBack"/>
 </template>
 
@@ -50,4 +112,11 @@ onLoad((options) => {
   width: 60rpx;
   height: 60rpx;
 }
+
+.loading-view{
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>
\ No newline at end of file