小程序常用组件(video,map,wx.showToast,wx.showModal,button,打电话,text)

1.video(官方地址:https://developers.weixin.qq.com/miniprogram/dev/component/video.html

1.1wxml

<view class="mask">
  <view class='mask-wrap'>
    <video class='mask-video' id="myVideo" autoplay='{{true}}' src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
      controls></video>
  </view>
</view>

1.2wxss

.mask{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgb(0, 0, 0);
}

.mask-wrap {
  width: 750rpx;
  height: 500rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -250rpx;
  margin-left: -375rpx;
  line-height: 500rpx;
  text-align: center;
}

.mask-video {
  width: 100%;
}

1.3效果

2.map (官网:https://developers.weixin.qq.com/miniprogram/dev/component/map.html

2.1wxml

<view class='newHouseMap-map'>
  <map id="map" class="newHouseMap-map-img" latitude="{{h_lat}}" longitude="{{h_long}}" scale="14" markers="{{markers}}" show-location bindtap="show_big_map"></map>
  <view class='newHouseMap-map-icon' bindtap="show_big_map"></view>
</view>

2.2wxss

.newHouseMap-map {
  width: 100%;
  height: 290rpx;
  position: relative;
}

.newHouseMap-map-img {
  width: 100%;
  height: 100%;
}

2.3js

var that;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    h_lat: '32.0783274986',
    h_long: '118.639501197',
    h_name:'我是名称',
    h_project_address:'我是详细地址',
    markers: [{
      "latitude": 32.0783274986,
      "longitude": 118.639501197,
      "id": "237059",
      "iconPath": "/image/address.png",
      "width": 30,
      "height": 30
    }],
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    that = this;
  },
  // 地图
  show_big_map: function () {
    wx.openLocation({
      latitude: parseFloat(that.data.h_lat), // 纬度,浮点数,范围为90 ~ -90
      longitude: parseFloat(that.data.h_long), // 经度,浮点数,范围为180 ~ -180。
      name: that.data.h_name, // 位置名
      address: that.data.h_project_address, // 地址详情说明
      scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
    });
  },
})

2.4效果

扫描二维码关注公众号,回复: 11578597 查看本文章

3.wx.showToast

3.1showToast(官网:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

3.2hideToast(官网:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.hideToast.html

wx.hideToast({});

4.wx.showModal(官网:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html

4.1代码

wx.showModal({
      title: '这是标题',
      content: '这是一个模态弹窗',
      showCancel:true,
      cancelText:'这是取消',
      confirmText:'这是确认',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })

5.button(官网:https://developers.weixin.qq.com/miniprogram/dev/component/button.html

5.1用户授权电话号码

5.1.1wxml

<button class='newHouseInfor-tx-kp'  open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
  提醒
</button>

5.1.2wxss

.newHouseInfor-tx-kp{
  font-size: 31rpx;
  color: #ff7500;
  border-radius: 10rpx;
  border: 1rpx solid #ff7500;
  width: 335rpx;
  height: 70rpx;
  line-height: 70rpx;
  padding: 0;
  margin: 0;
  background: transparent;
}

.newHouseInfor-tx-kp::after{
  border: 0;
}

5.1.3js

var that;
Page({

  /**
   * 页面的初始数据
   */
  data: {},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    that = this;
  },
  /**获取用户电话号码**/
  getPhoneNumber(e) {
    // 1:开盘提醒;2:变价提醒;3:预约看房
    var type = e.currentTarget.dataset.type ? e.currentTarget.dataset.type : '';
    if (e.detail.errMsg == "getPhoneNumber:ok") {
      var param = {
        city: 'city',
        iv: e.detail.iv,
        encryptedData: e.detail.encryptedData
      }
      /**logintype:2时授权登录**/
      param.logintype = 2;
      that.login_function()
    } else {
      console.log('用户未授权,跳转登录页面,使用普通登录方式登录')
    }
  },
  login_function(param, method, type) {
    // 将电话号解码为可使用的号码,并进行后边逻辑处理
    console.log('1.解码电话号;2.更改登录状态,3.更改缓存信息,4.进行后续动作')
  },
})

5.1.4效果

5.2 分享

5.2.1wxml

<button class='newHouseRfixed-share' open-type='share' style='bottom:126rpx;'></button>

5.2.2wxss

.newHouseRfixed-share {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAACCCAYAAABvsRfUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNCOTI1ODYxQzQ4NzExRTk5QkU3QjEyNUQ5QjdEODUyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNCOTI1ODYyQzQ4NzExRTk5QkU3QjEyNUQ5QjdEODUyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0I5MjU4NUZDNDg3MTFFOTlCRTdCMTI1RDlCN0Q4NTIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0I5MjU4NjBDNDg3MTFFOTlCRTdCMTI1RDlCN0Q4NTIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz56Mtv0AAAe4klEQVR42uxd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);
  bottom: 35rpx;
  padding: 0;
  background-color: transparent;
}

.newHouseRfixed-share {
  background-repeat: no-repeat;
  background-size: 127rpx 136rpx;
  background-position: center;
  width: 127rpx;
  height: 130rpx;
  position: fixed;
  right: 15rpx;
}

.newHouseRfixed-share::after{
  border: 0;
}

6.打电话

6.1wxml

<view class='newHouseInfor-tx-kp' data-tel="{{tel}}" catchtap='makeCall'>
  <view class='tfLine1 maxw540'>点我打电话</view>
</view>

6.2wxss

.newHouseInfor-tx-kp{
  font-size: 31rpx;
  color: #ff7500;
  border-radius: 10rpx;
  border: 1rpx solid #ff7500;
  width: 335rpx;
  height: 70rpx;
  line-height: 70rpx;
  padding: 0;
  margin: 0;
  background: transparent;
  text-align: center;
}

6.3js

var that;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tel:'4008181365转156983'
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    that = this;
  },
  // 打电话
  makeCall(e) {
    var tel = e.currentTarget.dataset.tel ? e.currentTarget.dataset.tel : '';
    if (tel) {
      wx.makePhoneCall({
        phoneNumber: tel.replace("转", ",")
      });
    }
  },
})

6.4效果

7.text(官网:https://developers.weixin.qq.com/miniprogram/dev/component/text.html

小程序不识别'<br>'但识别“\n”,如果代码中出现了'<br>'可以转为'\n'

res.h_bundled = res.h_bundled.replace(/<br>/g, "\n");
<text decode="{{true}}"></text>

猜你喜欢

转载自blog.csdn.net/hangGe0111/article/details/101016992