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

问题描述：

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-来传递参数。