新年红包大派送,做个红包兑换小程序大家乐一乐,红包小程序小结

最近做了一个红包兑换小程序,遇到了一些问题这里做一下总结。

1、需求:回流用户在game客户端获取到口令,然后在小程序这边输入口令兑换红包,成功之后钱会发到用户微信账户里。

2、流程:若未授权,显示授权按钮。点击授权登录,授权成功后获取到私密字段iv和encryptedData,调取登陆接口,错误则提示相关信息,正确则跳转校验姓名和shenfenzheng的页面,校验通过就调取提现接口,成功则提示提现成功,同时显示生成分享图按钮。分享图由用户昵称,头像,二维码,提现金额等等组成。

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: {

    }
}

看完上面,可以尝试做一个

第一次看文章的朋友可以关注我,会不定期发布大厂面试题、Android架构技术知识点及解析等内容,还有Android学习PDF+源码笔记+面试文档+进阶视频+Flutter+Kotlin+小程序等学习内容分享

今天的小程序想学习的话,可以关注我,私信我【小程序】知道怎样免费领取

更多Android学习内容还可以看我的GitHub链接:https://github.com/Meng997998/AndroidJX
看完顺便点一下star

原文地址:https://blog.51cto.com/14606040/2463935

时间: 2024-10-26 06:26:18

新年红包大派送,做个红包兑换小程序大家乐一乐,红包小程序小结的相关文章

新产品为了效果,做的比较炫,用了很多的图片和JS,所以前端的性能是很大的问题,分篇记录前端性能优化的一些小经验。

第一篇:HTTP服务器 因tomcat处理静态资源的速度比较慢,所以首先想到的就是把所有静态资源(JS,CSS,image,swf) 提到单独的服务器,用更加快速的HTTP服务器,这里选择了nginx了,nginx相比apache,更加轻量级, 配置更加简单,而且nginx不仅仅是高性能的HTTP服务器,还是高性能的反向代理服务器. 目前很多大型网站都使用了nginx,新浪.网易.QQ等都使用了nginx,说明nginx的稳定性和性能还是非常不错的. 1. nginx 安装(linux) htt

区块链红包小程序APP开发、红包系统开发、红包系统开发、红包系统开发。

红包系统开发,红包系统开发[蔡经理 136-1236-3414 微|电] .区块链红包小程序APP开发.红包系统开发.红包系统开发.红包系统开发. 本公司是专业软件开发公司,玩家勿扰喔谢谢!~ 企业如何利用微信红包玩出营销新花样? 1.用微信红包作为见面礼: 在中国这个人情社会中,从陌生到熟悉其实往往只要一个小小的馈赠,就好像两个不认识的男人碰在一起第一个动作肯定是掏烟,有事没事先点一根.那接下去的交流就变得非常顺畅. “微信红包”充当的角色就相当于你给刚认识的朋友的那一根烟.先通过一个事物进行

从大公司做.NET 开发跳槽后来到小公司的做.NET移动端微信开发的个人感慨

从14年11月的实习到正式的工作的工作我在上一家公司工作一年多了.然而到16年5月20跳槽后自己已经好久都没有在写博客了,在加上回学校毕业答辩3天以及拿档案中途耽搁了几天的时间,跳槽后虽然每天都在不停的搞开发做项目天天忙的就如狗一样,确实是没有时间整理以及总结和发表自己的感慨.难得中秋银行的事情搞完了自己清闲3天,是时候总结一下从大公司做.NET PC 端网站的开发到现在做移动互联网的银行及政府微信公众号的开发的感触.当时自己的选择现在公司做移动互联网的部门,移动互联网就是比较忙和累.你知道的.

小胖说事10------iOS scrollview作用原理(一个大的scrollview包含一个小的scrollview,如何滑动小的scrollview的时候,大的scrollview滑动小的不动

今天做了一个项目,有这样一个需求,就是一个大的scrollview包含一个小的scrollview,如何滑动小的scrollview的时候,大的scrollview滑动,小的srollview不滑动. 我们知道当多个视图进行叠加的时候,touch事件是作用到最上面的视图上,但是如果父视图是UIScrollView,如果默认,可能touch子视图会造成UIScrollView的滚动. UIScrollView滚动的原因,可以看UIScrollView 原理. 我在这里简单的描述一下,UIScrol

12306 外包给阿里巴巴、IBM 等大企业做是否可行?

知乎上看到的,转载过来,雅俗共赏 12306首秀被骂的狗血喷头后铁道部找来IBM.阿里巴巴等大企业要解决方案,给出的条件是资金管够但是问题得解决.几大企业最后都拒绝了(其中阿里巴巴最后负责了排队系统的建设).12306开始自己尝试解决问题.他们发现市面上可以买到的成套解决方案都不足以应付春运购票负载,所以只能自己改进已有的数据库(注:其实是改用VMware SQLFire/GemFire,这里我之前理解错误).以前12306用的是小型机,发现性能严重不足,遂改用x86系统+linux平台(原平台

Python干货大派送!一千个Python库,只有你想不到,没有查不到!

环境管理 管理 Python 版本和环境的工具 p – 非常简单的交互式 python 版本管理工具. pyenv – 简单的 Python 版本管理工具. Vex – 可以在虚拟环境中执行命令. virtualenv – 创建独立 Python 环境的工具. virtualenvwrapper- virtualenv 的一组扩展. 包管理 管理包和依赖的工具. pip – Python 包和依赖关系管理工具. pip-tools – 保证 Python 包依赖关系更新的一组工具. conda

热浪来袭!DANGX限时百万糖果大派送!!!

DANGX是为实现供应链物流系统信息流.物流.资金流"三流合一"的分布式区块链应用平台,通过将区块链在供应链物流系统的实际应用,打通数据孤岛,链接数字通证,提高核心企业对供应链的掌控能力,实现物流.信息流和资金流的高效流动. DANGX作为基于区块链技术的供应链管理平台,其发行的通证DANGX承载了整个生态的全部价值.DANGX的初衷主要是为了改变传统供应链领域现状,对通证经济和治理机制进行全新的规则设计,使通证能够在多领域广泛流通,用于交易.结算,解决实际痛点,为所有用户带来通证收益

在大公司做凤尾,还是在小公司做鸡头?

大家都知道互联网大公司一向以技术强悍而知名,BAT的技术在国内互联网公司里算是比较领先的了,这也是因为大公司的业务繁杂庞大,必须要有足够优秀的技术去支撑. 相对而言,小公司更倾向于选用快速扁平化的技术架构,相对来说技术的沉淀就不会像大公司这么多,所以你会发现大公司里和小公司里,大家的技术思考可能也不太一样. 大公司里通常牛人很多,相对来说小公司里的牛人相对少一点,当然也有很多从大公司过去的牛人.所以这就出现了一个问题,在大公司里,你的技术可能平平无奇,甚至比大多数人都要弱一些,而在小公司里,你可

58红包APP系统定制搭建,58红包APP系统开发现成源码,58红包APP系统搭建

58红包APP系统搭建找[蔡经理 136-1236-3414 微|电]58红包APP系统定制搭建,58红包APP系统开发现成源码,58红包APP系统开发多少钱,58红包APP系统专业开发: 提示:专业软件开发公司,非运营方 58红包扫雷区: 10元5包奖励:小顺(1.88)小豹子(2.66)5.20(9.99)13.14(13.14) 20元5包奖励:小顺(1.88)小豹子(2.66)大顺(3.33)大豹(6.66)5.20(9.99)13.14(13.14) 50元6包奖励:小顺(1.88)小