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

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

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

问题描述：

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

原因分析：

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

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

javascript 复制代码

    //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文件只能引用小程序的静态资源文件，如图片、字体等。
解决方案：

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

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

	<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()来更新数据

javascript 复制代码

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。

实现代码

javascript 复制代码

  //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这个方法获取设备信息去具体计算
  },

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

原因分析：

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

解决方案：

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

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