用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

紅包小程序小結

Rolan 2019-12-30 00:33

最近做了一個紅包兌換小程序,遇到了一些問題這里做一下總結。1、需求:回流用戶在游戲客戶端獲取到口令,然后在小程序這邊輸入口令兌換紅包,成功之后錢會發到用戶微信賬戶里。2、流程:若未授權,顯示授權按鈕。點 ...

最近做了一個紅包兌換小程序,遇到了一些問題這里做一下總結。

1、需求:回流用戶在游戲客戶端獲取到口令,然后在小程序這邊輸入口令兌換紅包,成功之后錢會發到用戶微信賬戶里。

2、流程:若未授權,顯示授權按鈕。點擊授權登錄,授權成功后獲取到私密字段iv和encryptedData,調取登陸接口,錯誤則提示相關信息,正確則跳轉校驗姓名和身份證的頁面,校驗通過就調取提現接口,成功則提示提現成功,同時顯示生成分享圖按鈕。分享圖由用戶昵稱,頭像,二維碼,提現金額等等組成。

3、框架:uniapp

分享圖的問題

1、 measureText 獲取寬度的時候,傳入的參數如果是數字,則會返回0。

let money = 10;  //這里需要把數字轉成字符串
ctx.measureText(money).width;

2、繪制圖片的時候不要忘了先使用 getImageInfo 轉成臨時地址,再 drawImage ,如果不經過這步,雖然開發者工具上看到是正常的,但是真機是顯示不了。

3、需要繪制微信頭像的時候,要在后臺配置downloadFile合法域名 https://wx.qlogo.cn 

4、最初背景圖大概170KB,尺寸750*1334,最終繪制出來的分享圖太大了。解決方法:

  • 把背景圖片盡量再壓縮,最終是60多KB。
  • 調 canvasToTempFilePath 的時候,設置 fileType 為jpg,quality范圍是(0,1],取個合適的值。 
    5、小程序里面的保存圖片并不是長按保存的,需要點擊按鈕授權。
    <button  open-type="getUserInfo"  @getuserinfo="onGotUserInfo"></button>、
    
...
onGotUserInfo(e){
	uni.saveImageToPhotosAlbum({
		filePath: this.tempPath,
		success(res) {
			uni.showToast({
			  title: '保存成功',
			  icon: 'success',
			  duration: 1500
			})
		},
		fail(err){
	
		}
	})
}
...

如圖:如果用戶點擊確定,就會正常保存圖片到本地相冊了。

如果用戶點擊取消,不授權呢?那還能怎么樣,點擊再彈出原來的彈窗重新授權唄。很遺憾,這里并不能像授權登錄彈窗一樣點了取消之后,再次點擊授權按鈕還會喚起那個彈窗。解決方法:在 saveImageToPhotosAlbum 的fail回調函數里面操作,再次獲取保存到相冊權限。

if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
  uni.showModal({
	title: '提示',
	content: '需要您授權保存相冊',
	showCancel: false,
	success:res=>{
	  uni.openSetting({
		success(settingdata) {
		  if (settingdata.authSetting['scope.writePhotosAlbum']) {
			uni.showModal({
			  title: '提示',
			  content: '獲取權限成功,再次點擊保存圖片按鈕即可保存',
			  showCancel: false,
			})
		  } else {
			uni.showModal({
			  title: '提示',
			  content: '獲取權限失敗,將無法保存到相冊哦~',
			  showCancel: false,
			})
		  }
		},
		fail(failData) {
		  console.log("failData",failData)
		},
		complete(finishData) {
		  console.log("finishData", finishData)
		}
	  })
	}
  })
}

點擊取消按鈕之后,會跳轉到這里。打開設置里的“保存到相冊”的開關即可。

原生微信小程序和uniapp框架的一些對比

針對此次項目,這里挑兩點來寫。

全局變量的管理

1、原生微信小程序可以在app.js的globalData對象中對全局變量進行管理

app.js

App({
    globalData: {
        session:""
    }
})

pages/index/index.js

...
const app = getApp()//獲取應用實例
app.globalData.session = "xxxx" //設置
app.globalData.session  //讀取
...

2、uniapp用的是vue的那套,所以可以用vuex來管理狀態

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
	 state : {
		session:""
	 },
	 mutations : {
		getSession(state, res){
			state.session = res;
		},
	 }
});
export default store

設置

this.$store.commit('getSession',res.session) //接口返回res.session

獲取

this.$store.state.session

頁面獲取全局函數返回的值

1、原生微信小程序,比如在app.js中獲取用戶信息保存在 globalData 中userInfo字段,然后頁面在onload的時候獲取全局的userInfo,你會發現有時候拿不到。由于 getUserInfo 是網絡請求,可能會在 Page.onLoad 之后才返回,所以需要加入 callback 以防止這種情況。

app.js

App({
  onLaunch: function() {
    this.init()
  },
  init: function() {
    // 獲取用戶授權結果
    wx.getSetting({
      success: (res) => {
        if (res.authSetting['scope.userInfo']) {
          wx.getUserInfo({ // 獲取用戶信息
            success: res => {
              this.globalData.userInfo = res.userInfo;
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            },
            //拒絕授權
            fail: res => {

            }
          })
        } else {

        }
      }
    })
  },
  globalData: {
    userInfo: ""
  }
})

pages/index/index.js

const app = getApp()
Page({
  data: {
	userInfo:""
  },
  onLoad: function() {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
      })
    } else{
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
        })
      }
    } 
  },
})

2、uniapp是配合vuex和計算屬性computed來處理的

APP.vue

export default {
	onLaunch: function() {
		this.getUserInfo();
	},
	methods:{
		getUserInfo() {
			uni.getSetting({
			  success: (res) => {
				if (res.authSetting['scope.userInfo']) {
				  uni.getUserInfo({ // 獲取用戶信息 
					success: res => {
						this.$store.commit('userInfo',{
							avatarUrl:res.userInfo.avatarUrl,
							nickName:res.userInfo.nickName
						})
					},
					fail: res => {

					}
				  })
				} else {

				}
			  }
			})
		},	
	}
}

pages/index/index.vue

獲取到 userInfo 便可以使用了,如果需要,還可以使用watch監聽。

export default {
	data() {
		return {

		} 
	},
	onLoad(){
		
	},
	computed: {
		userInfo() {
			return this.$store.state.hasUserInfo
		}
	},
	watch:{
		userInfo(val){
			if(val){
	 		 	
	 		}
	 	}
	},
	created() {

	},
	methods: {
		
	}
}
鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: Jervis 來自: xiaojiecong
东方红彩票 - 购彩大厅 2019股票型基金最新排名 中石油股票行情 股票黑马k线图 投资基金好还是股票 股票是什么怎么玩 怎么申购新股票 股票短线操作方法 模拟炒股软件 股票今日大盘 股票涨停指标