《我的》页面

json 文件

1
2
"navigationBarTitleText": "我的",
  "disableScroll": true  // 使页面无法滚动

导航页面链接跳转

navigator

背景图片

wxss 背景图片不支持本地相对路径的图片，只支持网络图片和 base64 图片

建议使用 base64 图片，图片文件最好不要太大。

每个页面都有的 page 标签

1
2
3
page {
  background-color: #f1f1f1;
}

播放历史与本地存储

方案一：播放历史存储在数据库当中，这样在不同设备访问都可查看播放历史。读取速度相对较慢

方案二：播放历史存储在本地，仅当前设备可查看播放历史。读取速度较快

本项目采用本地存储：

使用 openid 作为本地存储的 key，播放历史存入 value

在 app.js 中获取 openid，即打开小程序就获取 openid。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// app.js
onLaunch: function () {
	this.getOpenid() // 获取openid并存储
},
getOpenid() { // 获取openid并存储
    wx.cloud.callFunction({
      name: 'login'
    }).then((res) => {
      const openid = res.result.openid
      this.globalData.openid = openid // 保存到全局变量
      if (wx.getStorageSync(openid) == '') { // 该用户从未打开过小程序，未存储过openid在本地
        wx.setStorageSync(openid, []) // 存储openid到本地
      }
    })
  }

歌曲播放时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 保存播放历史到本地存储
  savePlayHistory() {
    const currentSong = musiclist[nowPlayingIndex] // 当前播放歌曲
    const openid = app.globalData.openid // 从全局属性获取openid
    const playHistory = wx.getStorageSync(openid) // 从本地存储获取播放历史数组

    for (let i = 0, len = playHistory.length; i < len; i++) {
      if (playHistory[i].id === currentSong.id) { // 当前播放歌曲已存在播放历史中
        playHistory.splice(i, 1) // 删除原纪录
        break
      }
    }

    playHistory.unshift(currentSong) // 在数组开头插入
    wx.setStorage({ // 存入本地
      key: openid,
      data: playHistory
    })

  },

播放历史页面获取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
onLoad: function (options) {

    const openid = app.globalData.openid //从全局属性获取openid
    const playHistory = wx.getStorageSync(openid) // 读取本地播放历史数据

    if (playHistory.length !== 0) { // 有播放历史
      this.setData({
        playHistory
      })
      wx.setStorage({ // storage里把musiclist（播放列表）的内容换成播放历史的列表
        key: 'musiclist',
        data: playHistory,
      })
    }

  },

我的发现

代码分别演示了从云函数和小程序端获取数据，从小程序端获取数据享有权限管理的能力，不需要传 openid。

小程序码

获取小程序码

本项目演示使用接口 B：适用于需要的码数量极多的业务场景 云调用 的方式。

步骤：

  • 创建云函数 gteQRCode

  • gteQRCode 云函数下创建 config.json 配置权限，代码如下：

1
2
3
4
5
{
  "permissions": {
    "openapi": ["wxacode.getUnlimited"]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext();

  const result = await cloud.openapi.wxacode.getUnlimited({
    scene: wxContext.OPENID, // 链接参数 不一定传openid，可传其他任意数据，然后通过此数据，在别人扫码进入时就可用于判断
    // page: "pages/blog/blog" // 默认进入主页
    // lineColor: { // 线条颜色
    //   'r': 211,
    //   'g': 60,
    //   'b': 57
    // },
    // isHyaline: true // 是否透明
  });

  // result为二进制数据, 先上传到云存储

  // 上传云存储
  const upload = await cloud.uploadFile({
    cloudPath: "qrcode/qrcode" + Date.now() + Math.random() + ".png",
    fileContent: result.buffer,
  });

  return upload.fileID;
};
判断是从扫码小程序码进入，以及参数获取
1
2
3
4
5
// 在从小程序码进入的页面js，onLoad方法中，

onLoad: function (options) {
	console.log(options.scene) // 获取到小程序码进入的参数
}

版本更新检测

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// app.js
onLaunch: function(options) {
    this.checkUpate()
},
checkUpate(){
    const updateManager = wx.getUpdateManager()
    // 检测版本更新
    updateManager.onCheckForUpdate((res)=>{
      if (res.hasUpdate){
        updateManager.onUpdateReady(()=>{
          wx.showModal({
            title: '更新提示',
            content: '新版本已经准备好，是否重启应用',
            success(res){
              if(res.confirm){
                updateManager.applyUpdate()
              }
            }
          })
        })
      }
    })
  },

性能优化

官网文档优化建议

使用开发者工具的调试器，Audits 进行评分，然后根据提示针对项目进行优化。

场景值 scene 的作用与应用场景

场景值

场景值用来描述用户进入小程序的路径。完整场景值的含义请查看场景值列表。

可根据不同场景进入实现不同业务处理，比如一个点餐小程序，店家内贴了小程序码，用户通过扫码进入，可立即进入点餐页面，等等

在 app.js 中的 onLaunch(options) 、onShow(options)，options 包含 scene 场景值

开发者工具中，切后台，可模拟进入场景。

小程序的”SEO”—页面收录 sitemap

在 app.js 的同级目录下有 sitemap.json 文件，用于配置收录规则

stiemap 配置

作用：

使小程序搜索可根据小程序的内容进行搜索到

使用方法：

1、在微信公众平台，小程序信息 > 页面收录设置 > 打开 (默认是已开启)

2、打开 sitemap.json 文件，配置收录规则

1
2
3
4
5
6
7
8
9
10
{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [
    {
      // 收录规则
      "action": "allow", // 是否被收录，allow允许被收录，disallow不允许
      "page": "*" // *星号表示所有页面都被收录
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{ // 收录规则，可添加多条
  "action": "allow", // 是否被收录
  "page":"pages/player/player",  // 页面
  "params": ["musicId","index"], // 链接的动态参数
   "matching":'exact' // 表示params的参数是否要准确的匹配
  }，{
  "action": "disallow", // 是否被收录
  "page":"*",  /
  }]
}

// 上面配置规则表示除了player页面被收录外，其他页面不被收录

小程序上线审核流程

微信公众平台，版本管理>把小程序上传为体验版》提交审核》上线