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

一、一物一码项目流程
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、图片保存到本地

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 207,248评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,681评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,443评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,475评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,458评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,185评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,451评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,112评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,609评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,083评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,163评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,803评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,357评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,357评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,590评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,636评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,925评论 2 344

推荐阅读更多精彩内容