微信小程序开发常用功能点与使用方法总结
更新时间:2021年10月14日 16:00 点击:1843
在这里,我主要整理了一些小程序开发过程中常用的功能点,非常实用,下面来一看看看吧
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: '复制成功', }); } }); },
总结
到此这篇关于微信小程序开发常用功能点与使用方法的文章就介绍到这了,更多相关微信小程序开发常用功能点内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
上一篇: 浅谈Vue3 父子传值
下一篇: JS的深浅复制详细
相关文章
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了vscode搭建STM32开发环境的详细过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-05-02
- 这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
- 这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
- 这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
- 这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了微信小程序(应用号)开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
- 这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16
- 这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 下面我们一起来看一篇关于 安卓开发之Intent传递Object与List的例子,希望这个例子能够为各位同学带来帮助。 Intent 不仅可以传单个的值,也可以传对象与数据集合...2016-09-20
- 这篇文章主要为大家详细介绍了php微信公众账号开发之五个坑,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-02
- 这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要为大家详细介绍了微信小程序实现点击导航条切换页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-19
- 这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
- 这篇文章主要介绍了微信小程序自定义底部弹出框动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-16
- 在日常开发中,总会接触到各种接口,前后端数据传输接口,第三方业务平台接口,下面这篇文章主要给大家介绍了关于如何设计一个安全的API接口的相关资料,需要的朋友可以参考下...2021-08-12
- 这篇文章主要介绍了微信小程序 通过控制CSS实现view隐藏与显示的相关资料,需要的朋友可以参考下...2017-05-27
- 在微信公众号平台开发者那里,在“账号管理”那里,有一项功能是“生成带参数的二维码”,通过这儿生成的二维码,只要通过微信扫一扫之后,会把事件自动推送到微...2016-05-19
- 这篇文章主要介绍了微信小程序 富文本转文本实例详解的相关资料,需要的朋友可以参考下...2016-10-25