第一个小程序：一物一码小程序复盘
一、一物一码项目流程
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、图片保存到本地
