第一个小程序：一物一码小程序复盘

一、一物一码项目流程
1、获取token
通过wx.login()获取code,访问后台获取token接口，通过code，拿到token等信息
2、获取一物一码：
微信接参，拿到微信的码，访问后台接口，拿到真实的码
3、获取用户授权信息：
4、抽奖等功能

二、微信api及方法
1、微信登录；
2、微信授权
3、设置多个音乐播放、并且设置是否受静音按钮影响；
4、微信带参二维码；
5、微信长按保存二维码、canvas图片保存到本地
6、分页加载：上拉加载

1、微信登录

// 登录
  wxLogin() {
    return new Promise((resolve, reject) => {
      let that = this;
      wx.login({
        success(res) {
          resolve(res.code);
        }
      })
    }).catch((e) => { })
  },

2、授权

 

onGotUserInfo(e) {//对象e包含用户信息    api.Code.UpdateUserInfo.EncryptedData = e.detail.encryptedData;   
api.Code.UpdateUserInfo.Iv = e.detail.iv; 
}

2、加载字体：字体路径需要是后台路径

wx.loadFontFace({
      family: 'zhenyan',
      source: 'url("https://xyjzutcapidemo.escase.cn/fonts/zhenyan.ttf")',
      success: function (res) {      },
      fail: function (res) {        // console.log("font fail", res);      },
      complete: function (res) {    }
});

3、设置多个音乐播放、并且设置是否受静音按钮影响；

//设置音乐是否受静音按钮影响
  wx.setInnerAudioOption({ obeyMuteSwitch: false, mixWithOther: true });
// 初始化
const bgMusic = wx.createInnerAudioContext();
listenerButtonPlay: function (src, name) {
    var that = this;
    bgMusic.src = src;
    bgMusic.title = name;
    bgMusic.obeyMuteSwitch = false;
    bgMusic.loop = true;
    bgMusic.play(); //播放音乐
  },
 //停止播放
 bgMusic.stop();
//暂停
 bgMusic.pause(); //暂停播放音乐
//播放
    bgMusic2.play(); //停止播放

4、微信带参二维码；

onLoad: function (options) {
    app.globalData.code_ticket_788 = options.code_ticket || wx.getStorageSync('code_ticket_788');//一物一码
    if (options.code_ticket) {
      wx.setStorageSync('code_ticket_788', options.code_ticket)
    }
}

5、微信长按保存二维码、canvas图片保存到本地

saveImage(e) {//长按保存二维码   
  let that = this;     
let url = e.currentTarget.dataset.url;//二维码路径   
 this.saveImageAudit(url, false); 
 },

// 获取授权，被调用保存图片方法
saveImageAudit(url, islocal) {//url:图片路径；islocal:是否是本地图片（false为线上图片）
    let that = this;
    //1、用户需要授权
    wx.getSetting({
      success: (res) => {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success: () => {
              // console.log("audit success...", islocal);
              that.downLocalImg(url, islocal);
            },
            fail: (res) => {
              wx.showModal({
                title: '提示',
                content: '若点击不授权，将无法使用保存图片功能',
                cancelText: '不授权',
                cancelColor: '#999',
                confirmText: '授权',
                confirmColor: '#f94218',
                success(res) {
                  if (res.confirm) {
                    wx.openSetting({//用户自己打开授权
                      success(res) {
                        if (res.authSetting['scope.writePhotosAlbum']) {//授权了
                          that.downLocalImg(url, islocal);
                        }
                      }
                    })
                  } else if (res.cancel) {
                    // console.log('用户点击取消')
                  }
                }
              })
            },
          })
        } else {
          that.downLocalImg(url, islocal);
        }
      },
      fail: (res) => {
        // console.log("getSetting fail...", res);
      }
    })
  },

downLocalImg(url, islocal) {//下载图片，并调用保存图片到本地相册方法
    let that = this;
    if (!islocal) {
      wx.getImageInfo({
        src: url,
        success: (res) => {
          let path = res.path;
          that.saveImageKeep(path);
        },
        fail: (res) => {
          console.log("下载图片失败");
        }
      })
    } else {
      that.saveImageKeep(url);
   }
  },

saveImageKeep(url) {//保存图片到相册
    wx.saveImageToPhotosAlbum({
      filePath: url,
      success(res) {
        wx.showModal({
          content: '图片已保存到相册，赶紧晒一下吧~',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#333',
          success: function (res) {
            if (res.confirm) {
              // console.log('用户点击确定');
            }
          }, fail: function (res) {
            // console.log(res)
         }
        })
      }
    })
  },

6、分页加载（上拉加载）

             
                {{item.DrawTime}}
                {{item.AwardName}}
                {{item.AwardStatus}}
             
             

 // 上拉加载活动记录 
toLower() {
    var that = this;
    var state = that.data.state;
    if (state > 0) {
      wx.showLoading({
        title: '加载中...',
      });
      that.setData({
        p: that.data.p + 1
      })
      that.getDrawRecord();
      wx.hideLoading();
    }
  },

三、可复用方法

1、canvas方法：画图片、画文字、画线条、转图片、存储到本地
2、图片保存到本地