小程序开发经验总结
小程序开发公众平台地址链接:https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=19042217
环境配置
全局配置
对应文件:app.json
注册 pages window tabBar networkTimeout
{ // 当前程序是由哪些页面组成的(第一项默认为初始页面) // 所有使用到的组件或页面都必须在此体现 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages "pages": [ ... ], // 应用程序窗口设置 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window "window": { ... }, // 应用导航栏设置 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar "tabBar": { ... }, // 网络超时设置 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout "networkTimeout": {}, // 是否在控制台输出调试信息 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug "debug": true }
其中window属性:
{ // 导航条背景色 "navigationBarBackgroundColor": "#35495e", // 导航条前景色(只能是white/black) "navigationBarTextStyle": "white", // 导航条文本 "navigationBarTitleText": "电影 « 豆瓣", // 窗口背景颜色 "backgroundColor": "#fff", // 窗口前景色 "backgroundTextStyle": "dark", // 是否开启下拉刷新 "enablePullDownRefresh": true }
组件:https://developers.weixin.qq.com/miniprogram/dev/component/
*.js: 作为逻辑层 与wxml交互 有着丰富的 网络, 媒体, 文件, 数据缓存, 位置, 设备, 界面...的api
// 获取全局应用程序对象 const app = getApp() // Page也是一个全局函数,用来创建页面对象 Page({ // ========== 页面数据对象(可以暴露到视图中,完成数据绑定) ========== data: { ... }, // ========== 页面方法(可以用于抽象一些公共的行为,例如加载数据,也可以用于定义事件处理函数) ========== method1 (p1, p2) { ... }, method2 (p1, p2) { ... }, // ========== 生命周期方法 ========== // 页面加载触发 onLoad () { ... } ... })
属性 | 类型 | 描述 |
---|---|---|
data | Object | 页面的初始数据 |
onLoad | Function | 生命周期函数--监听页面加载 |
onReady | Function | 生命周期函数--监听页面初次渲染完成 |
onShow | Function | 生命周期函数--监听页面显示 |
onHide | Function | 生命周期函数--监听页面隐藏 |
onUnload | Function | 生命周期函数--监听页面卸载 |
onPullDownRefreash | Function | 页面相关事件处理函数--监听用户下拉动作 |
其他 | Any | 开发者可以添加任意的函数或数据到 object 参数中,用 this 可以访问 |
官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/
*.wxml: 数据驱动的视图层 + 微信提供了大量的组件 表单 导航 媒体 ...
尺寸单位
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
rem(root em): 规定屏幕宽度为20rem;1rem = (750/20)rpx 。
项目结构:
└─ wxinproject / ·································· 项目所在目录 ├─ pages/ ······································ 页面目录 │ ├─ index/ ··································· index页面 │ │ ├─ index.js ······························ index页面逻辑 │ │ ├─ index.wxml ···························· index页面结构 │ │ └─ index.wxss ···························· index页面样式 │ └─ logs/ ···································· logs页面 │ ├─ logs.js ······························· logs页面逻辑 │ ├─ logs.wxml ····························· logs页面结构 │ └─ logs.wxss ····························· logs页面样式 ├─ utils/ ······································ 公共脚本目录 │ └─ util.js ·································· 工具脚本 ├─ app.js ······································ 应用程序逻辑 ├─ app.json ···································· 应用程序配置 └─ app.wxss ···································· 应用程序公共样式
背景音乐播放功能
开始播放功能:https://developers.weixin.qq.com/miniprogram/dev/api/wx.playBackgroundAudio.html
停止播放功能:https://developers.weixin.qq.com/miniprogram/dev/api/wx.stopBackgroundAudio.html
暂停播放功能:https://developers.weixin.qq.com/miniprogram/dev/api/wx.pauseBackgroundAudio.html
定义全局变量
globalData: { ... },
应用全局方法
method1 (p1, p2) { ... }, method2 (p1, p2) { ... },
app.js 更多options设置
// App函数是一个全局函数,用于创建应用程序对象 App({ // ========== 全局数据对象(可以整个应用程序共享) ========== globalData: { ... }, // ========== 应用程序全局方法 ========== method1 (p1, p2) { ... }, method2 (p1, p2) { ... }, // ========== 生命周期方法 ========== // 应用程序启动时触发一次 onLaunch () { ... }, // 当应用程序进入前台显示状态时触发 onShow () { ... }, // 当应用程序进入后台状态时触发 onHide () { ... } })
首先定义音乐是否播放相关全局变量
//app.js App({ globalData: { g_isPlayingMusic: false, g_currentMusicPostId: null } })
新建名为 setAudioMonitor 方法
var that = this; wx.onBackgroundAudioPlay(function () { that.setData({ isPlayingMusic: true, }) app.globalData.g_isPlayingMusic = true; app.globalData.g_currentMusicPostId = that.data.currentPostId; }) wx.onBackgroundAudioPause(function () { that.setData({ isPlayingMusic: false, }) app.globalData.g_isPlayingMusic = false; app.globalData.g_currentMusicPostId = null; })
在 onLoad 方法中进行调用
let postId = options.id; ...... if(app.globalData.g_isPlayingMusic && app.globalData.g_currentMusicPostId === this.data.currentPostId){ this.setData({ isPlayingMusic: true }) } this.setAudioMonitor();
设置播放/暂停图标点击事件
onMusicTap: function(){ var currentPostId = this.data.currentPostId; var postData = postsData.postList; var isPlayingMusic = this.data.isPlayingMusic; if(isPlayingMusic){ wx.pauseBackgroundAudio(); this.setData({ isPlayingMusic: false }) app.globalData.g_isPlayingMusic = false; }else{ wx.playBackgroundAudio({ dataUrl: postData[currentPostId].music.url, title: postData[currentPostId].music.title, coverImgUrl: postData[currentPostId].music.coverImg }) this.setData({ isPlayingMusic: true }) app.globalData.g_currentMusicPostId = this.data.currentPostId; app.globalData.g_isPlayingMusic = true; } }
未完待续...
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步