微信小程序 开发小技巧

本文包含小程序开发过程中用到的：剪切板、设置open-data 头像、取屏幕高宽、拨打电话、动态设置当前页面的标题、本地图片背景、下拉刷新、scroll-view 滑动切换、picker、获取用户位置、判断终端、跳转到另一个小程序

1、剪贴板

clipboard(){   
      wx.setClipboardData({
      data:String(this.data.orderNo),//注意：data值不能是数字
      success (res) {
        wx.getClipboardData({
          success (res) { 
            console.log(res.data) 
          }
        })
      }
    })
  }

效果： 

 

2、open-data 头像：设置高宽、圆角

在头像外再包一层标签，设置高宽、圆角，同时外层标签加上： overflow: hidden;(否则圆角无效)

<view class='user-avatar'>
    <open-data type="userAvatarUrl"></open-data>
</view> 

.user-avatar{   
    width: 128rpx;
    height: 128rpx;
    overflow: hidden;
    border-radius: 50%    
}

效果：

 

3、取屏幕高宽、元素高宽（同时可取定位：top、right、bottom、left）

let query = wx.createSelectorQuery(),
screenWidth = wx.getSystemInfoSync().windowWidth //屏幕高度： wx.getSystemInfoSync().windowHeight    
query.select("#consultant").boundingClientRect((rect)=>{  
    console.log(rect.width)    //元素高度：rect.height
}).exec() 

同时取多个元素高宽

let query = wx.createSelectorQuery()        
query.selectAll("#home,#swiper").boundingClientRect((rect)=>{  
      console.log(rect[0].width,rect[1].width)    //元素高度：rect[0].height
}).exec()

用途：动态计算 scroll-view 高度 

 

 

4、拨打电话

wx.makePhoneCall({
    phoneNumber: "0755-88888888",
    success() {
        console.log('成功拨打电话')        
     }
})

 

5、动态设置当前页面的标题

wx.setNavigationBarTitle({  title: '标题' })

另附：设置当前页面的标题

"navigationBarTitleText": "咨询师",

6、本地图片背景

本地图片，直接作为背景图会无效，可先转换成PNG64图片（转化后包含 data:image/png;base64, src写成 src="{{imgPng64}}" 即可）

<view style="background:url({{test.cover}}) no-repeat; background-size:100% 100%" class="test-cover">
      <view>{{test.title}}</view> 
</view>

效果：

 

7、下拉刷新

单页配置，在 page.json 中加入： "enablePullDownRefresh": true

全局配置，在 app.json - window 中加入： "enablePullDownRefresh": true

代码：

queryData(){
   wx.request({
      url: 'your url',            
      complete(res){                
           wx.hideLoading() //隐藏loading 提示框               
           wx.hideNavigationBarLoading()  //隐藏导航条加载动画                
           wx.stopPullDownRefresh() //停止下拉刷新
      }
  })   
},
onPullDownRefresh () {  
    wx.showNavigationBarLoading()     //显示loading提示框，需调用 wx.hideLoading 才能关闭
    wx.showLoading({ title: '刷新中...' })   
    this.queryData()
}  

效果：

 

8、scroll-view 滑动切换

用scroll-view，做一个水平滑动切换的菜单

page.wxml

<scroll-view class="nav-scroll" scroll-x="true" scroll-left="{{scrollX}}" scroll-with-animation="{{true}}">
          <view wx:for="{{domain}}" wx:for-index="index" wx:key="index" class="flex-item nav-scroll-item {{domainActive ==index && 'active'}}" bindtap='switchTap' data-index="{{index}}" data-id="{{item.id}}">
            <view>{{item.title}}</view>
            <image src="../../images/consult-active@2x.png" class="icon-consult-active"/>  
          </view>
</scroll-view>

page.js 

switchTap(e){ 
    let screenWidth = wx.getSystemInfoSync().windowWidth,
        itemWidth = screenWidth/4,
        {id,index } = e.currentTarget.dataset,      
        scrollX = itemWidth * index - itemWidth*2,
        maxScrollX = ( this.data.domain.length+1) * itemWidth   
    if(scrollX<0){
      scrollX = 0
    }else if (scrollX >= maxScrollX){
      scrollX = maxScrollX
    }
    this.setData({
      domainActive:index,
      scrollX: scrollX
    })    
    this.queryConsultant(id)
}

效果： 

 

9、picker

multiSelector  多列选择器

  <view>
    <view>服务领域</view>  
    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key="{{'title'}}">
        <view class="picker">                       
            <view wx:if="{{!selectMenu.length}}">请选择服务领域</view>               
            <view wx:else>{{ multiArray[0][selectMenu[0]].title }}-{{ multiArray[1][selectMenu[1]].title}}</view> 
        </view> 
     </picker>  
</view>

Page({
  data: { 
    multiIndex: [0, 0],   
    multiArray: [
      [{id: 1, title: "情绪管理"},{id: 2,title: "个人成长"},{id: 2,title: "亲子教育"}], //显示的一级
      []//显示的二级
    ],      
    subMenu:[  //所有的二级
      [{title:"感情"},{title:"职场"},{title:"生活"}],
      [{title:"婴幼儿"},{title:"小学"},{title:"初中"},{title:"高中"},{title:"大学"},{title:"就职"}],
      [{title:"餐饮安排"},{title:"看护陪伴"},{title:"旅行休闲"},{title:"成长体检"}]
    ],
    selectMenu:[]  //选择-‘确定’的索引
  },  
  onLoad(options) {   
    this.setData({  ['multiArray[1]']: this.data.subMenu[0]  })  //设置默认的二级  
  },   
  bindMultiPickerChange(e){  //选择完栏目，点击‘确定’触发，e.detail.value 返回：[1级索引, 2级索引 ] 
    this.setData({ selectMenu:e.detail.value })   
  },
  bindMultiPickerColumnChange(e){  //滑动任意一级都会触发，返回：{column: 1, value: 1}  column：第 N 级，value：N级索引值]       
    if(e.detail.column==0){      
      this.setData({ ['multiArray[1]']:this.data.subMenu[e.detail.value] })  //设置二级目录    
    }
    this.setData({ ['multiIndex['+ e.detail.column + ']']:e.detail.value })
  }
})

 效果：

 

10、获取用户位置

1)、登录腾讯位置服务，申请开发者密钥，保存密钥，页面配置要用

2）、开通webserviceAPI服务：控制台 ->key 与配额-> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存

3）、下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.2

4）、安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com

page.js

const QQMapWX = require('../../../../utils/qqmap-wx-jssdk.min.js')
const qqmapsdk = new QQMapWX({  key: 'your key' })
Page({   
    data: {      
      city:""         
    },
    onLoad(){    
      this.getLocationAuth()  //请求获取位置权限
    },
    getLocationAuth(){      //请求获取位置权限
        let _this = this
        wx.getSetting({
          success: (res) => {        
            // res.authSetting['scope.userLocation'] 的值 undefined、false、true   表示 初始化进入该页面、非初始化进入该页面且未授权、地理位置已授权      
            if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
              wx.showModal({
                title: '请求授权当前位置',content: '需要获取您的地理位置，请确认授权',
                success(res) {
                  if (res.cancel) {
                    wx.showToast({ title: '拒绝授权',icon: 'none',duration: 1000 })
                  } else if (res.confirm) {
                    wx.openSetting({
                      success(dataAu) {
                        if (dataAu.authSetting["scope.userLocation"] == true) {
                          wx.showToast({ title: '授权成功',icon: 'success', duration: 1000 })                          
                          _this.getLocation()    //再次授权，调用wx.getLocation的API                  
                        } else {
                          wx.showToast({title: '授权失败', icon: 'none',duration: 1000})
                        }
                      }
                    })
                  }
                }
              })
            } else if (res.authSetting['scope.userLocation'] == undefined) {              
              _this.getLocation() //调用wx.getLocation的API 获取经纬度
            }
            else {              
              _this.getLocation()//调用wx.getLocation的API 获取经纬度
            }
          }
        })
    },  
    getLocation: function () {  //获取经纬度
        let _this = this
        wx.getLocation({
            type: 'wgs84',
            success(res) {            
              _this.queryCity(res.latitude, res.longitude)
            },
            fail(res) {
              console.log('fail' + JSON.stringify(res))
            }
        })
    },     
    queryCity(latitude, longitude) {// 获取当前地理位置
        let _this = this
        qqmapsdk.reverseGeocoder({
            location: { latitude: latitude,longitude: longitude },
            success(res) {    
                _this.setData({city: res.result.address_component.city})
            },
            fail(res) { 
                console.log(res) 
            },
            complete(res) { 
                console.log(res) 
            }
        });
    },
})

app.json 配置

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
} 

效果：

11、判断终端是ios还是android

if (wx.getSystemInfoSync().platform === 'ios') {
  // ios 
} else {
  // android 
}

12、跳转到另一个小程序

app-id ：另一个小程的appId

path：另一个小程的的具体页面路径，如果为空则打开首页

 version：release || develop 分别代表线上、开发版本

bindsuccess：跳转小程序成功

 <navigator target="miniProgram" open-type="navigate" app-id="appid" path="path" version="release" bindsuccess="toMiniProgramSuccess">跳转</navigator>

待续