微信小程序开发小技巧积累（更新中）

原創 夜空划过的流星 2018-09-04 04:25

1、轮播组件

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item.photo}}" class="slide-image" width="100%" height="200"  />
      </swiper-item>
    </block>
  </swiper>

2、用if标签控制内容的输出显示

<view class="gmxx" style="font-size:28rpx;width:30%">
    <text wx:if="item.is_show==1">新品</text>
    <text wx:elif="item.is_hot==1">热销</text>
    <text wx:else>推荐</text>
</view>

3、组件弹性布局，常用于一行有多个<view>时，平均分配宽度

 <view style="display:flex; flex-direction:row;  justify-content:space-around;  margin:0rpx; line-height:50rpx; color:#999">
     <view class=""  style="font-size:28rpx; padding-right:70rpx; margin:0rpx;">
            <text>新品55</text>
     </view>
     <view class="" style="font-size:28rpx;">销量555：{{item.shiyong}}</view>
 </view>

4、navigator跳转组件

navigator跳转分为两个状态一种是关闭当前页面一种是不关闭当前页面。用redirect属性指定。


<navigator url="../index/index">点击跳转不关闭当前页面</navigator>
<navigator url="../logs/logs" redirect="true" >点击跳转关闭当前页面</navigator>

使用 navigateTo 页面跳转：

wx.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

OBJECT参数说明：

示例代码：

 
wx.navigateTo({
 url:'test?id=1'
})

//test.js
Page({
 onLoad:function(option){
  console.log(option.query)
 }
})

注意：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。

wx.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

OBJECT参数说明：

示例代码：

1
2
3
wx.redirectTo({
 url:'test?id=1'
})

5、打印输出调试信息

console.log('23432')

6、图片、组建透明度设置

div
{
    opacity:0.5;
}
//图片透明度
<image style="opacity:0.5" src="1.png"></image>
// opacity ：规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）

7、弹出提示框

selectByItemName: function () {
    var that = this;
    if (!that.data.inputKey) {
      wx.showToast({
        title: '请输入关键字',
        icon:'loading',
        duration:2000,
      })
      return ;
    }
// 隐藏消息提示框：
wx.showToast({
 title:'加载中',
 icon:'loading',
 duration: 10000
})
 // 2s 后关闭提示框
setTimeout(function(){
 wx.hideToast()
},2000)


8、轮播图中图片绑定点击事件

//多个轮播图绑定同一事件，通过id或index值区分
1） bindtap="itemClick" id="{{index}}" 绑定的函数实现：
itemClick: function (event) {
    console.log(event)
    var index = event.target.id
   },
2）wx:bindtap="itemClick" data-index="{{index}}" 绑定的函数实现方式：

itemClick: function (event) {
  console.log(event)
  var index =  event.target.dataset.index
},

9、显示模态对话框

wx.showModal({
 title: '提示',
 content: '这是一个模态弹窗',
 success: function(res) {
  if (res.confirm) {
   console.log('用户点击确定')
  }
 }
})

显示模态弹窗，OBJECT参数说明：


10、显示操作菜单 wx.showActionSheet(OBJECT)

wx.showActionSheet({
 itemList: ['A', 'B', 'C'],
 success: function(res) {
  if (!res.cancel) {
   console.log(res.tapIndex)
  }
 }
})

显示操作菜单， OBJECT参数说明：

OBJECT参数说明：


11、动态设置页面当前标题

wx.setNavigationBarTitle(OBJECT)

动态设置当前页面的标题。

wx.setNavigationBarTitle({
 title: '当前页面'
})


12、系统粘帖板的内容操作

    1）wx.setClipboardData(OBJECT)，设置系统剪贴板的内容

设置系统剪贴板的内容

OBJECT参数说明：

参数类型必填说明
dataString是需要设置的内容
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：

wx.setClipboardData({
  data: 'data',
  success: function(res) {
    wx.getClipboardData({
      success: function(res) {
        console.log(res.data) // data
      }
    })
  }
})

     2）wx.getClipboardData(OBJECT)，获取系统剪贴板的内容

获取系统剪贴板内容

OBJECT参数说明：

参数类型必填说明
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明：

参数类型说明
dataString剪贴板的内容

示例代码：

wx.getClipboardData({
  success: function(res){
    console.log(res.data)
  }
})



13、调用客户端扫码界面

函数：wx.scanCode(OBJECT)， 功能：调起客户端扫码界面

Object 参数说明：

参数类型必填说明最低版本
onlyFromCameraBoolean否是否只能从相机扫码，不允许从相册选择图片1.2.0
scanTypeArray否扫码类型，参数类型是数组，二维码是'qrCode'，一维码是'barCode'，DataMatrix是‘datamatrix’，pdf417是‘pdf417’。1.7.0
successFunction否接口调用成功的回调函数，返回内容详见返回参数说明。 
failFunction否接口调用失败的回调函数 
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明：

参数说明
result所扫码的内容
scanType所扫码的类型
charSet所扫码的字符集
path当所扫的码为当前小程序的合法二维码时，会返回此字段，内容为二维码携带的 path

示例代码：

// 允许从相机和相册扫码
wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

// 只允许从相机扫码
wx.scanCode({
  onlyFromCamera: true,
  success: (res) => {
    console.log(res)
  }
})


14、小程序拨打电话接口wx.makePhoneCall

OBJECT参数说明：

参数类型必填说明
phoneNumberString是需要拨打的电话号码
successFunction否接口调用成功的回调
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：

wx.makePhoneCall({
  phoneNumber: '1340000' //仅为示例，并非真实的电话号码
})

15、微信小程序尺寸单位rpx和px的关系
px单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

小程序开发之 wx.getSetting 授权检测

wx.getSetting 在 未拒絕 和 未同意 狀態下 ，success: (res) => { } 的res.authSetting{}值是空的! 在getUserInfo()後，點擊拒絕後 wx.getSetting的fail:(

夜空划过的流星 2020-06-26 14:56:05

小程序View设置背景颜色渐变+透明+阴影【转载】

夜空划过的流星 2020-03-31 11:45:50

小程序开发之 wx.getUserInfo获取用户信息方案介绍

夜空划过的流星 2020-03-25 06:11:10

小程序登录wx.getUserInfo不能弹出授权窗口后的解决方案

夜空划过的流星 2020-03-19 08:46:50

微信小程序如何获取屏幕宽度

夜空划过的流星 2018-09-04 04:25:43

小程序开发之页面跳转的四种方法

夜空划过的流星 2018-09-04 04:25:43

微信小程序开发 之 『顶部导航』特效

夜空划过的流星 2018-09-04 04:25:42

微信小程序之下拉加载和上拉刷新

夜空划过的流星 2018-09-04 04:25:42

微信小程序开发技巧之：Flex布局

夜空划过的流星 2018-09-04 04:25:42

微信小程序开发技巧之：template模板使用

夜空划过的流星 2018-09-04 04:25:42

微信小程序开发之顶部滑动导航菜单

夜空划过的流星 2018-09-04 04:25:42

小程序自定义分享功能

夜空划过的流星 2018-09-04 04:25:41

微信小程序学习 - 程序、页面注册及生命周期

夜空划过的流星 2018-09-04 04:25:41

微信小程序“返回顶部”实现

夜空划过的流星 2018-09-04 04:25:39