小程序第五天学习总结

1、 获取小程序位置信息

• wx.getLocation()：获取当前的地理位置、速度
• wx.chooseLocation()：打开地图选择位置

Page({
  onLoad() {
    // 获取用户所在位置周围小区
    this.getLocation()
  },
  async getLocation() {
    // 用户所在位置经纬度
    const { latitude, longitude } = await wx.getLocation()
    // 查看经纬度
    console.log(latitude, longitude)
  }
})

2、小程序周边搜索

小程序的逆地址解析指的是将对应的经纬度信息转为地址文字信息；使用到的是 search(options:Object) 地点搜索，搜索周边poi，比如：“酒店” “餐饮” “娱乐” “学校” 等等

qqmap.search({
  location: [latitude, longitude].join(','),
  keyword: "住宅小区",
  page_size: 20,
  success: res => {
    let point = res.data.map(({ id, title, _distance }) => {
      return { id, title, _distance }
    })
    this.setData({ point })
  }
})

3、小程序逆地址解析

    qqmap.reverseGeocoder({
      location: [latitude, longitude].join(','),
      success: res => {
        console.log(res);
        this.setData({
          newAddress: res.result.address
        })
      },
      complete() {
        wx.hideLoading()
      }
    })

3.1、优化界面加载

    // loading
    wx.utils.toast('数据获取中')
    
   //骨架屏

4、点击跳转的两种方式

// 声明式跳转
<van-cell wx:for="{{point}}" wx:key="id" title="{{item.title}}" link-type="navigateTo" url="/house_pkg/pages/building/index?={{point.title}}" is-link />

// 编程式导航
goBuilding(ev) {
    wx.navigateTo({
      url: '/house_pkg/pages/building/index?point=' + ev.mark.building
    })
}

5、小程序的双向数据绑定

小程序的双向绑定与vue的双向绑定是有区别的；

//在小程序中的双向数据绑定
<van-field label="姓名" model:value="{{name}}" placeholder="请填写您的真实姓名" />

// vue中的双向数据绑定
<input v-model="name" />  // 注意此处的name没有双括号

6、表单校验

  // 校验姓名
  varifyName() {
    const reg = /^[\u4e00-\u9fa5]{2,5}$/
    const valid = reg.test(this.data.name.trim())
    if (!valid) wx.utils.toast('姓名格式不正确')
    return valid
  },
  // 校验手机号
  varifyMobile() {
    const reg = /^1[3-9]\d{9}$/
    const valid = reg.test(this.data.mobile)
    if (!valid) wx.utils.toast('手机号格式不正确')
    return valid
  },
  //身份证图片校验
  varifyCard(){
      const valid = !!this.data.idcardFrontUrl && !!this.dataidcardBackUrl
      if(!valid) wx.utils.toast('请上传身份证正反两面照片')
      return valid
  }，
  // 点击提交进行总校验
  goList() {
    if (!this.varifyName()) return
    if (!this.varifyMobile()) return
    if (!this.varifyCard()) return
    console.log('可以发送请求了');
  },

7、项目中涉及到身份证校验的一个简洁写法

      <van-cell title="本人身份证照片" label="请拍摄证件原件，并使照片中证件边缘完整，文字清晰，光线均匀。" />
      <view class="id-card-front">
        <view class="image-preview" wx:if="{{idcardFrontUrl}}">
          <view class="image-remove" mark:type="idcardFrontUrl" bind:tap="removePicture">x</view>
          <image src="{{idcardFrontUrl}}"></image>
        </view>
        <view class="upload-button" wx:else><text class="enjoy-icon icon-add"></text>上传人像面照片</view>
      </view>
      <view class="id-card-back">
        <view class="image-preview" wx:if="{{idcardBackUrl}}">
          <view class="image-remove" mark:type="idcardBackUrl" bind:tap="removePicture">x</view>
          <image src="{{idcardBackUrl}}"></image>
        </view>
        <view class="upload-button" wx:else><text class="enjoy-icon icon-add"></text>上传国徽面照片</view>
      </view>
    </view>
    

removePicture(ev) {
    // 移除图片的类型（身份证正面或反面）
    const type = ev.mark?.type
    // if(ev.type === 'idcardFrontUrl'){
    //   this.setData({
    //     idcardFrontUrl: ''
    //   })
    // }else{
    //   this.setData({
    //     idcardBackUrl: ''
    //   })
    // }
    this.setData({
      [type]: ''          <=> [type] === 'idcardFondUrl': ''    
    })                        [type] === 'idcardBackUrl': ''
}

8、小程序上传图片的API

// wx.chooseMedia(object) 拍摄或从手机相册中选择图片或视频。

async uploadPicture() {
    const res = await wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      sizeType: ['compressed']
    })
    console.log(res.tempFiles[0].tempFilePath);
}