微信小程序开发技巧-优快云博客

1. wx:for="{{proList}}" 循环

<image class="pro-img" src="{{item.img}}"></images>
<view class="pro-title">{{item.title}}</view>
<text class="pro-desc">{{item.shortDesc}}</text>

2 . text、image不是块元素，要设置为块元素，才可设置padding等属性。

3. 绑定事件：bindtap=‘’toDe‘’

4. 进入相应的index页面：事件----toDetail(e) {}；打印e.currentTarget.dataset,index

todetail:function(e){
    console.log(e);
    var index = e.currentTarget.dataset,index;
    Console.log(index);
  }
})

5. 微信小程序里，只有<text></text>支持"\n"换行。

6.bindtap:绑定点击事件

bindlongtap:绑定长按事件

bindtouchcancel:触摸取消

bindtouchend:触摸结束

bindtouchmove:触摸移动

7. 点击进入详情 bindtap='toDetail' data-index='{{index}}'

点击事件获取点击次数变量

8. swiper:页面轮播图；

<swiper indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator- dots="true">
    <block wx:for="{{imgUrls}}">
        <swiper-item>
            <image src="{{item}}" class="slide-image" width="355" height="150"/>
        </swiper-item>
    </block>
</swiper>

9. 直接打电话：写在js里，与生命周期并行，写在事件函数里：

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

10. API请求：

在onload方法中调用自定义的获取数据的getProList方法。该方法调用wx.request发起请求， url为从后台获取数据的地址。

this.getProList( ) 调用。

函数：

getProList: function () {
    var self = this;
    wx.request({
        url: 'http://127.0.0.1.5000/';
        method:'Get',
        seccess: function(res) {    
            console.log(res);
            self.setData({
                proList: res.data,
            })
        } 
    })
}

11. 复制方法：剪切板：

<button bindTap=''copy''>复制<button/>

copy:function ( ) {

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

                    // 弹框
                    wx.showModal ({
                        titel:'复制成功',
                        content: '内容已经复制成功!',
                   })
                } 
            }) 
        } 
    })
}

12. 弹框

wx.showModal ({
    titel:'复制成功',
    content: '内容已经复制成功!',
})

13 . 基础库兼容问题

if (wx.setClipboardData) {

    wx.setClipboardData

        data:'哈哈',

        success: function (res) {

            wx.showModal ({

            title:'复制成功',

            content:'内容已经复制成功!'

        })

    }

 })

} else {

    wx.showModal({

    title:'复制成功',

    content:'内容已经复制成功!'

    })

}

14. 不同页面传值方式

<1> url传值

toDetail: function (e) {
    console.log(e);
    var index = e.currentTarget.dataset.index;
    consoe.log(index);
    var title = proList[index].title;
    wx.navigateTo({ // 路由跳转
        url: '/pages/detail/detail?title='+title
    })

<2> app.globalData全局变量