uniapp-mp

文章目录

uniapp 坑

uniapp 坑

uniapp 中不支持 reduce 方法。
不要使用行内方法，用 computed 或 filter 来代替
组件是没有 onload onshow 方法的，created 仍然可用，12个生命周期中，除了 activated、deactivated，其他都支持。
无法在一个 index.js 文件中导入组件再导出组件，做一个聚合功能的 js 文件。

computed 返回一个 function，再 v-bind 时调用会报错

<div :id="tagFilter('在 v-bind 调用 computed 返回的方法将会报错。')">
</div>
<script>
    // ...
computed: {
			tagFilter() {
				return function (name) {
					return name.slice(0, 2)
				}
			}
		}
    // ...
</script>

小程序里，如果 v-for 在页面中相同位置的元素渲染的值为 0.1 和 0.10，那么那个值先出现在页面上，那个值就会一直保存。（待确认，尝试下述例子的时候发现都显示为 0.1）
1
2
3
4
5
6
7
8
9
/* array: [0.1, 0.10] */
<div v-for="item in array" :key="item">
{{item}}
</div>
<div @click="array = [0.10, 0.1]"></div>

/*
点击按钮后，页面中渲染的 array 的值不会改变
*/
uni 的提示框显示应该写在转换路由的代码之后，才会显示在路由跳转后的页面，不然会闪现消失，因为 tips 是渲染在原页面，路由跳转完了就消失了。

uni 允许动态修改 tabbar 的图标与文字，允许控制 tabbar 的显示与隐藏，允许添加徽标。。文档见 https://uniapp.dcloud.io/api/ui/tabbar?id=settabbaritem

uni.setTabBarItem({
  index: 0, // 修改的第几个 tabbar，从 0 开始，必须是已存在的 tabbar
  text: 'text', // 文本
  iconPath: '/path/to/iconPath', // 未激活图标路径
  selectedIconPath: '/path/to/selectedIconPath' // 已激活图标路径
})

绘制 canvas 海报上线后必须在 https 环境，同时图片服务器需要设置允许跨域，否则将会污染画布，无法显示。

uniapp 的 input 输入框，在 @input 事件中为其赋值的时候，不是实时更新的，需要添加定时器来正确赋值，如果仅打包到微信小程序，可以直接 return 值来实时更新。

<input type="digit" :value="val" @input="handleInput" />
export default{   
	// ...
    methods: {
        handleInput(e) {
            // 在uni-app里发现如果返回的值跟上次的值是一样的不会触发页面更新,比如你输入5.922，它会返回5.92，但是如果你再继续在5.92后输入的话比如5.923，它还是返回5.92，跟上次一样所以不会触发更新，因此输入框里显示的还是5.923，不符合提交要求。
            // this.val = '' // 目前的解决方案是在输入时先清空原来的值
            this.val = e.target.value - 0 // 这里本来也应该用定时器赋值，但发现这样也有效，暂时不处理，这里严谨点需要判断一下 e.target.value 是否为 NaN，因为 uniapp 键盘允许输入 0-，就会变成 NaN。使用 Number.isNaN 判断
            console.log(e.target)
            if (e.target.value > this.max) {
                setTimeout(_ => {
                	this.val = this.max;
                })
            }
            if (e.target.value < this.min) {
                setTimeout(_ => {
                	this.val = this.min;
                })
            }
            this.$emit('input', this.val)
            //#ifdef MP-WEIXIN
            return this.val
            // #endif
        }
    }
}

PC 端小程序内核版本很低，很多 api 无法使用，如 Object.entries，需要 polyfill
调试 PC 端小程序时，点击上面工具条的预览按钮，点击自动预览，切换成 PC 端自动预览
正确的 input 赋值流程应该是，点击后为输入的值创造一个副本，不影响原来的 value 值，但失焦时，检验输入值是否有效，如果有效就把输入值赋值给 value，否则舍弃输入值，仍显示原来的 value，而不是每次输入值都去修改原来的 value 值，一般仅提供 change、blur、focus 方法。
微信小程序的地图如果使用默认的 map，想要用经纬度获取文字地址，需要引入腾讯地图的 jssdk，传入 key，之后逆解析得到地址。