小程序开发经验总结

小程序开发公众平台地址链接：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 () { ... }
})

 

首先定义音乐是否播放相关全局变量

g_isPlayingMusic

 

当前播放音乐所属postId

g_currentMusicPostId

 

//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;
    }
  }

 

 未完待续...