微信小程序中遇到过的问题

news2025/1/4 15:33:10

记录微信小程序中遇到的问题（持续更新ing）

问题描述：
1. WXML中无法直接调用JavaScript方法。
2. css中无法直接引用背景图片。
3. 关于右上角胶囊按钮。
4. 数据绑定问题。
5. 事件处理问题。
6. 关于movable-view组件的问题
7. 关于设置宽度后设置padding内容溢出的问题

问题描述：

1. WXML中无法直接调用JavaScript方法。

原因分析：
由于WXML和JavaScript是两种不同的语言，它们之间没有直接的交互方式。
解决方案：

尽量在js中处理，并在WXML中显示。
使用wxs，
创建wxs文件并通过 module.exports导出

    //index.wxs文件
    var toFixed = function (num) {
      console.log(num);
      return num.toFixed(2);
    }
    module.exports = {
      toFixed: toFixed
    }
    //index.wxml文件
    <wxs src="./index.wxs" module="XXX"></wxs> //这样引用
    <view>{{XXX.toFixed(3.1415)}}</view>       //使用

返回的3.14
最后看打印结果
在这里插入图片描述
注意事项： wxs文件中不支持es6写法，let、const、export这些都是不可以的！

2. css中无法直接引用背景图片。

原因分析：
由于微信小程序的文件结构限制，CSS文件只能引用小程序的静态资源文件，如图片、字体等。
解决方案：

路径改成可以直接访问的绝对路径。

background-image: url("https://pic.netbian.com/uploads/allimg/240308/012824-17098325042f18.jpg");

将图片转换为base64编码。
在标签上写入样式

 	<view  style="background-image: url('../xx.png')"></image>

使用image标签并使用绝对定位

	<view class="box">
	 	<image class="box-bg" src="../bg.png" />
	</view>
	//css文件
	.box{
 		 position: relative;
 		 .box-bg{ 
   			 position: absolute;
		 } 
	}

3. 关于右上角胶囊按钮。

原因分析：
由于css样式调整，需要自定义顶部导航栏。
解决方案：
- 官方自带的不能去掉，但是通过设置backgroundTextStyle等来设置文字颜色与背景等。

在微信小程序的app.json文件中，可以设置navigationStyle属性为custom，来自定义顶部导航栏

4. 数据绑定问题。

原因分析：
习惯使用this.XXX = data 或者 XXX.value = data 或直接XXX = data导致赋值不上
解决方案：
正确使用this.setData()来更新数据

this.setData({
  XXX: 'Data'
})

5. 事件处理问题。

**原因分析：**
习惯使用`click、@click`来绑定事件，并通过 `@click = XXX(data)` 来传参

解决方案：
在小程序中事件绑定有使用特定的语法

绑定事件使用bindtap、catchtap、bindinput 等
在事件处理函数中，使用event参数获取事件对象。或者使用data-来传递参数。

6. 关于movable-view组件的问题

原因分析：
使用movable-view滑动不生效、想去除页面切换时滑动的动画、设置定位right、bottom等不生效

解决方案：

首先movable-view组件必须放在在 movable-area 组件中，并且必须是直接子节点，否则不能移动。
movable-area 组件必须设置width和height属性，不设置默认为10px，不能滑动。
去除页面切换时滑动的动画可以在movable-view组件中设置 animation=“{{false}}”。
movable-view 默认为绝对定位，top和left属性为0px ，设置定位right、bottom不生效要设置left与top才行，或者在movable-view组件中设置x={{x}}与y={{y}}
movable-view 必须设置width和height属性，不设置默认为10px。

请添加图片描述
实现代码

  //wxml
  <movable-area class="card-box">
    <movable-view class="card-view" animation="{{false}}" x="{{x}}" y="{{y}}" direction="all">
    <image class="card-view" src="../../../public/card.png"></image>
    </movable-view>
  </movable-area>
  //css
  .card-box {
  position: absolute;
  top: 0;
  width: 100%;
  height: 90vh;
  .card-view {
    width: 64rpx;
    height: 64rpx;
    z-index: 999;
  }
} 
//js
  data: {
    x: 340,
    y: 700,  //这里根据wx.getSystemInfoSync这个方法获取设备信息去具体计算
  },