微信小程序(3)

发表于 更新于 分类于

常见组件

view

代替原来的div标签，另外还有些新增的属性

text

text具有以下特点：1、文本标签 2、只能嵌套text标签 3、只有这个标签可以长按文字复制 4、可以对空格回车进行编码

image

1、image组件默认宽度320px、高度240px

2、支持懒加载

swiper

轮播图外层容器swiper，每一个轮播项用swiper-item括住。

swiper标签存在默认样式：widht100%、height150px

在需要轮播图的页面文件夹的wxml文件下写入代码：

1
2
3
4
5
<swiper>
  <swiper-item><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg"/></swiper-item>
  <swiper-item><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg"/></swiper-item>
  <swiper-item><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"/></swiper-item>
</swiper>

在wxss设定swiper和image样式

1
2
3
4
5
6
7
8
swiper{
  width:100%;
  /* swiper的width*图片高度/图片宽度 */
  height:calc(100vw * 520 /280)
}
image{
  width:100%;
}

接着我们就可以向swiper标签添加属性

导航组件

1
<navigator url="/pages/lock/lock">轮播图页面</navigator>

url可以是就绝对也可以是相对的，如果我们是从开发者工具直接复制相对地址，要改变斜杠方向，且要在pages前加/。

运行不了可能是因为页面中的跳转路径与app.json中配置的tabBar相重复。把PS：我开始也是卡在这，靠弹幕大佬改好的

学到后面，才知道这个我们也可以直接通过navigator的属性open-type进行修改

rich-text

富文本标签，可以将字符串解析成对应标签。

button

button的属性这部分的内容完全可以靠官方文档学习，不需要记录。我们具体学习button的其他能力。

button的开发能力：open-type：

1、contact直接打开客服对话功能，需要真机调试。具体的实现请参考B站

2、转发当前的小程序到微信朋友中，不能把小程序分享到朋友圈

1
<button open-type="share">share</button>

3、getPhoneNumber获取当前的手机号码信息

在wxml文件中写入：

1
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>

在js中写入获取电话号码的信息：

1
2
3
getPhoneNumber(e){
  console.log(e)
}

这里获取到的信息是已经加密过的，需要用户自己搭建小程序的后台服务器，在后台服务器中进行解析。再返回小程序中

注意：不是企业的小程序账号，没有权限获取用户的手机号码。

4、getUserInfo获取当前用户的个人信息

在wxml文件中写入：

1
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>

在js中写入：

1
2
3
getUserInfo(e){
  console.log(e)
}

5、launchApp在小程序当中直接打开app

？？？刚开始我也是一脸疑惑，为啥要在小程序打开app。而且他这个比较难实现，有需要再学，跳过

6、openSetting打开小程序内置的授权页面

1
<button open-type="openSetting">openSetting</button>

7、feedback打开小程序内置的意见反馈页面

1
<button open-type="feedback">feedback</button>

只能通过真题调试

icon

该部分的内容也是可以通过官方文档来完成学习的，并不是特别难

radio

单选框标签

在wxml文件

1
2
3
4
5
<radio-group bindchange="handlechange">
  <radio value="male" color="red">男</radio>
  <radio value="female">女</radio>
</radio-group>
<text>你的性别是{{gender }}</text>

在js文件

1
2
3
4
5
6
7
8
9
data: {
  gender:""
},
handlechange(e){
  let gender=e.detail.value
  this.setData({
    gender:gender=="male"?"男":"女"
  })
}

checkbox

复选框标签

wxml文件

1
2
3
4
5
6
7
8
9
10
<view>
  <checkbox-group bindchange="handleItemChange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
      {{item.name}}
    </checkbox>
  </checkbox-group>
  <view>
    选中的水果{{checklist}}
  </view>
</view>

js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
data: {
    list:[{
      id:0,
      name:"DY",
      value:"apple"
    },
    {
      id:1,
      name:"XJ",
      value:"banana",
    },
    {
      id:2,
      name:"CZ",
      value:"orange"
    }
  ]
  },
  handleItemChange(e){
    const checklist=e.detail.value
    this.setData({checklist})
  }

自定义组件

我们可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用

创建自定义组件

在项目的根目录创建一个新的文件夹conponents，在目录下再创建一个Tabs文件夹，接着在Tabs下右键新建一个conponent文件并将其命名Tabs。

由此，我们就创建了Tabs组件

接着我们要使用这个自定义组件

我们首先打开需要使用自定义组件的文件夹的json文件，其中有个usingCompon，将需要添加的组件名和路径写入

1
"Tabs":"../../conponents/Tabs/Tabs"

在当前页面的wxml文件使用一下，

1
<Tabs></Tabs>

bingo！！！

组件优化

在组件的文件夹的wxml文件中放入

1
2
3
4
5
6
7
8
9
10
11
12
<view class="tabs">
 <view class="tabs_title">
  <!-- <view class="title_item active">首页</view>
  <view class="title_item">分类</view>
  <view class="title_item">原创</view>
  <view class="title_item">关于</view> -->
  <view wx:for="{{tabs}}" wx:key="id" class="title_item {{item.isActive?'active':''}}" bindtap="handleItemTap"  data-index="{{index}}">
  {{item.name}}
  </view>
 </view>
<view class="tabs_content">内容</view>
</view>

wxss中写入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.tabs{}
.tabs_title{
  display: flex;
  padding: 10rpx 0;
}
.title_item{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center
}

.active{
  color:red;
  border-bottom: 5rpx solid currentColor;
}
.title_content{}

js文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
data: {
    tabs:[
      {
        id:0,
        name:"首页",
        isActive:true
      },
      {
        id:1,
        name:"分类",
        isActive:false
      },
      {
        id:2,
        name:"原创",
        isActive:false
      },
      {
        id:3,
        name:"关于",
        isActive:false
      }
    ]

  },
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e){
       const {index}=e.currentTarget.dataset;
       let {tabs}=this.data;
       tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
       this.setData({
         tabs})
    }
  }

注意：页面js文件中存放事件回调函数的时候存放在data同层级下，组件js文件中存放事件回调函数的时候必须存在methods中

父组件向子组件 传递数据

父组件向子组件传递数据，通过标签属性的方式来传递

这个部分适用于拥有共同框架的页面，拥有共同框架我们就只需要把属性的值改了。所以，我们不要把用共同框架的属性的值固定，要可以传值改变。引用上面的例子：

首先我们要在组件文件夹的js文件中把properties修改一下

1
2
3
4
5
6
7
8
9
properties: {
//要接收的数据的名称
 tabs:{
 //要接收的数据的类型
   type:Array,
 //默认值
   value:[]
 }
}

接着将组件文件夹中js文件的data剪切到页面的js文件夹中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
data: {
tabs:[
  {
    id:0,
    name:"首页",
    isActive:true
  },
  {
    id:1,
    name:"分类",
    isActive:false
  },
  {
    id:2,
    name:"原创",
    isActive:false
  },
  {
    id:3,
    name:"关于",
    isActive:false
  }
]
}

在页面的wxml文件中

1
<Tabs tabs="{{tabs}}"></Tabs>

子向父传递数据

你以为上面的例子就是正确的吗？并不是，我们打开AppData查看里面的isAlive，再点击页面，无论点到哪都是第一个isAlive值为true，其他值为false。这好吗？这不好。所以我们要将父向子传递改成子组件向父组件传递数据。

子向父传递数据需要触发父组件的自定义事件

在页面的wxml中，将代码改为

1
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" ></Tabs>

在组件的js文件中，绑定自定义事件。将methods改成如下：

1
2
3
4
5
6
7
8
9
10
methods: {
    handleItemTap(e){
       const {index}=e.currentTarget.dataset; 
      //this.triggerEvent("父组件自定义事件的名字",要传递的参数)
       this.triggerEvent("itemChange",{index})
       let {tabs}=this.data;
       tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
       this.setData({
         tabs})
    }

在页面的js文件中

1
2
3
4
5
6
7
 handleItemChange(e){
   const {index}=e.detail;
   let {tabs}=this.data;
   tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
   this.setData({
     tabs})
}

slot

打开组件的 wxml，我们可以看到内容是固定的。这也是不好的，我们对他改造一下。使用slot标签。slot标签其实就是一个占位符，等到父组件调用子组件的时候再传递标签过来，最终这些被传递的标签就会替换slot的位置

首先将组件wxml文件中的内容部分的代码改成

1
2
3
<view class="tabs_content">
<slot></slot>
</view>

接着在页面的wxml文件中，将代码改成如下

1
2
3
4
5
6
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" >
<block wx:if="{{tabs[0].isActive}}">0</block>
<block wx:elif="{{tabs[1].isActive}}">1</block>
<block wx:elif="{{tabs[2].isActive}}">2</block>
<block wx:else>3</block>
</Tabs>

其实学习组件的最好方法就是查看官方文档，上述的只是把常用的总结一下。

----本文结束，感谢您的阅读。如有错，请指正。----
大哥大嫂过年好！支持我一下呗
0%