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

在这里，我主要整理了一些小程序开发过程中常用的功能点，非常实用，下面来一看看看吧
1、获取高度宽度

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

【微信小程序开发常用功能点与使用方法总结】2、动态绑定 style 样式和class

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

3、wx:if

1 2 3

4、点击事件

全选//冒泡事件catchtap做点击事件 //获取点击数据let id = e.currentTarget.dataset.id

5、wx:for

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

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.横线

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

//时间格式化var format = function(date) {var date = getDate(date)var year = date.getFullYear()var month = date.getMonth() + 1var 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; //手机邮箱打星号var toHide = function(array) {var mphone = array.substring(0, 3) + '****' + array.substring(7); return mphone; }module.exports.toHide = toHide;

11、video，属性用法
<

video id="myVideo" src="https://www.it610.com/article/{{url}}" binderror="videoErrorCallback" show-center-play-btn='{{false}}' show-play-btn="{{true}}"controlstitle="课程"object-fit="fill"enable-auto-rotation="true"bindtimeupdate="bindtimeupdate">// let videoCtx = wx.createVideoContext('myVideo', this)videoCtx.pause()//bindtimeupdate获取进度时间，根据时间来进行限制播放操作bindtimeupdate:function(res){//播放中函数，查看当前播放时间等let video_status = this.data.video_statuslet that = thisif (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 = https://www.it610.com/article/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 = thiswx.getLocation({type: 'gcj02',success (res) {const latitude = res.latitudeconst longitude = res.longitudethat.getAddress(latitude, longitude)}})},getAddress(latitude, longitude) {let that = thisqqmapsdk.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: '复制成功',}); }}); },

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