原生-小程序（二）

Nobita
123 阅读3分钟

小程序（二）

一、事件

1.介绍

小程序中绑定事件，通过bind关键字来实现。如 bindtap bindinput bindchange 等

2.事件传递参数：通过传递自定义属性的方式
<view bindtap="handlerTap1" data-id="{{100}}">点击2</view>

handlerTap1(e) {
  // data-id="{{100}}"
  console.log(e.target.dataset);
},

<view bindtap="handlerTap2" data-id="100">点击2</view>

handlerTap2(e) {
   // data-id="100"
   console.log(e.target.dataset);
},


<view bindtap="handlerTap3">点击3</view>

  handlerTap3() {
    console.log(this.data.msg);
    // 绑定数据唯一改变的方法 this.setData
    this.setData({
      msg: this.data.num,
      num: this.data.msg,
    });
  },
3.获取data和设置data
//小程序不同于vue，获取data和设置data的方式有所区别
t获取data
this.data.xxxx
设置data
this.setData({xxxx : value})

二、样式

1.介绍

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

2.与css不同点
不支持 通配符（ * ）
新增了一个响应式单位rpx
3.响应式单位 rpx

（1）rpx（responsive pixel）: 规定不管屏幕为多少px 按照rpx来换算 为750rpx。

（2）等式关系

**10rem = 100vw = 750rpx **

三、内置组件

1.view和text

（1）view

类似：div，块级元素

（2）text

类似：span，行内元素

特点：

①允许长按选中---user-select

②只能text嵌套text

2.image

（1）类似：img

（2）作用：显示图片

（3）属性

①src——绝对路径/xxx/xx.xx

②mode——设置图片显示模式

模式值说明
缩放scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。
缩放aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来。
缩放widthFix宽度不变，高度自动变化，保持原图宽高比不变

③lazy-load：长列表提高加载速度的重要手段（懒加载）

（4）注意：

默认是有大小的，不管什么图片，默认沾满

3.swiper

默认有高度(150px)，需要跳转高度 默认滚动间隔5秒，通常需要跳转

（1）嵌套swiper-item

<swiper autoplay circular interval="1000" indicator-dots>
  <swiper-item wx:for="{{list}}" wx:key="goods_id">
    <image mode="widthFix" style="width: 100vw;" src="{{item.image_src}}"></image>
  </swiper-item>
</swiper>

（2）属性

属性名类型默认值说明
indicator-dotsBooleanfalse是否显示面板指示点
autoplayBooleanfalse是否自动切换
circularBooleanfalse是否衔接轮播,无缝衔接
intervalnumber轮播时长
4.navigator

（1）类似：a标签，块级元素

（2）作用：

通过 url 来指定跳转的页面，还可以跳到其他小程序

（3）跳转模式open-type

值说明
navigate保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
redirect不产生一条跳转的历史记录，但是不允许跳转到 tabbar 页面。
switchTab可以允许跳转到tab页面，并关闭其他所有非 tabBar 页面
reLaunch会清除掉所有的历史记录，重新打开某个页面
navigateBack关闭当前页面，返回上一页面或多级页面，不需要写url，无效

（4）跳转其他小程序页面

设置 target =“miniProgram”
填写 属性 short-link = “链接”
链接可以通过【小程序菜单】->【复制链接】获取
5.button

（1）说明：

小程序中的button按钮是个简单朴素外表下，暗藏巨大能力的怪物

（2）open-type

值说明
contact打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息
share触发用户分享
getPhoneNumber获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息
openSetting打开授权设置页
feedback打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容

（3）获取用户地理位置

创建按钮

<button open-type="openSetting">打开设置</button>

全局js

 /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    wx.getLocation({
      success: (result) => {
        console.log(result);
      },
      fail: (res) => {
        console.log(res);
      },
      complete: (res) => {},
    });
  },

全局json

"permission": {
    "scope.userLocation": {
      "desc": "请求您的地理位置"
    }
  }

（4）获取用户手机号码

创建按钮

<button open-type="getPhoneNumber" bindgetphonenumber="getPhone">获取用户手机号</button>

全局js

// 自定义函数
  getPhone(e) {
    console.log("获取手机号---->", e.detail.code);
  },
6.rich-text

（1）作用

小程序中内置的富文本标签，通过传入 nodes 属性来使用

（2）语法

<rich-text nodes="{{html}}"><rich-text>
    
    
Page({
    data:{
    html:"<h1>大标题</h1>"
    }
    })
avatar
文章
阅读
粉丝