常见问题 FAQ

基础信息

开发【商家后台小程序】需要什么样的技术基础？

只需了解 HTML、CSS、JavaScript 语法即可轻松接入商家后台小程序前端开发；同时商家后台小程序也支持主流的前端框架(vue,react 等)；

示例代码模板

我该选择 Iframe 小程序还是 VM 小程序进行开发 ？

Iframe 小程序在引入 @manycore/miniapp-sdk SDK 包后，能 100%覆盖商家后台各种业务需求开发，且具有相比 VM 小程序更加友好的开发方式、同时支持多个小程序并存运行，是官方推荐的小程序开发方式。示例代码模板中的模板均使用的 Iframe 小程序。

VM 小程序在 Iframe 小程序的基础上提供了一个执行 js 代码的 VM（虚拟机）环境，在该环境中可同步调用商家后台提供的接口。

小程序部署代码后，访问小程序时 Iframe 中的 css, js 访问不到怎么办？

小程序代码打包后会可能被上传到一个非根目录的文件夹中部署，这时候配置前端工程中的 publicPath 为 './' 即可。

小程序只支持请求 HTTPS 服务吗？

是的。因为浏览器的安全限制和酷家乐主页是 HTTPS 的，小程序只支持请求 HTTPS 服务。

相比于 HTTP，HTTPS 可以提供更加优质保密的信息，保证了用户数据的安全性，此外 HTTPS 同时也一定程度上保护了服务端，使用恶意攻击和伪装数据的成本大大提高。还在使用 HTTP 协议的开发者建议尽快对服务器进行升级。

小程序支持跨域请求吗？

支持。 如何支持：被小程序请求的服务，需要支持跨域调用。 比如 在服务端的对外 nginx 配置中，增加配置参考如下

# 初始设置flag值
set $flag '0';

# 若发起请求是非简单请求，则设置flag为'${flag}1'
if ($request_method = 'OPTIONS') {
    set $flag '${flag}1';
}

# 使用特定规则匹配目标 origin
if ($http_origin ~* ${YOUR_ORIGIN_REGEX}) {
    set $flag '${flag}2';
}

# 如果为dataurl时，则 origin 为null
# if ($http_origin = 'null') {
#     set $flag '${flag}2';
# }

# 若flag为‘02’，则说明是 简单请求
if ($flag = '02') {
    add_header 'Access-Control-Allow-Origin' * always;
    add_header 'Access-Control-Expose-Headers' '*' always;
}

# 若flag为‘012’，则说明是 非简单请求
if ($flag = '012') {
    add_header 'Access-Control-Allow-Origin' *;
    add_header 'Access-Control-Allow-Methods' $http_access_control_request_method;
    add_header 'Access-Control-Allow-Headers' $http_access_control_request_headers;
    add_header 'Access-Control-Max-Age' '1728000';
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' '0';

    return 204;
}

proxy_pass ${TARGET_SERVER....}

CORS 相关信息可以参考 MDN 文档: MDN_CORS

本地开发

eslint error 'Manycore' is not defined no-undef，该如何处理？

eslintrc.js 文件中加入 globals 配置

module.exports = {
  globals: {
    Manycore: "readonly"
  }
};

错误提示： ReferenceError: Manycore is not defined ，如何处理？

Iframe 视图代码的入口文件中引入 @manycore/miniapp-sdk SDK 包。

如 Vue CLI 初始化项目中的 main.ts

import { createApp } from "vue";
import App from "./App.vue";
import "@manycore/miniapp-sdk"; // 引入 SDK 后可在视图中异步调用 Manycore 接口

createApp(App).mount("#app");

错误提示： Uncaught DOMException: Failed to construct 'WebSocket' ，如何处理？

这个问题通常出现在 Vue CLI 项目中，配置 package.json 中 serve 命令 --mode 选项 为 production 即可。

通用 API

如何找到需要的小程序 API？

进入API 文档主页, 根据命名空间分类查找，部分接口如Manycore.Miniapp只能在 VM 环境中才能调用，不过大多数时候你也并不需要调用它。