2021-12-01 工作记录--Wechat applet-邂逅

1、尺寸单位

文档链接：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#尺寸单位

2、事件

文档链接：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

example:【catchtap点击事件】

第1步、wxml里面需要监听点击事件的地方写入catchtap="方法名"，假如 想要传参数，则在旁边自定义一个最好是以data-开头的属性，属性值即为你需要通过该方法拿到的参数

第2步、js里面写入方法，并传入一个形参（自定义），这里为e，打印e，即可找到传过来的参数

第3步、js里面拿到参数index

3、数据绑定

文档链接：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html

4、列表渲染（wx:for）

1、文档链接：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

1. 默认 数组的当前项的下标变量名 默认为 index（索引值），数组当前项的变量名 默认为 item；
2. 使用 wx:for-index 可以指定 数组的当前项的下标变量名（即索引值），eg：wx:for-index="idx"；
3. 使用 wx:for-item 可以指定 数组当前项的变量名，eg：wx:for-item="variable"。
   
   

2、下面链接对其介绍也很详细：

链接：https://www.w3cschool.cn/weixinapp/weixinapp-list.html

5、条件渲染（wx:if）

1、文档链接：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html

2、多条件渲染

wx:if = "{{判断条件}}"
wx:elif = "{{判断条件}}"
wx:else

example1:

example2：【搭配view】

<view wx:if="{{item.type == 1}}">
    <view class="color_red"></view>
</view>
<view wx:elif="{{item.type == 2}}">
    <view class="color_pink"></view>
</view>
<view wx:elif="{{item.type == 3}}">
    <view class="color_blue"></view>
</view>
<view wx:else>
    <view class="color_green"></view>
</view>

example3：【搭配block】

<block wx:if="{{item.type == 1}}">
    <view class="color_red"></view>
</block>
<block wx:elif="{{item.type == 2}}">
    <view class="color_pink"></view>
</block>
<block wx:elif="{{item.type == 3}}">
    <view class="color_blue"></view>
</block>
<block wx:else>
    <view class="color_green"></view>
</block>

6、WXS模块

文档链接：https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html

第1步、自定义一个.wxs，这里取名为tool.wxs

第2步、在tool.wxs里面封装需要的函数，用module.exports导出来

第3步、在需要使用该函数的wxml里面导入tool.wxs

<wxs src="./tool.wxs" module="tool"></wxs>

第4步、在需要使用该函数的wxml里面调用该函数：{{tool.tool(参数)}}

【注意：第一个tool是wxs的名字，因为名字叫tool.wxs；第二个tool是导出的函数名称】

7、JS中获取data里的值

是this.data.值，而不是this.值

8、JS中给data里的值赋值

this.setData({
	show: false; // data里的值：新值
}),

9、修改当前页面最上面的标题

第一种方法、在对应×××.json中进行修改

对应代码：

"navigationBarTitleText":"全勤挑战赛" // 注意：最后面不要加逗号，不然会报错呢，因为最后一个后面不要加逗号

第二种方法、在对应×××.js中进行修改

对应代码：

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    wx.setNavigationBarTitle({
        title: '全勤挑战赛'
    })
  }, // 注意：最后面要加个逗号哟，不然会报错滴

10、修改当前页面最上面的背景颜色

在对应×××.json中进行修改

对应代码：

"navigationBarBackgroundColor":"#ffaf10",

11、修改当前页面最上面的时间、WIFI等的字体颜色

在对应×××.json中进行修改

对应代码：

"navigationBarTextStyle":"white"

12、自定义当前页面最上面的样式

在对应×××.json中进行修改

对应代码：

"navigationStyle":"custom",

13、关闭当前页面，返回上一页面或多级页面

文档链接：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html

在对应×××.js中使用

对应代码：

wx.navigateBack(); // 关闭当前页面，返回上一页

14、在新页面中全屏预览图片（wx.previewImage）

文档链接：https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html

15、引入外部CSS

在对应×××.wxss中进行修改

对应代码：

/* 引入外部css */
@import '外部CSS的对应地址';

16、自定义组件

文档链接：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html