（二）小程序学习笔记——初识：标签、数据绑定、指令介绍

1、rpx：是微信小程序的自适应的单位，根据不同设备的屏幕宽度进行自适应缩放。

2、小程序规定任何型号的手机的屏幕宽度都为 750rpx。

3、小程序中常用的组件：view、swiper（滑块视图容器—轮播图的盒子）和swipe-item（轮播图的每一项）、text、navigator、scroll-view、字体图标。

4、image组件 ，常用的属性有4个

（1）src图片的地址

（2）mode：图片剪裁、缩放的模式

（3）show-menu-by-longpress：长按图片显示的菜单，复制，收藏，保存，转发等

（4）lazy-load：图片懒加载 （在滑动到上下三屏）以后展示图片

5、text组件：常用的属性有两个：

（1）user-select：本文是否可选，用于长按选择文本

（2）space：显示连续空格 ensp:显示空格(中文空格一半大小)；emsp（中文空格）；nbsp：根据字体设置的空格大小

注意事项：如果想实现长按选择文本只能使用text组件；text组件内只支持text嵌套

6、navigation组件：

（1）url当前小程序的跳转链接

（2）open-type ：跳转方式

注意事项：

（1）页面跳转时，url内的路径需要在前面加上 / 斜线，否则跳转不成功

（2）open-type的值为 navigate 、redirect 只能跳转到非TabBar页面，不能跳转到TabBar页面；navigate 保留上一级页面，又返回。redirect没有返回上一级，即会关闭上一级页面，只能返回到首页。

（3）值为switchTab：只能跳转到TabBar页面不能跳转到非TabBar页面

（4）reLaunch：关闭所有有页面，然后打开小程序中某一个页面。
（5）navigateBack：返回上一页或者返回前几页，默认只能返回上一页，如果返回前几页，需要加上delta属性，需要返回几 delta的值就是几

（6）传参使用?连接，属性名和属性值使用功能=号，如果需要传多个属性，使用&连接符。通过生命周期函数onLoad（options）中options接收参数。
（7）open-type的值为switchTab属性时不能传参，不起作用

7、scroll-view组件

实现内容的滚动效果。scroll-x允许横向滚动，scroll-y允许纵向滚动。

8、阿里巴巴字体图标

使用字体图标可能会报错：【渲染层网络层错误】Failed to load font…,该错误可忽略。

但在控制台出现错误，会影响开发调试，解决方案是：将字体图标转换成base64的格式。

9、小程序背景图可以使用background-image设置，到那时不能写本地路径background-image:url(…/…/img.png)

可以使用网络地址或者将图片转换成base64的格式，然后进行使用。或者使用image替换background-image

10、小程序的事件绑定和事件对象：

小程序中没有on和click，若想绑定事件可以使用bind 和 tap。（1）bind:tap=“事件名” （2）bindtap=“事件名”

事件对象（event）

input框获取值

 <input type="text" bindinput="getInputvalue" />   

getInputvalue(event) {

onsole.log(event.detail.value, "--")

  }
1
2
3
4
5
6
7

11、阻止事件冒泡：catch 绑定事件 catch:tap=“事件名”

12、事件传参：data-*，*代表自定义的属性，接收数据：通过事件对象

event.dataset.currentTarget或event.dataset.target中获取
currentTarget：事件绑定者，哪个组件绑定了当前时间处理函数
target：事件触发者，指哪个组件触发了当前事件。

注意：（1）事件传参如果自定义属性是多个单词，用-（中划线）连接，例如 :data-parent-id，获取的时候使用小驼峰形式获取，event.dataset.currentTarget.parentId；（2）如果自定属性使用的是小驼峰写法data-parentId，获取时候全部转换为了小写的event.dataset.currentTarget.parentid

13、事件传参：mark：自定义属性 ；获取 event.mark.属性名

注意：通过事件兑现高中mark获取的是 触发事件对的节点和其父节点身上所有的mark数据

14、wxml语法声明写在Page（{}）中，绑定数据使用{{}}。

注意：双大括号内部只能写表达式，不能写语句，也不能调用js的相关方法。

15、在微信小程序中通过setDara({key：value})，setData作用：（1）修改数据（2）更新视图

16、setData（）修改对象类型数据:

（1）新增 单个多个属性

   setData({‘userInfo.name’：‘1’})
    const obj = Object.assign({},this.data.userInfo)  
    setData({userInfo:obj})
1
2
3

（2）修改 单个多个属性

  const userInfo = {...this.data.userInfo ;name:“Jerry”，age:18}; 
  this.setData（{userInfo}}）
1
2

（3）删除 单个多个属性

   const {age，test，..rest } = this.data.userInfo ;  
   this.setData（{userInfo：rest}}）
1
2

17、setData（）修改数组：
新增：

（1）this.data.list.push(4);  this.setData（{list：this.data.list}}）

（2）const newList = this.data.list.concat(4);  this.setData（{list：newList }}）

（3）const newList = [this.data.list,4];  this.setData（{list：newList }}）
1
2
3
4
5

修改：

 this.setData（{‘list[0]’：6}}）
1

删除：

（1）this.data.list.splice(1,4); 
 this.setData（{list：this.data.list}}）

（2）const newList = this.data.list.filter（item=>item !==2）
 this.setData（{list：newList }}）
1
2
3
4
5

18、小程序双向数据绑定：model:value;

注意：
（1）属性值只能是一个单一字段的绑定，错误写法 ：

（2）属性值不能写数据路径，不支持对象和数组。 错误写法：

19、列表渲染—wx:for 、wx:for-item 、wx:for-index、 、

（1）建议加上wx:key
（2）在给wx:key添加属性值的时候，不需要使用大括号语法，直接使用遍历array中item的某个属性。
（3）对于数组：item:数组汇总的每一项 ;index：下标；对于对象：item:value;index：key
（4）wx:key 的注意事项：
①wx:key的属性值不需要{{}}，直接写属性名即可。
②属性值是字符串，需要遍历的数组中 item 的某个属性，要求该属性是列表中唯一的字符串或者数字，不能改变。
③保留关键字“*this” ， “*this”代表 item本身，item本身是唯一的字符串或者数字。
（5）wx:for-item 可以指定数组当前元素的标量名。修改默认的变量名。
（6）wx:for-index 可以指定数组当前下标的标量名。修改默认的下标变量名。
（7）不是一个组件，是一个包装元素，类似于

20、wx:if、wx:elif、wx:else、hidden属性

wx:if、wx:elif、wx:else属性组的组件必须连贯不能被打断。
hidden属性值如果是 true 展示；否则隐藏