美文网首页
微信小程序新手踩坑攻略

微信小程序新手踩坑攻略

作者: Dawn_wdf | 来源:发表于2023-05-09 19:05 被阅读0次

    按照微信官方文档创建了使用云开发的小程序后,运行报错?

    • 报错1:提示找不到环境env
      解决方案:在miniprogram/app.js中将以下代码打开,并填写创建的环境ID。环境ID的创建可以在开发工具左上角的云开发中创建
     env: '',
    
    • 以上解决后再次运行,报错
    showActionSheet:fail parameter error: parameter.itemList should have at least 1 item;
    

    解决方案:在miniprogram/envList.js中填写环境ID

    const envList = ['cloud1'];
    
    • 再次运行报错,
    showActionSheet:fail parameter error: parameter.itemList[0] should be String instead of Undefined;
    

    解决方案:
    小程序自动生成的代码中在使用这个环境ID的时候用了

    itemList = this.data.envList.map(i => i.alias);
    

    所以要么修改环境列表结构如下

    const envList = [
      { id: 'cloud1-', alias: '环境1' },
      { id: 'cloud2-xxxxxx', alias: '环境2' },
      { id: 'cloud3-xxxxxx', alias: '环境3' },
      // 其他环境...
    ];
    

    要么调整代码判断环境列表的结构

    onChangeShowEnvChoose() {
        let itemList;
        if (this.data.envList.length === 1) {
          itemList = [this.data.envList[0]];
        } else {
          itemList = this.data.envList.map(i => i.alias);
        }    
        console.log(itemList);
        wx.showActionSheet({
          itemList:itemList,
          success: (res) => {
            this.onChangeSelectedEnv(res.tapIndex);
          },
          fail (res) {
            console.log(res.errMsg);
          }
        });
      },
    

    tip:这里的资源环境只能决定小程序使用的环境,无法决定云函数的,所以在使用云函数时,需要再次填写环境ID。

    ?? 在哪里填写的云函数环境ID??
    -在初始化的函数中
    ??在哪里设置cloud.DYNAMIC_CURRENT_ENV这个默认环境??

    wx.cloud.init({
            env: wx.cloud.DYNAMIC_CURRENT_ENV,
            traceUser: true,
          });
    

    ??云函数只能使用nodejs写么??
    是的

    云托管部署(Python)

    • 推荐使用Dockerfile进行部署,这个文件很重要
      ** 强烈不推荐使用mac自带的文本编辑器进行这个文件的创建,谁用谁知道,那是真不行
    • 文件内容如下
    FROM python:3
    WORKDIR /app
    COPY requirements.txt .
    RUN pip install --no-cache-dir -r requirements.txt
    COPY . .
    CMD ["python", "app.py"]
    

    翻译一下上面的内容是:

    • 使用Python3
    • 创建一个文件夹APP
    • 复制一下requirements.txt
    • 安装一下requirements.txt里面写的依赖的库
    • 复制一下文件内容到目录下
    • 执行文件中的app.py文件

    requirements.txt文件内容举例如下,需要写上依赖的库,还要写库的版本

    flask== 2.1.1
    

    云开发云函数部署

    按照官方文档创建了云函数后,本地调试是没有问题的,但是如果上传并部署后就会报错

    {"errCode":-404011,"errMsg":"cloud.callFunction:fail requestID , cloud function service error code -501003, error message Request exceeded the limit; at cloud.callFunction api; ","requestID":""}
    

    解决方案:在app.js中将自己创建的云开发的环境ID写上就行,不要写env: wx.cloud.DYNAMIC_CURRENT_ENV,写了这个就调用失败

    App({
      onLaunch: function () {
        if (!wx.cloud) {
          console.error('请使用 2.2.3 或以上的基础库以使用云能力');
        } else {
          wx.cloud.init({
            env: 'cloud1-212345ty',
            // env: wx.cloud.DYNAMIC_CURRENT_ENV,
            traceUser: true,
          });
        }
        this.globalData = {};
      }
    });
    

    使用vant weapp遇到的问题

    官方地址:https://vant-contrib.gitee.io/vant-weapp/#/quickstart

    • 按照官方的流程,在步骤三 修改 project.config.json中,我按照新版本配置如下
    "packNpmManually": true,
        "packNpmRelationList": [
          {
            "packageJsonPath": "./package.json",
            "miniprogramNpmDistDir": "./"
          }
        ],
    

    然后构建NPM报错packageJsonPath不能只能用package.json结尾,不能使用./package,原因是之前确实没有用.json结尾,但是修改后还是报这个错,就重启了工具,好了,这工具就是欠收拾。

    • 在使用的过程中官方文档给的代码是
    "usingComponents": {
      "van-button": "@vant/weapp/button/index"
    }
    

    这里的地址是需要替换成自己确定的文件路径,比如:

        "van-button":"../miniprogram_npm/@vant/weapp/button/index"
    
    • 替换成自己的路径后,运行报错
    app.json: ["usingComponents"]["van-button"] 未找到
    

    因为构建的时候miniprogram_npm和node_modules都默认跟project.config.json在同一个目录下,但是在project.config.json文件中的根目录是这么配置的

    "miniprogramRoot": "miniprogram/",
    

    最开始的目录结构如下
    miniprogram_npm/
    node_modules/
    miniprogram/
    project.config.json
    然后手动将miniprogram_npm和node_modules都拖拽到miniprogram下就可以了

    vant uploader中after-read方法没有调用

    正确调用代码如下

    <van-uploader file-list="{{ ImageList }}" max-count="1" deletable="{{ true }}"  accept='image' name='main' max-size="2097152" bind:after-read='selectImageDone' bind:delete='deleteImageTapped' bind:oversize='imageOverSize'/>
    

    网上查找的方案都是说不支持带有‘-’的方法名,让去源文件中改名。但是我改后并没有生效。查询了源码后发现,之所以没有调用是因为在判断图片大小的地方就跳出了,原因是我最开始设置max-size的时候写的是max-size='2* 1024 * 1024',官方文档说明这个参数应该是Number类型,把数计算出来,直接写max-size="2097152",就可以了,不用改源码。

    使用微信云托管创建Python环境的服务器,如何自动生成requirements.txt。

    pip install pipreqs
    pipreqs --use-local --encoding=utf8 --force 
    

    会在当前目录自动生成一个requirements.txt,然后直接将这个文件打包放到微信云服务就可以了。

    \color{red}{待解决}

    相关文章

      网友评论

          本文标题:微信小程序新手踩坑攻略

          本文链接:https://www.haomeiwen.com/subject/hezejdtx.html