用户
 找回密码
 立即注册

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