您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

微信小程序开发常用功能点与使用方法总结

51自学网 2022-02-21 13:39:51
  javascript

在这里,我主要整理了一些小程序开发过程中常用的功能点,非常实用,下面来一看看看吧 

1、获取高度宽度

var windowHeight = wx.getSystemInfoSync().windowHeightvar windowWidth = wx.getSystemInfoSync().windowWidth

2、动态绑定 style 样式 和class

class="operBtn {{select==1?'activeClass':''}}"style="display:{{displayPhoto}}"

3、wx:if

<view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view wx:else> 3 </view>

4、点击事件

<van-tag plain style="margin-left:10px;" bindtap="toggle">全选</van-tag>//冒泡事件catchtap做点击事件 <van-button class="shop-but" size="mini" icon="like-o" catchtap="getWish" data-pro_id='{{item.product_id}}'></van-button>//获取点击数据let id = e.currentTarget.dataset.id

5、wx:for

//在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。//默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item<view wx:for="{{array}}">  {{index}}: {{item.message}}</view>//或者//使用 wx:for-item 可以指定数组当前元素的变量名,//使用 wx:for-index 可以指定数组当前下标的变量名:<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">  {{idx}}: {{itemName.message}}</view>

6、data里面的数据

//存储this.setData({        result: event.detail      }); //使用 this.data.result

7、修改页面配置。可以下拉刷新;修改页面标题

"enablePullDownRefresh": true,"navigationBarBackgroundColor": "#FFA500","navigationBarTitleText": "我的发票","navigationBarTextStyle": "white"

8、动态修改页面标题

wx.setNavigationBarTitle({     title: this.data.info.name})

9.横线

<van-divider custom-style="margin:10px 0;" />

10、WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。

//时间格式化<wxs module="format">    var format = function(date) {        var date = getDate(date)        var year = date.getFullYear()        var month = date.getMonth() + 1        var day = date.getDate()        var weekDay = date.getDay()        var week = ''        switch(weekDay){             case 0:                 week = '周日'                break;             case 1:                week = '周一'                break;             case 2:                 week = '周二'                break;             case 3:                 week = '周三'                break;             case 4:                 week = '周四'                break;             case 5:                 week = '周五'                break;             case 6:                 week = '周六'                break;         }        return month + '月' + day + '日' +' ' + week;    }module.exports.format = format;</wxs>//手机邮箱打星号<wxs module="phone">var toHide = function(array) {  var mphone = array.substring(0, 3) + '****' + array.substring(7);  return mphone;}module.exports.toHide = toHide;</wxs>

11、video,属性用法

<video       id="myVideo"       src="{{url}}"       binderror="videoErrorCallback"       show-center-play-btn='{{false}}'       show-play-btn="{{true}}"      controls      title="课程"      object-fit="fill"      enable-auto-rotation="true"      bindtimeupdate="bindtimeupdate"    ></video>// let videoCtx = wx.createVideoContext('myVideo', this)videoCtx.pause()//bindtimeupdate  获取进度时间,根据时间来进行限制播放操作bindtimeupdate:function(res){//播放中函数,查看当前播放时间等        let video_status = this.data.video_status        let that = this        if (res.detail.currentTime > 10) {            if (video_status === '0') {                wx.showModal({                    title: '登录',                    content: '试听课程结束,如需继续查看,请先登录',confirmText:'确定',                    success (res) {                      if (res.confirm) {                        wx.switchTab({                            url: '/pages/user/user'                        })                      } else if (res.cancel) {                        wx.navigateBack({                          delta: 1,                        })                      }                    }                })            } else if (video_status === '2'){                let videoCtx = wx.createVideoContext('myVideo', this)                videoCtx.pause()                wx.showModal({                    title: '购买课程',                    content: '试听课程结束,如需继续查看,请先购买',confirmText:'立即支付',                    success (res) {                    if (res.confirm) {                        that.onClickButton()                    } else if (res.cancel) {                        wx.navigateBack({                        delta: 1,                        })                    }                    }                })            }                    } else {                    }    },

12、数据的存储

//存try {          wx.setStorageSync('car', info)        } catch (e) { }//获取try {      var value = wx.getStorageSync('car')      if (value) {        this.setData({          ApplyContent:value        })      }    } catch (e) {    }

13、地图使用

//官网const QQMapWX = require('../../assets/js/qqmap-wx-jssdk')const qqmapsdk = new QQMapWX({    key: 'XSTBZ-G74CJ-7BVFQ-KC2JD-ONRK5-ZABGU'})getAddressLocation(){        let that = this        wx.getLocation({        type: 'gcj02',        success (res) {            const latitude = res.latitude            const longitude = res.longitude            that.getAddress(latitude, longitude)                    }        })    },    getAddress(latitude, longitude) {        let that = this        qqmapsdk.reverseGeocoder({            location: {latitude,longitude},            success(res) {                console.log(res);                var mks = []                mks.push({ // 获取返回结果,放到mks数组中                    title: res.result.address,                    id: 1,                    latitude: latitude,                    longitude: longitude,                    iconPath: "../../img/mk.png", //图标路径                    width: 20,                    height: 20                })                that.setData({                    address:res.result.address,                    markers: mks,                    latitude: latitude,                    longitude: longitude,                })            }        })    },

14、点击复制

copyBtn: function (e) {        var currentidx = e.currentTarget.dataset.num;        console.log(currentidx);         wx.setClipboardData({        data: currentidx,        success: function (res) {            wx.showToast({            title: '复制成功',            });        }        });    },

总结

到此这篇关于微信小程序开发常用功能点与使用方法的文章就介绍到这了,更多相关微信小程序开发常用功能点内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net!


下载地址:
JS的深浅复制详细
Vue混入使用和选项合并详解
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。