小程序开发问题

Q01：小程序文档地址

文档名称 描述 地址
开发须知 模板介绍、相关组件库地址等 地址
开发到上架 创建、开发、调试、发布、测试、上架 地址
本地调试 本地扫码快速调试微应用、H5界面 地址
原生交互 小程序与原生交互 地址
微信小程序发布 微信小程序发布流程 地址
模板升级2.0 模板上级2.0，兼容微应用多开、标准化组件库 地址
开发注意事项 加载速度慢、移动端兼容、小程序测试 地址
小程序调试 开启log日志 地址
后台编译 uni-app 工程 小程序后端打包相关配置 地址
小程序多开规范 小程序打开小程序规范 地址
小程序、H5域名修改 关于小程序模板中微信小程序、H5域名修改问题 地址
业务组件库 园区、组织机构、登录等 地址
支付组件库 支付组件库等 地址

Q02： @dcloudio/uni-cli-i18n

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

2.解决方案

方案地址 

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

Q03：小程序打包发布太慢

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

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

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" : "/"
                }
            }
        }
    }
}

Q05：小程序网络请求问题

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", {})
}

Q06：小程序初始化后运行失败

1. 问题详情

错误原因：使用 cnpm、yarn 初始化项目，transpileDependencies 没配置

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初始化项目。

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

1. 问题详情

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

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

2. 解决方案

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

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

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


Q08：小程序开发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, timeZone) => {
    ...
    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)
            let milli = new Date(data.replace(/T/g, ' ').replace(/-/g, '/')).getTime()
            if (time.indexOf('+0800') == -1 || timeZone == true) {
                time = milli + 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
}

Q09：修改工程名导致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

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

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]

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

1. 问题原因

由于pages.json有问题导致的


2. 解决方法

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

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

     #工程 > src 目录下
 pai deploy microapp  #根据当前目录的pages.json发布

Q12：小程序页面直达返回问题

1. 问题原因

uni-app默认进入page.js配置的首页，当带上path是，默认会进入相应界面，但会存在返回键、返回去到首页等问题。需要重定向。


2. 解决方法

  1. 定义变量

     data() {
    return {
      isRedirect:false
    }
 }

  2. 隐藏标题栏返回键

    onLoad(e) {
   this.isRedirect = this.$p.tool.redirect(this, e)
}

  3. 自定义返回事件

    onBackPress() {
     if (this.isRedirect) {
       this.$p.tool.finish()
       return true;
     }
      return false;
}

Q13：彻底关闭小程序问题

1. 问题原因

由于原生开启了应用多开，如果只是使用之前的关闭方法，应用退出后还会留存在后台，所以需要调用SDK中的关闭方法。


2. 解决方法
//将plus.runtime.quit()全部替换成finish()
this.$p.tool.finish()

Q14：小程序H5跨域问题

1.问题原因
  • Chrome浏览器中运行H5出现跨域
  • 后台服务端不支持跨域请求

2. 解决方法

  • 浏览器跨域解决

    "h5" : {
    "devServer" : {
        "https" : false,
        "proxy" : {
            "/api" : {
                "target" : "http://pai.flyrise.cn",
                "changeOrigin" : true,
                "secure" : false,
                "pathRewrite" : {
                    "^/api" : "/"
                }
            }
        }
    }
}

  • 后端跨域解决

    //接口代码和nginx代理都要配置允许跨域
/*是否允许请求带有验证信息*/
corsConfiguration.setAllowCredentials(true);
/*允许访问的客户端域名*/
corsConfiguration.addAllowedOrigin("*");
/*允许服务端访问的客户端请求头*/
corsConfiguration.addAllowedHeader("*");
/*允许访问的方法名,GET POST等*/
corsConfiguration.addAllowedMethod("*");

Q15：打包成H5在ios中无法请求数据

1. 问题原因
  • iOS系统中H5域名是Https时，不允许再发起Http请求；
  • 因为服务端请求头引起的问题。

2. 解决方法
  • 请求全部改成Https即可；
  • 后台将 Access-Control-Allow-Headers: * 修改为 Access-Control-Allow-Headers: accept, content-type, origin, custom-header 即将自定义请求头和默认请求头全都写出来。

Q16：uni.onNativeEventReceive`回调不刷新

1. 问题原因
  • 可能是界面没有渲染完成导致数据更改无效问题
2. 解决方法
  • 在回调中加上this.$nextTick即可
//uni小程序JS代码 监听宿主触发给小程序的事件
uni.onNativeEventReceive((event, data) => {
    if (event == 'open_pay') {
        if (data.payStatus == 1) {
            this.$nextTick(() => { //当页面上的元素被重新渲染之后，再执行
                this.payResult.type = 'success'
                this.stepActive = 1
                this.$refs.uToast.show({
                    title: '支付成功',
                    duration: 1000,
                    type: 'success',
                })
            })
        }
    }
})

Q17： 需要权限弹窗提示用户权限业务

1. 问题原因
  • 部分安全检测机构要求，在业务涉及到权限申请时，需要以弹窗的形式给用户描述权限的业务。
2. 解决方法
  • @flyriselink/pai-mp-ui 升级到1.0.50以上；
  • key：涉及到权限申请的类型，定位、录音、相册、打电话、摄像头；
  • msg：权限业务相关的描述，格式：...权限，用于实现...功能。
//调了权限检测之后，再调用定位权限
this.$p.permit.check(this, "location", "定位权限，用于实现园区搜索")
    .then(res => {
        uni.getLocation({
            type: 'wgs84',
            success: (res) => {
                this.resultTv = "location-success:" + JSON.stringify(res)
                console.log('当前位置的经度：' + res.longitude);
                console.log('当前位置的纬度：' + res.latitude);
            },
            fail: (err) => {
                this.resultTv = "location:" + JSON.stringify(err)
            }
        });
    }).catch(err => {})
3.key说明

会检测对应权限是否申请，未申请自动弹出提示框，已申请，直接往下走。

key值 描述
location 定位
camera 摄像头
contact 通讯录读写
read_contact 通讯录读取权限
write_contact 通讯录写入权限
recode 麦克风
calendar 日历
read_write 存储读写
read 外部存储（含相册）读取权限
write 外部存储（含相册）写入权限
sms 短信
phone 打电话

Q18： uni-app 工程部署 H5 报错：at Function.Module._resolveFilename

报错信息：

...
at Function.Module._resolveFilename
...
code: 'MODULE_NOT_FOUND',

答：增加并锁定依赖版本：

"devDependencies": {
   .......
   "semver": "7.3.8",
   .......
}

或是直接命令行执行命令：

npm i semver@7.3.8 --save-dev -E
文档更新时间: 2025-01-16 09:30   作者：陈冕