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

问题描述：

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;}
} 
//jsdata: {x: 340,y: 700,  //这里根据wx.getSystemInfoSync这个方法获取设备信息去具体计算},

7. 关于设置宽度后设置padding内容溢出的问题

原因分析：
父组件中使用padding: 0 24rpx; 然后再使用width: 100%;导致页面元素内容溢出

解决方案：
因为 width: 100%; 是相对于父组件的宽度计算的，而父组件的 padding 会导致父组件的实际宽度大于其内容的宽度。

• 父元素设置box-sizing: border-box;
• 调整子组件的宽度width: calc(100% - 48rpx);
• 去除width: 100%;