feat: ✨ 常见问题页面

src/pages.json

@@ -32,6 +32,12 @@
         "navigationBarTitleText": "关于我们"
       }
     },
+    {
+      "path": "pages/mine/faq/index",
+      "style": {
+        "navigationBarTitleText": "常见问题"
+      }
+    },
     {
       "path": "pages/mine/feedback/index",
       "style": {

src/pages/mine/faq/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <view class="faq-container">
+    <view class="wechat">
+      <view class="flex-center">
+        <image
+          class="w-158px h-158px"
+          :show-menu-by-longpress="true"
+          src="/static/images/youlai-mp-qr-code.png"
+          mode="aspectFit"
+        />
+      </view>
+      <view class="tips">
+        <text>长按关注「有来技术」公众号，获取交流群二维码。</text>
+      </view>
+    </view>
+
+    <wd-collapse v-model="value">
+      <wd-collapse-item title="开源项目issues" name="item1">
+        <!-- #ifdef H5 -->
+        <a href="https://gitee.com/youlaiorg/vue-uniapp-template/issues">#issues</a>
+        <!-- #endif -->
+        <!-- #ifdef MP-WEIXIN -->
+        <text :user-select="true">https://gitee.com/youlaiorg/vue-uniapp-template/issues</text>
+        <!-- #endif -->
+      </wd-collapse-item>
+      <wd-collapse-item title="小程序分包" name="item2">
+        <view>
+          <text>
+            分包主要是因为小程序平台对主包大小有限制（微信小程序的规则是主包不超过2M，每个分包不超过2M，总体积一共不能超过20M），
+            分包不需要按照业务模块来分，可以将多个业务模块放入一个分包中，直到这个分包达到小程序的大小限制才考虑下一个分包。
+            uniapp的用法与微信官方文档一样，具体参见：
+          </text>
+          <!-- #ifdef H5 -->
+          <a
+            href="https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html"
+          >
+            微信官方文档-分包
+          </a>
+          <!-- #endif -->
+          <!-- #ifdef MP-WEIXIN -->
+          <text :user-select="true">
+            https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html
+          </text>
+          <!-- #endif -->
+        </view>
+        <view class="mt-15rpx">
+          <text>
+            以下是一个简单示例。以下示例中创建了两个分包，分包a中包含两个页面，分包b中包含一个页面。
+          </text>
+          <text class="mt-15rpx">
+            请注意，如果想把分包页面中使用的组件也打包到分包中，则需要将组件放入对应的分包目录下，否则组件会被放入主包中。
+          </text>
+        </view>
+        <view class="mt-15rpx">
+          <text>目录结构：</text>
+        </view>
+        <rich-text :nodes="subListStr" />
+        <view class="mt-15rpx">
+          <text>在pages.json文件中声明分包结构：</text>
+        </view>
+        <rich-text :nodes="pagesStr" />
+      </wd-collapse-item>
+    </wd-collapse>
+  </view>
+</template>
+
+<script lang="ts" setup>
+const value = ref<string[]>(["item1"]);
+const subListStr = ref<string>(`
+<pre style="background-color: #f9f9fa"><code>
+|-- components    //主包组件目录
+|-- pages         //主包页面目录
+|   |-- index
+|-- sub-pkg-a
+|   |-- components    //分包组件目录
+|   |-- pages         //分包页面目录
+|   |   |-- cat
+|   |   |-- dog
+|-- sub-pkg-b
+|   |-- components    //分包组件目录
+|   |-- pages         //分包页面目录
+|   |   |-- apple</code></pre>
+`);
+
+const pagesStr = ref<string>(`<pre style="background-color: #f9f9fa"><code>
+{
+  "pages":[
+    {
+      "path": "pages/index",
+      "style": {
+        "navigationBarTitleText": "主页"
+      }
+    }
+  ],
+  "subPackages": [
+    {
+      "root": "sub-pkg-a",
+      "pages": [
+        {
+          "path": "pages/cat",
+          "style": {
+            "navigationBarTitleText": "cat"
+          }
+        },
+        {
+          "path": "pages/dog",
+          "style": {
+            "navigationBarTitleText": "dog"
+          }
+        }
+      ]
+    },
+    {
+      "root": "sub-pkg-b",
+      "pages": [
+        {
+          "path": "pages/apple",
+          "style": {
+            "navigationBarTitleText": "apple"
+          }
+        }
+      ]
+    }
+  ]
+}</code></pre>
+`);
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.faq-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  .wechat {
+    padding: 30rpx;
+    margin: 20px 0;
+    font-size: 14px;
+    color: var(--wot-card-content-color, rgba(0, 0, 0, 0.45));
+    background-color: #fff;
+    .tips {
+      font-weight: bold;
+      text-align: center;
+    }
+  }
+}
+</style>

src/pages/mine/index.vue

@@ -43,7 +43,7 @@
         <wd-cell title="关于我们" icon="info-circle" clickable @click="navigateToAbout">
           <wd-icon name="arrow-right" />
         </wd-cell>
-        <wd-cell title="常见问题" icon="help-circle" @click="navigateToFAQ">
+        <wd-cell title="常见问题" icon="help-circle" clickable @click="navigateToFAQ">
           <wd-icon name="arrow-right" />
         </wd-cell>
         <wd-cell title="问题反馈" icon="check-circle" clickable @click="handleQuestionFeedback">
@@ -80,7 +80,7 @@ const navigateToProfile = () => {
 
 // 常见问题
 const navigateToFAQ = () => {
-  uni.navigateTo({ url: "/pages/faq/index" });
+  uni.navigateTo({ url: "/pages/mine/faq/index" });
 };
 // 关于我们
 const navigateToAbout = () => {