小程序开发问题

Q：小程序文档地址

文档名称 描述 地址
开发须知 模板介绍、相关组件库地址等 地址
小程序开发到上架 创建、开发、调试、发布、测试、上架 地址
原生交互 小程序与原生交互 地址
微信小程序发布 微信小程序发布流程 地址
小程序模板升级2.0 模板上级2.0，兼容微应用多开、标准化组件库 地址
小程序开发注意事项 加载速度慢、移动端兼容、小程序测试 地址
小程序调试 Debug调试 地址
后台编译 uni-app 工程 小程序后端打包相关配置 地址
小程序多开规范 小程序打开小程序规范 地址

Q：小程序 @dcloudio/uni-cli-i18n

1. 问题详情
Error: Cannot find module '@dcloudio/uni-cli-i18n'

2.解决方案

方案地址 

yarn add -D @dcloudio/uni-cli-i18n @dcloudio/uni-i18n

Q：小程序打包发布太慢

1. 问题详情

发布打包过程超过十分钟时，是因为npm初始化未走淘宝镜像


2. 解决方案

需要在.npmrc中加入淘宝npm 仓库镜像地址

根目录新建.npmrc文件，并填充一下数据。

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org

Q：小程序在浏览器报跨域问题

1. 问题详情

出现此问题，是因为我们配置了动态获取地址的方法，如果非原生APP中使用，将会出现代理问题


2. 解决方案

需要在manifest.json引入以下代码

  1. /api：不要随意更改，否则库里面找不到代理地址
  2. target：代理地址，可更具自己的环境进行配置
"h5" : {
    "router" : {
        "base" : "/demo-k-mp/"
    },
    "devServer" : {
        "https" : false,
        "proxy" : {
            "/api" : {
                "target" : "http://pai.flyrise.cn",
                "changeOrigin" : true,
                "secure" : false,
                "pathRewrite" : {
                    "^/api" : "/"
                }
            }
        }
    }
}

Q：小程序网络请求问题

1. 问题详情

网络请求出现大批量404报错


2. 解决方案

遵循模板2.0网络标准即可，可参考 地址 下的 “3.1 网络请求”

  • 注意引入组件库中的网络工具类；
  • 填充URL时，不要写入完整地址，防止换了环境用不了。
import {http} from '@flyriselink/pai-mp-ui/common/service.js'

//获取用户详情-管理员判断
export const getUserDetail = () => {
    return http.get("/console-api/user/v1/me", {})
}

Q：小程序运行不起来transpileDependencies没配置

1. 问题详情

错误原因：使用 cnpm、yarn 初始化项目

15:46:01.330 如手机上HBuilder调试基座未启动，请手动启动...
15:46:02.782 reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->Uncaught Error: Module parse failed: Unexpected token (2:86)
15:46:02.814 You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
15:46:02.848 | // 看到此报错，是因为没有配置vue.config.js的【transpileDependencies】，详见：https://www.uviewui.com/components/npmSetting.html#_5-cli模式额外配置
15:46:02.876 > const pleaseSetTranspileDependencies = {}, babelTest = pleaseSetTranspileDependencies?.test

2. 解决方案
  1. 删除node_modules文件夹；
//快捷删除命令，先 cmd 到项目主目录，然后运行此命令即可

rmdir /s/q node_modules
  1. 删除package-lock.json文件；
  2. 使用 npm i初始化项目。

Q：小程序引入组件库原生运行导致白屏

1. 问题详情

错误原因：原生中无法使用document和window，所以chrome运行正常，但是在原生运行白屏，可能就是引入的组件库不支持原生导致的。

  1. 有赞组件库：Vant不支持原生，可以使用uni-app插件市场中的组件替换地址 ；
  2. 饿了么库：element-ui不支持原生;

2. 解决方案

  1. 优先使用uni-app插件市场中兼容原生的组件地址 ；

  2. 使用好条件编译进行平台判断，防止出现白屏地址;

  3. 将小程序发成H5：地址 。


Q：小程序开发iOS端日期显示异常

1. 问题详情

iOS13不支持new Date("2022-03-30 13:59:00")日期格式

2. 解决方案

改成new Date("2022/03/30 13:59:00")字符串格式

  1. 更新@flyriselink/pai-mp-ui仓库到 1.0.18以上即可；

    //使用方式
this.$p.time.parseTime('2021-06-18T13:56:30.000+0000')

  2. 手动在timeUtil的parseTime添加一段代码；

    // 时间格式化
export const parseTime = (time, pattern) => {
    ...
    if (typeof time === "object") {
        date = time
    } else {
        ...
        if (typeof time === "number" && time.toString().length === 10) {
            time = time * 1000
        }
         //在之前的日期格式化中插入 START
        if (time && typeof time === "string" &&
            time.length > 19 &&
            time.indexOf('-') != -1 &&
            time.indexOf('T') != -1) {
            let data = time.substr(0, 19)
            time = new Date(data.replace(/T/g, ' ').replace(/-/g, '/')).getTime() + 8 * 60 * 60 * 1000
        }
         //在之前的日期格式化中插入 END
        date = new Date(time)
    }
    const formatObj = {
    ...
    }
    const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        ...
    })
    return timeStr
}

Q：修改工程名导致Docker部署失败

1. 问题详情

主要是修改工程名不彻底，部分文件中的配置项未修改导致的。


2. 解决方案

以工程名pai-uni-basic为例，详情建议参考最新小程序模板工程。

注意：注意把CSS 中的 less 转换成 scss

  1. manifest.json

    //工程名`pai-uni-basic`
"h5": {
    "router": {
        "base": "/uni-basic/"
    }
}

  2. default.conf

    #工程名`pai-uni-basic`
server {
 ...
  location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      try_files $uri $uri/=403 /uni-basic/index.html;
  }
...
}

  3. Deployment.yaml

    #工程名`pai-uni-basic`
metadata:
  name: pai-uni-basic
  labels:
    app: pai-uni-basic
  namespace: test
spec:
  replicas: 1
  selector:
    matchLabels:
      app: pai-uni-basic
  template:
    metadata:
      labels:
        app: pai-uni-basic
    spec:
      containers:
        - name: pai-uni-basic
          image: fedemo.cn:8082/pi-dev/pai-uni-basic:latest

  4. Dockerfile

    #工程名`pai-uni-basic`
FROM node:14-alpine as builder
RUN mkdir -p /tmp/pai-uni-basic
COPY package.json /tmp/pai-uni-basic/package.json
COPY .npmrc /tmp/pai-uni-smart-approval/.npmrc
RUN cd /tmp/pai-uni-basic && npm install && mkdir -p /build/pai-uni-basic && cp -a /tmp/pai-uni-basic/node_modules /build/pai-uni-basic/
WORKDIR /build/pai-uni-basic
...
RUN mkdir -p /usr/share/nginx/html/uni-basic
...
COPY --from=builder /build/pai-uni-basic/dist/build/h5/ /usr/share/nginx/html/uni-basic/
COPY default.conf /etc/nginx/conf.d/default.conf
WORKDIR /usr/share/nginx/html/uni-basic/

  5. Service.yaml

    #工程名`pai-uni-basic`
metadata:
  name: pai-uni-basic
  namespace: test
  labels:
    app: pai-uni-basic
    ...
spec:
  ...
  selector:
    app: pai-uni-basic

Q：小程序解析原生参数问题

1. 问题原因

由于原生传递参数问题导致，JS 需要做一下兼容


2. 解决方法
//uni.onNativeEventReceive(function(event, data)
const result = JSON.stringify(data, null, '\t')
const json = JSON.parse(result)
const userData = Array.isArray(json.items) ? json.items[0] : json.items.values[0]

Q：套件发布沙箱后小程序未更新问题

1. 问题原因

由于pages.json有问题导致的


2. 解决方法

  1. 修改pages.json中的问题，参考地址 ；

  2. 使用命令重新提交pages.json文件。

     #工程 > src 目录下
 pai deploy microapp  #根据当前目录的pages.json发布
文档更新时间: 2022-04-22 14:04   作者：陈冕