如有不懂请联系楼主或者加群725395843 这里是技术讨论群。供大家讨论。
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属性指定。
使用 navigateTo 页面跳转：
保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
OBJECT参数说明：
示例代码：
wx.navigateTo({
url:'text'
})
注意：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。
wx.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面。
OBJECT参数说明：
示例代码：
| 1 2 3 |
|
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('用户点击确定')
}
}
})
10、显示操作菜单 wx.showActionSheet(OBJECT)
wx.showActionSheet({
itemList: ['A', 'B', 'C'],
success: function(res) {
if (!res.cancel) {
console.log(res.tapIndex)
}
}
})
11、动态设置页面当前标题
wx.setNavigationBarTitle({
title: '当前页面'
})
//注意 这个是在页面的 .json 中
12、系统粘帖板的内容操作
1）wx.setClipboardData(OBJECT)，设置系统剪贴板的内容
设置系统剪贴板的内容
OBJECT参数说明：
参数 类型 必填 说明
data String 是 需要设置的内容
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）
示例代码：
wx.setClipboardData({
data: 'data',
success: function(res) {
wx.getClipboardData({
success: function(res) {
console.log(res.data) // data
}
})
}
})
2）wx.getClipboardData(OBJECT)，获取系统剪贴板的内容
获取系统剪贴板内容
OBJECT参数说明：
参数 类型 必填 说明
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）
success返回参数说明：
参数 类型 说明
data String 剪贴板的内容
示例代码：
wx.getClipboardData({
success: function(res){
console.log(res.data)
}
})
13、调用客户端扫码界面
函数：wx.scanCode(OBJECT)， 功能：调起客户端扫码界面
Object 参数说明：
参数 类型 必填 说明 最低版本
onlyFromCamera Boolean 否 是否只能从相机扫码，不允许从相册选择图片 1.2.0
scanType Array 否 扫码类型，参数类型是数组，二维码是'qrCode'，一维码是'barCode'，DataMatrix是‘datamatrix’，pdf417是‘pdf417’。 1.7.0
success Function 否 接口调用成功的回调函数，返回内容详见返回参数说明。
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）
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参数说明：
参数 类型 必填 说明
phoneNumber String 是 需要拨打的电话号码
success Function 否 接口调用成功的回调
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）
示例代码：wx.makePhoneCall({
phoneNumber: '1340000' //仅为示例，并非真实的电话号码
})
15、微信小程序尺寸单位rpx和px的关系px单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.