小程序小知识点总结及vant weapp UI组件库的使用

文章目录

前言
一、小程序是什么?
二、点击方法
三、传值
四、自定义组件
五、父子通信
六、 尺寸单位 rpx
七、 引入vant weapp UI组件库
引入组件
使用组件

前言

微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
微信小程序是一种不用下载就能使用的应用,也是一项创新,经过将近两年的发展,已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,已经有超过150万的开发者加入到了微信小程序的开发,与我们一起共同发力推动微信小程序的发展,微信小程序应用数量超过了一百万,覆盖200多个细分的行业,日活用户达到两个亿,微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会,2017年小程序带动就业104万人,社会效应不断提升。

一、小程序是什么?

小程序是一种不用下载就能使用的应用,效果和App差不多,语法和vue也很像,可以很快的上手
1. 小程序
没有dom,没有bom,没有window对象。
小程序不可以使用jq,以及一些npm命令下载东西。
小程序是多线程,wxml,wxss,js,json都是独立文件。
小程序只需要面对iOS,以及安卓,适配端。
小程序在页面更新时,必须使用this.setData()方法来更新页面。
2. 文件
wxml相当于html
wxss相当于css
js相当于逻辑层
json是小程序的配置文件
rpx是小程序的常用单位,为相对单位

二、点击方法

1. bindtap
代码如下(示例):
在index.wxml中写一个按钮

</view>
<button bindtap="buttonTapHandle">点我</button>
</view> 

在index.js中声明一个点击事件的函数,将其函数名传递给bindTap

 buttonTapHandle:function(){
      console.log(被点击了)
    }

2. catchtap
在index.wxml中写一个按钮

</view>
<button catchtap="buttonTapHandle">点我</button>
</view>

3. 区别

bindtap()点击事件会发生冒泡,意思就是,如果在页面上的子级元素中设置了bindtap()事件,会误触父级元素的点击事件。像当前页面结构中如果给“关注”按钮和“用户信息”区域绑定bindtap()事件,会触发父级元素的点击事件,进而进入到文章详情页。即触发自己的事件,但是也会误触父元素的点击事件。

catchtap()点击事件有两个主要作用:①防止冒泡事件的发生(对自己来说)②阻断冒泡事件的进行

防止冒泡:就是说使用catchtap事件之后,这个点击事件只会作用在当前元素自己身上,不会冒泡到父元素身上(适用于子级元素的点击事件)

阻断冒泡事件的进行:就是说在当前元素的子级元素总如果定义了bindtap()事件,到达当前元素之后,冒泡事件会被迫停止。

**

三、传值

**
1. data-自定义属性
通过data-属性绑定一个值,点击触发事件,在事件中通过 形参.currentTarget.dataset.属性名 来获取
点击事件

<view wx:for="{{ arr }}" wx:key="index">
    <text bindtap="zqd_tiao" data-name="{{ item }}">{{ item }}</text>
  </view>

获取方法

  zqd_tiao(e){
    console.log(e.target.dataset.name)
	//{{ name:传过来的值 }}
  },

2. 通过id
通过id属性,绑定一个值,点击触发事件,在事件中通过 形参.currentTarget.id 来获取

四、自定义组件

1.局部
在app.js同级别下新建components文件夹,然后右击新建components
在components下面的json文件里面

{
	"component": true,
	"usingComponents":{
	"自定义":"路径"
	}
}

2.全局
在app.json最下面加上

"usingComponents": {
    "自定义":"路径",
  }

五、父子通信

1.父传子
第一步在父组件的子组件标签添加属性,给子组件传递数据

<zqd-tou title="{{ 传递的 }}"></zqd-tou>

第二步在自组件中通过properties接收,可以指定接收的数据类型

properties:{
		title:类型
}

2.子传父
第一步在父组件的子标签上自定义事件,传给字组件

//dian是自定义事件
<zqd-tou  bind:dian="dian"></zqd-tou>

第二部子组件通过触发事件,在其中设置

this.triggerEvent("dian",传递的值)

第三步,父组件中dian函数执行,同时接受子传过来的数据

  dian(e){
    console.log(e.detail)  //子组件传过来的数据
  },

六、 尺寸单位 rpx

rpx 是响应式像素,可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上,屏幕
宽度为 375px,共有 750 个物理像素,则 750rpx = 375px = 750 物理像素

七、 引入vant weapp UI组件库

1、组件库的方法
组件库:https://vant-contrib.gitee.io/vant-weapp/#/quickstart

2、较为简洁的方法

1、第一步:npm init

2、第二步: npm i vant-weapp -S --production
3、第三步:
修改 app.json

将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

修改 project.config.json
开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

4、第四步:在开发者工具中开启npm创建

npm创建
在这里插入图片描述
在这里插入图片描述

这样就可以使用组件了

引入组件

以 Button 组件为例,只需要在app.json或index.json中配置 Button 对应的路径即可。

// app.json 全局引入
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

使用组件

引入组件后,可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>
  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值