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

一、一物一码项目流程
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、授权

<button opentype="getUserInfo" bindgetuserinfo="onGotUserInfo"></button> 

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图片保存到本地

<image src="{{qrCodeUrl}}" data-url="{{qrCodeUrl}}" bindlongpress="saveImage" class="qr_code"></image>

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、分页加载(上拉加载)

<scroll-view class="table_scroll" scroll-y="true" style="height:200rpx;" bindscrolltolower="toLower">
              <view class="table_body" wx:for="{{record}}" wx:for-item="item" wx:key="idx" wx:key="{{idx}}">
                <view class="td">{{item.DrawTime}}</view>
                <view class="td center">{{item.AwardName}}</view>
                <view class="td">{{item.AwardStatus}}</view>
              </view>
              <!-- <view wx:if="{{state==0}}">
              <view>没有更多了</view>
            </view> -->
</scroll-view>

 // 上拉加载活动记录 
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、图片保存到本地

推荐阅读更多精彩内容