我在使用uniapp开发微信小程序中遇到的问题的解决方法(持续更新)

1、获取某个元素的高度

这个方法用于获取class为listActive的元素的高度

const query = uni.createSelectorQuery().in(this);
query.select('.listActive').boundingClientRect(({ height }) => {
    console.log('高度是:' + height + 'px');
}).exec();

2、需要使用微信云开发接入细节

  • 填入正确的appid
  • 在mp-weixin下添加参数
    "cloudfunctionRoot": "cloudfunctions/"
  • 在主目录下创建cloudfunctions目录
    — 注意:该目录不能为空,可以随便放一个文件进去测试
  • 安装 copy-webpack-plugin
    # 初始化
    npm init
    # 然后一直点回车就好了
    ····
    # 安装
    npm install copy-webpack-plugin@5.1.1  --dev
  • 创建vue.config.js,直接复制下面代码就好了

    const path = require('path')
    const CopyWebpackPlugin = require('copy-webpack-plugin')
    
    module.exports = {
        configureWebpack: {
            plugins: [
                new CopyWebpackPlugin([
                    {
                        from: path.join(__dirname, 'cloudfunctions'),
                        to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'development' ? 'dev' : 'build', process.env.UNI_PLATFORM, 'cloudfunctions')
                    }
                ])
            ]
        }
    }
  • 然后就可以测试运行了, 打包后的文件目录中有cloudfunctions目录以及文件就是成功了

3、使用uni.switchTab跳转到 tabBar 页面并传递参数

想在跳转的时候带上参数,但是官方文档中说不可携带参数,我们可以使用uniapp的globalData解决此问题传递参数

  • 在App.vue中初始化一下数据
    globalData: {
        data: 0
    }
  • 在跳转之前设置好数据
    getApp().globalData.data = 1
  • 在接受的页面的onShow方法中接收变量
    this.data= getApp().globalData.data
  • 就可以成功接收到数据并使用了,接收到数据后还可以对getApp().globalData.data中的数据进行一下初始化,方便下次使用

4、onLoad和onShow的区别

  • onLoad
    — 只在页面初始化的时候执行一次
    — 用于接收其他页面传入的参数
  • onShow
    — 每次切换到页面都会执行一次
  • 执行顺序
    — onLoad先于onShow

5、微信云开发中的模糊查询

  • 我们需要用到RegExp方法
    db.collection('todos').where({
      description: db.RegExp({
        regexp: 'data',
        options: 'i',
      })
    }).get()
  • 其中
    — description是数据库中的字段名
    — data是输入的关键字
    — option是匹配的参数,如下
参数 说明
i 大小写不敏感
m 跨行匹配;让开始匹配符 ^ 或结束匹配符 $ 时除了匹配字符串的开头和结尾外,还匹配行的开头和结尾
s 让 . 可以匹配包括换行符在内的所有字符

6、获取微信昵称时无法获取到input中的数据

当点击使用微信昵称的时候,@input和@blur都无法获取到输入框中的内容

  • 我们可以使用@change事件来获取到内容
    # input中加上
    @change="getNickName"
    # methods中加上方法
    getNickName(res) {
        console.log(res);
    },

7、编译出现[ project.config.json 文件内容错误] project.config.json: libVersion 字段需为 string, string错误

  • 在manifest.json文件中的mp-weixin中加上"libVersion": "latest"
    "mp-weixin": {
        ········
        "libVersion": "latest"
    },

8、判断一个对象中的元素是否存在

  • 使用下面两个方法可以判断
    1. obj.hasOwnProperty("元素名")
    2. "元素名" in obj
上一篇
下一篇