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

1、获取高度宽度

var windowHeight = wx.getSystemInfoSync().windowHeight
var 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: '复制成功',
            });
        }
        });
    },

总结

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

微信小程序开发常用功能点与使用方法总结的更多相关文章

  1. 基于EJB技术的商务预订系统的开发

    用EJB结构开发的应用程序是可伸缩的、事务型的、多用户安全的。总的来说,EJB是一个组件事务监控的标准服务器端的组件模型。基于EJB技术的系统结构模型EJB结构是一个服务端组件结构,是一个层次性结构,其结构模型如图1所示。图2:商务预订系统的构架EntityBean是为了现实世界的对象建造的模型,这些对象通常是数据库的一些持久记录。

  2. 微信小程序之html5 canvas绘图并保存到系统相册

    这篇文章主要介绍了微信小程序之html5 canvas绘图并保存到系统相册,需要的朋友可以参考下

  3. 微信小程序如何获取图片宽度与高度

    这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  4. 微信小程序多项选择器checkbox

    这篇文章主要为大家详细介绍了微信小程序多项选择器checkbox,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. 微信小程序实现收缩式菜单

    这篇文章主要为大家详细介绍了微信小程序实现收缩式菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  6. 微信小程序自定义状态栏

    这篇文章主要为大家详细介绍了微信小程序自定义状态栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  7. 微信小程序实现简单的购物车功能

    这篇文章主要为大家详细介绍了微信小程序实现简单的购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  8. 微信小程序实现手机号码验证

    这篇文章主要为大家详细介绍了微信小程序实现手机号码验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. 使用Angular.js开发的注意事项

    这篇文章主要记录了一些在学习和使用angular.js踩到的坑和需要注意的点,方便以后自己查阅,也给同样遇到这些问题的朋友们一些帮助,有需要的朋友们下面来一起看看吧。

  10. 微信小程序预览二进制流文件的方法

    这篇文章主要为大家详细介绍了微信小程序预览二进制流文件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部