微信小程序-项目遇到的问题合集

注意事项：

重复调用请求影响服务器性能尤其是全局调用时要多检查
微信小程序的三目运算格式中冒号前后如果是字符串的一定要用双引号或单引号包起来，否则不生效。示例：a ? ‘b’ : ‘c’

tailwind 、taro 、小程序之间的问题

解决构建后生成的miniprogram_npm包太大，主包超过2M

在project.config.json中的setting设置

1 2	"ignoreDevUnusedFiles": true, // 预览、真机调试和本地模拟器等开发阶段是否过滤无依赖文件，默认为true "ignoreUploadUnusedFiles": true // 上传时过滤无依赖文件

其他配置参考微信小程序项目配置文件

解决vscode中ts插件与小程序的api的飘红线问题

在typings/index上添加

1	/// <reference path="../node_modules/miniprogram-api-typings/index.d.ts" />

解决tsconfig.json报错【找不到“sass”的类型定义文件。程序包含该文件是因为:隐式类型库 “sass” 的入口点】

安装

1	npm install --save-dev @types/sass@1.43.1

然后重启vscode
如果还飘红，则在tsconfig.json中添加以下配置项
1
2
3
"compilerOptions": {
"types": ["sass"]
}

解决tailwindcss和小程序的结合后 @tailwind base;之类的增加到app.scss中微信小程序报错【app.wxss unexpected token “;”】

执行

1	npx tailwindcss -o ./src/style/tailwind.css

在index.html中的head标签添加

1	<link href="./style/tailwind.css" rel="stylesheet" />

解决发现tailwind的样式在小程序中不生效

参考文档：Taro项目引入Tailwindcss的几种方式

安装

1	npm install -D tailwindcss postcss autoprefixer weapp-tailwindcss

初始化配置
1
npx tailwindcss init

在tailwindcss.config.js增加配置

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 不在 content 包括的文件内编写的 class，不会生成对应的工具类
  content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
  // 其他配置项
  // ...
  corePlugins: {
    // 不需要 preflight，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
    preflight: false
  }
}

创建postcss.config.js,并注册tailwindcss

// postcss.config.js
// 假如你使用的框架/工具不支持 postcss.config.js，则可以使用内联的写法
// 其中 `autoprefixer` 有可能已经内置了，假如框架内置了可以去除
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

在项目的配置文件 config/index中注册weapp-tailwindcss:

// config/index.js
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')
{
  mini: {
    webpackChain(chain, webpack) {
      chain.merge({
        plugin: {
          install: {
            plugin: UnifiedWebpackPluginV5,
            args: [{
              appType: 'taro'
            }]
          }
        }
      })
    }
  }
}

和@tarojs/plugin-html 一起使用时，需要配置下 postcss-html-transform 这个插件，不然它会移除整个 Tailwindcss 注入的 css var 区域块，造成所有 tw-* 相关变量找不到。

// config/index.js
config = {
  mini: {
    postcss: {
      htmltransform: {
        enable: true,
        // 设置成 false 表示 不去除 * 相关的选择器区块
        // 假如开启这个配置，它会把 tailwindcss 整个 css var 的区域块直接去除掉
        // 需要用 config 套一层，官方文档上是错的
        config: {
          removeCursorStyle: false,
        }
      },
    },
  },
}

在项目入口(app.scss)引入tailwindcss

1
2
3

@import "tailwindcss/base";
@import "tailwindcss/utilities";
@import "tailwindcss/components";

关于js、node配置的问题

运行js文件时

解决提示

1	【Warning: To load an ES module, set "type" - "module" in JS】

在package.json中配置type:”module”

运行js文件时

解决提示

1	【Invalid package config E:\practice\p-four\node_modules\iconv-lite\package.json while importing "iconv-lite" from xxxx.js. Unexpected token < in JSON at position 101】

运行
1
npm install

运行项目

解决提示

1	【Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'xxx\config\webpack.common' imported from xxx\config\webpack.dev.js】

把package.json的type去掉

运行项目网页

解决提示

1	【Refused to apply style from 'http://localhost:9000/comp/asset/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.】

webpack.config.js 添加 publicPath 属性

module.exports = {
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "build.[contenthash:10].js",
    publicPath: "/",
  },
}

参考文章：该文章最后一个问题

项目运行后

解决刷新就会提示

1	【GET http://localhost:9000/comp/asset/image/gongzuotai.png 404 (Not Found)】

图片的路径不对，在所有使用图片的路径中使用
1
2
✔ /asset/image/xxx.jpg
❌ asset/image.xxx.jpg

遇到提示

解决view…之类的标签报错问题或者template_v0_p1之类的问题，大概率是项目中不支持该标签
排查标签使用是否正确。例如：遇到页面使用div标签，然后用来小程序使用的view标签

npm报错

解决提示淘宝镜像过期

1	request to https://registry.npm.taobao.org failed, reason certificate has expired</span>

重新配置淘宝镜像

查看当前的npm镜像: npm config list
清空缓存: npm cache clean --force
修改镜像: 
  [推荐]npm config set registry https://registry.npmmirror.com
  npm config set registry https://registry.npmjs.org/
  npm config delete registry

npm构建报错

解决构建不出miniprogram_npm

在project.config.json中添加配置

"packNpmManually": true,
"packNpmRelationList": [
	{
		"packageJsonPath": "./package.json",
		"miniprogramNpmDistDir": "./"
	}
],

textarea 获取参数在个别手机(Android 13)获取不到

传参用[data-xxx]

如果在wx:for循环中，不能直接使用index，必需使用列表里面的值来传参
PS: 别为了省事直接拿列表的遍历的index，在模拟器没发现问题，但不可取

<view wx:for="{{list}}" wx:key="index">
<textarea 
  auto-height 
  maxlength="{{500}}" 
  placeholder="" 
  value="{{ service.itemMemo }}" 
  bind:input="changeInput" 
  data-id="{{service.id}}" />
</view>

微信小程序-项目遇到的问题合集

UUOVO

注意事项：

tailwind 、taro 、小程序之间的问题

解决构建后生成的miniprogram_npm包太大，主包超过2M

解决vscode中ts插件与小程序的api的飘红线问题

解决tsconfig.json报错【找不到“sass”的类型定义文件。程序包含该文件是因为:隐式类型库 “sass” 的入口点】

解决tailwindcss和小程序的结合后 @tailwind base;之类的增加到app.scss中微信小程序报错【app.wxss unexpected token “;”】

解决发现tailwind的样式在小程序中不生效

关于js、node配置的问题

运行js文件时

运行js文件时

运行项目

运行项目网页

项目运行后

遇到提示

npm报错

npm构建报错

textarea 获取参数在个别手机(Android 13)获取不到

其他文章

JS-定时器与延时器

微信小程序-小程序优化 | 学习笔记