微信小程序：从入门到放弃

初次接触小程序时，因为对小程序还是处于未知的状态，所以十分的头痛，不知道从何学起。随着不断的练习（百度），现在对小程序也算熟悉了。

接下来就放一些目前我用到的一些实用例子：

1.滑动视图容器：

wxml：


        
            
                
                
            
        
     
    {{ imageCurrent + 1 }}/{{ images.length }}

css：

.show-image{
  position: relative;
  height: 500rpx;
}

.image-list{
  width: 100%;
  height: 500rpx;
  position: absolute;
}

.the-image{
  height: 100%;
  width: 100%;
}

.image-index{
  width: 10%;
  color: white;
  font-size: 30rpx;
  line-height: 40rpx;
  height: 40rpx;
  border-radius: 10rpx;
  background-color: #000000;
  opacity: 0.5;
  text-align: center;
  position: absolute;
  right: 2%;
  top: 85%;
}

js：

data: {
  imageCurrent: 0,  // 当前图片的索引
  images: [
    'http://img0.imgtn.bdimg.com/it/u=3884346632,3174917492&fm=27&gp=0.jpg',
    'http://img0.imgtn.bdimg.com/it/u=3884346632,3174917492&fm=27&gp=0.jpg',
    'http://img0.imgtn.bdimg.com/it/u=3884346632,3174917492&fm=27&gp=0.jpg',
    'http://img0.imgtn.bdimg.com/it/u=3884346632,3174917492&fm=27&gp=0.jpg',
  ],
  imageCount: 0 // 图片列表总数
},
  
// 图片切换调用的函数
imageChange: function (e) {
  console.log(e);
  this.setData({
    imageCurrent: e.detail.current
  })
},

// 查看大图，只支持网络图片，就算有些网络图片打开了也是转菊花，反正不是很清楚
previewImg: function (e) {
  console.log(e.currentTarget.dataset.index);
  var index = e.currentTarget.dataset.index; // 获取图片的索引
  var images = this.data.images; // 图片列表
    wx.previewImage({
      current: images[index], // 索引
      urls: images, // 图片链接
      success: function (res) {
        console.log(res)
      },
      fail: function (res) {
        console.log(res)
      }
    })
},

效果：

滑动视图容器.gif

由于我是用来当作图片的容器来使，所以没有轮播的效果
如要添加轮播效果，只需要在swiper中添加一些属性
indicator-dots：是否显示面板指示点，默认为flase
indicator-color：指示点的颜色
indicator-active-color：当前选中的指示点颜色
autoplay：是否自动切换，默认为flase
interval：自动切换的时间间隔
duration：滑动动画的时长

2.可滚动视图区域：

wxml：

css：

.scroll-image-list{
  height: 200rpx; 
  width: 100%;
  overflow:hidden;
  white-space: nowrap;
}

 .scroll-image{
  height: 160rpx;
  width: 30%;
  margin: 20rpx 0 0 2.5%;
  display: inline-block;
}

.the-image{
  height: 160rpx;
  width: 100%;
  border-radius: 20rpx;
  -moz-box-shadow:2px 2px 5px #333333;
  -webkit-box-shadow:2px 2px 5px #333333;
  box-shadow:2px 2px 5px #333333;
}

js：

data: {
    images: [
      'http://img0.imgtn.bdimg.com/it/u=3884346632,3174917492&fm=27&gp=0.jpg',
      'http://img0.imgtn.bdimg.com/it/u=3884346632,3174917492&fm=27&gp=0.jpg',
      'http://img0.imgtn.bdimg.com/it/u=3884346632,3174917492&fm=27&gp=0.jpg',
      'http://img0.imgtn.bdimg.com/it/u=3884346632,3174917492&fm=27&gp=0.jpg',
    ],
  },

效果：

可滚动视图区域.gif

3.下拉列表：

wxml：


  
  
    
      {{ FirstBackEnd }}
      
    
    
      {{ FirstFrontEnd }}
      
    
  
  
    
    C
    C++
    C#
    Java
    Python
    
  
  
    
      HTML
      CSS
      JavaScript

css：

.page{
  position: relative;
  background-color: #f7f7f7;
}

.mask{
  height: 100%;
  width: 100%;
  background-color: #000000;
  opacity: 0.5;
  position: fixed;
  z-index: 98;
}

.pull-down{
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: row; 
  z-index: 99;
  background-color: #ffffff;
}

.back-end, .front-end{
  display: flex; 
  width:50%;
  height:100rpx;
  font-size: 30rpx;
}

.pull-down-title{
  width: 100%;
  color: #8a8a8a;
  height:100rpx;
  line-height:100rpx;
  text-align: center;
}

.pull-down-icon{
  z-index: 100;
  width: 34rpx;
  height: 20rpx;
  margin:40rpx 20rpx 40rpx 0;
}

.rotate-icon{
  transform: rotate(180deg);
}

.select-box{
  position: relative;
}

.select-backend, .select-frontend{
  border-top: 10rpx solid #f7f7f7;
  z-index: 100;
  width: 100%;
  height: 600rpx;
  overflow: hidden;
  position: absolute;
}

.select-one{
  background-color: #ffffff;
  width:100%;
  height:100rpx;
  border-bottom:2rpx solid #efefef; 
  color: #666666;
  line-height:100rpx;
  text-indent: 5%;
}

js：

data: {
    selectBackEnd: true,
    selectFrontEnd: true,
    FirstBackEnd: '后端',
    RotateBackEnd: false,
    RotateFrontEnd: false,
    FirstFrontEnd: '前端',
    isSelect: true
  },

  //点击选择
  clickBackEnd: function () {
    var selectBackEnd = this.data.selectBackEnd;
    if (selectBackEnd == true) {
      this.setData({
        RotateBackEnd: true,
        selectBackEnd: false,
        RotateFrontEnd: false,
        selectFrontEnd: true,
        isSelect: false
      })
    } else {
      this.setData({
        RotateBackEnd: false,
        selectBackEnd: true,
        isSelect: true
      })
    }
  },

  // 点击选择
  clickFrontEnd: function () {
    var selectFrontEnd = this.data.selectFrontEnd;
    if (selectFrontEnd == true) {
      this.setData({
        RotateBackEnd: false,
        selectBackEnd: true,
        RotateFrontEnd: true,
        selectFrontEnd: false,
        isSelect: false
      })
    } else {
      this.setData({
        RotateFrontEnd: false,
        selectFrontEnd: true,
        isSelect: true
      })
    }
  },

  // 点击取消选择
  clickClear: function () {
    var selectBackEnd = this.data.selectBackEnd;
    var selectFrontEnd = this.data.selectFrontEnd;
    if (selectBackEnd == false || selectFrontEnd == false) {
      this.setData({
        RotateBackEnd: false,
        selectBackEnd: true,
        RotateFrontEnd: false,
        selectFrontEnd: true,
        isSelect: true
      })
    }
  },

  // 点击切换
  myBackEnd: function (e) {
    this.setData({
      FirstBackEnd: e.target.dataset.me,
      selectBackEnd: true,
      RotateBackEnd: false,
      isSelect: true
    })
  },
  // 点击切换
  myFrontEnd: function (e) {
    this.setData({
      FirstFrontEnd: e.target.dataset.me,
      selectFrontEnd: true,
      RotateFrontEnd: false,
      isSelect: true
    })
  },

效果：

下拉列表.gif

4.拨打电话

wxml：


  {{ Phone }}

css：

page{
  background-color: #f7f7f7;
}

.contact{
  height: 80rpx;
  width: 100%;
  background-color: #ffffff;
}

.phone{
  font-size: 40rpx;
  height: 80rpx;
  line-height: 80rpx;
  display: block;
  float: left;
  margin-left: 2.5%;
  color: #ff7740;
  text-align: center;
}

js：

data: {
    Phone: '18888888888'
  },

  calling: function () {
    var Phone = this.data.Phone;
    wx.makePhoneCall({
      phoneNumber: Phone,
      success: function () {
        console.log("拨打电话成功！")
      },
      fail: function () {
        console.log("拨打电话失败！")
      }
    })
  },

效果：

拨打电话.gif

5.获取地理位置与计算两点之间距离

wxml:


    {{ Addr }}
    {{ distance }}

css：

.position{
  height: 80rpx;
  width: 100%;
  margin: 2% 0;
  text-indent: 2.5%;
  background-color: #ffffff;
}

.location{
  width: 25%;
  float: right;
  margin-right: 2.5%; 
  height: 80rpx;
  border-left: 0.5rpx solid #cdcdcd;
  text-align: center;
  line-height: 80rpx;
  font-size: 30rpx;
  color: #666666;
}

js：

// 腾讯地图开放平台下载的微信小程序JavaScript SDK
// 引入SDK核心类
var qqmap = require("../../utils/qqmap-wx-jssdk.js");
var qqmapsdk;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    Addr: '', // 根据经纬度转换为地址
    distance: '', // 距离
    latitude: 22.55329, // 固定维度
    longitude: 113.88308, // 固定经度
  },
  
  // 点击调用地图函数
  isopenLocation: function (data) {
    var that = this;
    wx.openLocation({
      latitude: that.data.latitude, // 维度
      longitude: that.data.longitude, // 经度
      scale: 28,  // 缩放距离
      name: '测试定位',  // 地图上显示的名称
      address: '中南海',  // 地图上显示的地址
      success: function (res) {
        console.log(res)
      },
      fail: function (err) {
        console.log(err)
      },
      complete: function (info) {
        console.log(info)
      },
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    // 实例化API核心类
    qqmapsdk = new qqmap({
      key: 'HTUBZ-2G33F-FZMJJ-NZ7W7-PZS7S-32FXW' // 在腾讯开放地图平台申请的密钥
    });
    wx.request({
      url: "http://apis.map.qq.com/ws/geocoder/v1/?l&get_poi=1", // 腾讯地图API
      data: {
        "key": "HTUBZ-2G33F-FZMJJ-NZ7W7-PZS7S-32FXW", // 在腾讯开放地图平台申请的密钥
        "location": that.data.latitude + ',' + that.data.longitude  // 固定的经纬度
      },
      method: "GET", // 请求方法
      success: function (res) {
        console.log("请求成功");
        console.log(res);
        that.setData({ Addr: res.data.result.address }); // 将经纬度转换成地址
      },
      fail: function () {
        console.log("请求失败");
      }
    })

    // 获取用户的地理位置进行距离计算
    wx.getLocation({
      type: 'gcj02', // 火星坐标
      success: function (res) {
        console.log(res);
        qqmapsdk.calculateDistance({   // 微信小程序JavaScript SDK用于计算距离的函数
          from: {
            latitude: res.latitude,  // 获取的纬度
            longitude: res.longitude  // 获取的经度
          },
          to: [{
            latitude: that.data.latitude,  // 固定的纬度
            longitude: that.data.longitude  // 固定的经度
          }],
          success: function (res) {
            console.log('获取距离成功');
            console.log(res);
            that.setData({
              distance: '距您 ' + Math.floor(res.result.elements[0].distance / 1000 * 100) / 100 + ' km'  // 默认返回的结果是m，手动计算成km
            })
          },
          fail: function (res) {
            console.log('获取距离失败');
            console.log(res);
            that.setData({ distance: res.message })
          }
        })
      },
    })
  }

效果：

获取地理位置与计算两点之间距离.gif

申请密钥地址：腾讯地图开放平台
微信小程序JavaScript SDK文档：微信小程序JavaScript SDK文档

最后发送一些资源
130套小程序源码密码：uir3
小程序实战开发第一天密码：7tr6
小程序实战开发第二天密码：xs3z

微信小程序：从入门到放弃

1.滑动视图容器：

2.可滚动视图区域：

3.下拉列表：

4.拨打电话

5.获取地理位置与计算两点之间距离

你可能感兴趣的:(微信小程序：从入门到放弃)