第一个微信小程序总结
用了一周的时间跟大神学习,撸了第一个微信小程序。在这里我主要总结下我用到的技术 ,源码就不放了。放上我的github地址:https://github.com/Zmaxt/movies--wx
会用VUE框架的肯定觉得小程序炒鸡easy。的确,里边很多数据绑定方式和vue一样~
app.json 里边是对所有页面的路径配置,底部tabbar的配置,页面风格样式的综合配置。
(pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 小程序所有页面的顶部背景颜色,文字颜色定义在这里)
app.js 设置全局变量globalData,其他页面通过getApp()方法获取变量
组件:
(1)、swiper: 轮播图 只可放swiper-item组件 属性:autoplay 自动播放
(2)、scroll-view:可滚动视图区域
属性:
scroll-into-view 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
scroll-with-animation 在设置滚动条位置时使用动画过渡
(3)、slider:滑动选择器
(4)、template:使用 name 属性,作为模板的名字;使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入
(5)、radio-group:单选,内部由多个<radio />组成,
bindchange属性:function 选中项发生变化时触发 change 事件,event.detail.value = 选中项radio的value
(6)、input:获取input的value:e,detail.value
页面跳转:
redirectTo:关闭当前页,跳转到指定页;导航没有返回按钮,底部也没有tabbar了。
navigateTo:保留当前页,跳转到指定页;还可以返回。
switchTap:只能用于跳转到tabbar页面,并关闭其他非tabbar页面。
页面转发:
onShareAppMessage(options)
只有定义了此事件处理函数,右上角菜单才会显示 “转发” 按钮,
用户点击转发按钮的时候会调用,
此事件需要 return 一个 Object,用于自定义转发内容(转发成功,失败,转发后的回调:success,fail,complete)。
数据缓存:
同步:wx.setStorageSync(key,value)和wx.getStorageSync(key)
交互反馈:
wx.showActionSheet(object)展示操作菜单object:itemList,itemColor,success,fail,complete
wx.showModal(object) 模态弹窗
音乐播放:
wx.playBackgroundAudio(object) object:dataUrl 音乐地址
使用后台播放器播放音乐,对于微信客户端来说,只能同时有一个后台音乐在播放。当用户离开小程序后,音乐将暂停播放;当用户点击“显示在聊天顶部”时,音乐不会暂停播放;当用户在其他小程序占用了音乐播放器,原有小程序内的音乐将停止播放。
wx.pauseBackgroundAudio() 暂停播放
wx.stopBackgroundAudio() 停止播放
wx.onBackgroundAudioPlay(callback)监听音乐播放
wx.onBackgroundAudioPause(callback)监听音乐暂停
wx.onBackgroundAudioStop(callback)监听音乐停止
网络请求:
wx.request 这里和ajax请求类似。
下拉刷新:
onPullDownRefresh()
(必须在json文件中开启加载 "enablePullDownRefresh":true,)
wx.stopPullDownRefresh()
停止当前页面下拉刷新。
上拉触底加载:
onReachBottom()
预览图片
wx.previewImage(object)
object 属性:
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
从本地选择图片或相机拍照
wx.chooseImage(object)
object 属性:
count: 1, // 默认9,最多可以选择几张图片
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// res返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片