-
2021-02-08 23:15:23
一、前言
因为学业以及工作上的事情繁多,已经弃"耕"许久了。在这段时间里,学了很多东西,也做了大大小小将近10个项目,这个过程中,越发觉得记录的重要性,所以才想着在忙碌之中,抽出时间来写一下博客,记录一下开发过程中的一些知识点。老生常谈了,既是让自己下次能够回顾,也是希望能够帮到有需要的人。
二、需求分析
在日常的微信小程序项目中,我们经常需要用到一些宣传海报,邀请海报等功能,例如一个邀请好友的海报,生成之后让用户发朋友圈或者转发好友邀请,那这时,我们就需要知道那些用户是你邀请的,方便下发奖励啥的。这都是很常见的需求。那该如何实现类似的需求呢?
三、思路分析
这些海报其实最关键的一个就是长按扫码识别的带参二维码(小程序码)。
通过查阅微信小程序开发文档,我们可以知道,总的来说有两种方式可以生成这种带参二维码(小程序码),当这种带参二维码绘制在海报上时,就可以通过这个二维码的参数来进行识别是哪个用户生成的海报,当其他用户扫码进入小程序时就可将标识的id存进数据库里,进而判断到底是谁邀请的人了。
太久没有码字了,说得可能有点累赘。
总结一下:根据二维码带的参数来判断是谁的海报,这个参数一定是能够定位出来用户的,一般来说,可以使用用户的openid来作为这个标识参数。举个简单的例子(云开发):
定义一个集合:user
有两个用户
U1字段名 值 说明 _id 123456789 使用云数据库自动生成的id即可,不用自己生成 _openid 112233 插入数据时会自带有,也是一个系统字段 superiorId 445566 上级的openid字段 U2
字段名 值 说明 _id 987654321 使用云数据库自动生成的id即可,不用自己生成 _openid 556677 插入数据时会自带有,也是一个系统字段 superiorId 112233 上级的openid字段 上面的数据表中,很明显,U2是扫了U1的二维码(小程序码)进来的,所以U2的superiorId字段的值是U1的openid
那么当我们需要统计U1邀请了多少人的时候,就可以通过查询数据中有多少用户的superiorId的值等于U1的openid即可。
四、两大实现途径
前面说到大致上有两种方式可以实现这种需求,那么我们来分析一下这两种实现方法各自的特点。方便我们在开发过程中选用适合的方法。
途径一:小程序码
微信对动态生成小程序码提供了三种方式给我们,这里我只讲云调用的方式,传统服务器开发的,可根据文档来操作,原理大致相同。
1、A接口: wxacode.createQRCode
2、C接口: wxacode.get
3、B接口: wxacode.getUnlimited
列个表格分析一下这三个接口,详细的介绍可以点击标题直达官文文档查阅。
接口 生成数量限制 时效 携带参数长度 接口A AC接口加起来不超过10W 长期 128字节 接口C AC接口加起来不超过10W 长期 128字节 接口B 无限制 长期 32可见字符 可以看到,其实AC接口是一伙的,实际的使用方法也差不多,只是参数上会有所不同。
AC接口与B接口的区别在于生成的数量限制和携带参数的长度。所以在选用的时候,就要考虑这生成的数量和携带的参数长度这两个条件了。途径二:普通二维码
简单对比完小程序码的三个接口后,再来看看这普通二维码的特点。如果是上面的三个接口都无法满足业务需求,例如参数长、生成的数量还要特别多的场景,那可以试试通过这个普通二维码的途径实现。
这个二维码跟接口相比,生成的数量无限制,参数理论可以很长(具体多长没试过,但是肯定比128长),时效也是长期有效。这样看来,似乎直接无论什么业务场景,直接选这种方式就对了?当然不是,普通二维码最少这两个方面需要考虑。
一、开放范围:企业、媒体、政府及其他组织类型小程序。 换句话说,就是不支持个人开发者账号开通使用。
二、开发起来相对来说比较复杂,需要用到服务器和域名来进行配置。会踩不少坑。
由于这个这种途径实现有点复杂,所以在这里不啰嗦了,有这方面需求的朋友可以私信我交流,互相学习。
还有最后一个需要注意的是:无论哪种途径实现,小程序都必须在发布后才可以正常扫码使用。
五、AC接口实现代码示例(云开发)
B接口与AC接口使用起来差不多,可以直接去官网看代码示例。应该是可以触类旁通的。所以这里我只用一下AC其中一个接口。主要还是引出一些常见问题。
1、新建云函数后,在config.json文件中配置权限(以createQRCode例)
2、index.js代码const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV, }) exports.main = async (event) => { try { const result = await cloud.openapi.wxacode.createQRCode({ path: event.path, width: event.width }) return result } catch (err) { return err } }
3、调用(如果不是本地调试,记得提交云函数)
if (posterType == 1) { // 配置页面路径以及参数 path = "pages/indexStudent1/indexStudent1?superiorId1=" + superiorId1 + "&superiorId2=" + superiorId2 } else if (posterType == 2) { path = "pages/teacherSubmit/teacherSubmit?superiorId=" + superiorId2 } // 调用云函数,请求生成小程序码 buffer 数据 const QRCodeObj = await wx.cloud.callFunction({ name: 'createQRCode', data: { path: path, width: 430 } }) // 需要注意的是返回来的数据是Buffer格式 // 需要转换成为base64格式(为了方便存储复用,毕竟次数有限) const base64 = "data:image/jpeg;base64," + wx.arrayBufferToBase64(QRCodeObj.result.buffer.data) // 将数据直接扔进image组件的src参数里面即可 this.setData({ imgUrl: base64 })
4、wxml
5、效果
六、说明与优化
只是截取了部分的关键代码。小程序码也做了处理。
触发函数、实现复用的代码都没有贴出来(为了安全,不方便贴出来)。优化的话,第一个肯定就是考虑复用了,即新用户第一次调用云函数去生成,下次的话,就直接从数据库里面读出来生成。
当然前提是参数一致。
为什么要复用呢,主要是因为即使是同一个二维码,参数什么都一致,你调用了十次函数生成,也算是十个码,不是一个码。所以在数量有限的情况下,尽可能考虑复用。
如果这篇文章帮到了你,点个赞吧。
更多相关内容 -
如何自己制作小程序?
2021-05-24 15:41:40以前制作小程序通常需要请小程序开发公司,而且需要每年给多少钱(通常几百到几千)。但随着微信越来越完善,现在无需找小程序服务商搭建,无需懂代码、源码、编程,即可一键生成属于自己的小程序。 那就是微信官方...现在小程序非常流行,很多人都想制作一个自己的小程序来卖货。以前制作小程序通常需要请小程序开发公司,而且需要每年给多少钱(通常几百到几千)。但随着微信越来越完善,现在无需找小程序服务商搭建,无需懂代码、源码、编程,即可一键生成属于自己的小程序。
那就是微信官方免费提供的小程序:微信小商店,任何人(个人/个体户/公司/组织)都可以免费申请。下面为大家具体介绍自助开通小程序的步骤:
- 手机微信搜索:小商店助手。进入小程序后,点击免费开店。
- 选择小商店类型。如果没有营业执照,可以选择个人。这证明个人可以开通小程序卖货,现在确实是一个人人卖货的时代。
3.开店成功。至此小程序已经一键生成了,接下来完善一下开店信息。
4.完善经营者信息。需要上传经营者身份信息,然后提交审核。
- 微信审核通过后,点击签约开张。注意:虽然免费开通了小程序,但是微信还是会收取交易手续费。目前费率是千分之六,也就是一千元交易额微信会收取六元钱手续费。
6.上传商品。进入小商店首页,点击去发布商品。
- 添加更多功能。可以电脑登录小商店服务市场,选择对应的服务来给小程序设置装修、会员、订单打印发货等功能。如小程序对接小票、标签、发货单、电子面单打印机,小程序对接快递物流或者同城配送等第三方外卖平台,可以选择订单管家_订单自动打印发货服务。
好了,以上就是介绍,希望可以帮助到您。人人卖货时代,祝福大家都能够卖出好业绩!
-
微信小程序修改制作生成头像——校庆头像制作小程序
2018-11-06 16:59:46给头像加边框——校庆头像制作的小程序 ——分享改变世界,感谢成长路上遇见的分享 话不多说先上图(满意客官再往下看): 首页 选择头像框 制作界面 ...给头像加边框——校庆头像制作的小程序
——分享改变世界,感谢成长路上遇见的分享
话不多说先上图(满意客官再往下看):
首页 选择头像框 制作界面 用户选择图像 用户裁剪选择的图像 生成并保存头像到手机 效果图 扫码体验 话不多说先上代码:
<!--index.wxml--> <!--制作头像首页(类似一个海报)--> <view class="container"> <!-- 卡片样式(个人感觉有利于大小不同的手机看海报,并不是响应式) --> <view class="card_wrap"> <view class="card_item card1 "> <!-- 给海报顶部一个小蛋糕 --> <span class="change_icon"> <image src="/images/dangao.png"></image> </span> <!-- 海报文字 --> <view class="card_info"> <blockquote class="card_info_mes_title">90岁生日快乐!</blockquote> <span class="card_info_mes_item" style="margin-top: 15px;">薪火相传,弦歌不辍</span> <span class="card_info_mes_item">桃李不言,下自成蹊</span> <span class="card_info_mes_item">十月二十日,我们在AHAU等你</span> </view> <!-- 底部的跳转选择头像框button --> <view class="btn-cta buy_btn" id="1" bindtap="toselect">一起换头像吧!</view> <!-- 海报的整个background-image --> <image src="/images/xianhua1.jpg"></image> <!-- 底部小广告 --> <view class="footer">出品人:AAU 技术支持:信计院16网络M</view> </view> </view> </view> <!--author:马小帅.-->
算了,不是很复杂,直接上项目:
SchoolBirthdayPhoto项目_Github地址——下载本地直接跑吧
实用简单的一个微信小程序,给需要的人。如果你觉得好就赞一个,不好的话,我会慢慢变好的。
如果有什么能改变代码的世界,我想那肯定是分享。 ——侵删,本人qq:2928423192(啥都可联系,博客登的少)
-
【小程序】一步一步制作小程序·UI篇(1)
2019-03-13 11:02:28作者目前也是初步接触小程序,完成的小程序也是根据自己的兴趣而来,可能在某些方面实用性会不是很强。 本UI主要是使用的ColorUI组件库。 目录 作品展示 准备工作 明确要做什么 作品展示: 啊,不知道...前言
作者目前也是初步接触小程序,完成的小程序也是根据自己的兴趣而来,可能在某些方面实用性会不是很强。
本UI主要是使用的ColorUI组件库。
目录
作品展示
准备工作
明确要做什么
作品展示:
啊,不知道为什么CSDN上传不了GIF图???一直告诉我文件类型错误。
算了,想看的朋友去Github看吧,
准备工作
这次的小程序是根据ColorUI组件库来完成的。所以我们需要先去了解如何使用目前开源的组件库。
以ColorUI为例:
ColorUI的地址:https://www.color-ui.com/
ColorUI 的 GitHub地址:https://github.com/weilanwl/ColorUI
下载完成后,解压获得多个文件:
将这两个文件复制到自己新建的小程序文件夹下。
这时就可以看到自己项目下已经有了这两个文件。
准备工作完成了。
为了知道ColorUI都有哪些组件,可以将demo导入到开发者工具中看看,看看作者是怎么做的,自己想要做的基本就是个搭积木,看看作者哪个组件做得好,自己也想使用,就粘贴复制过来,改改代码就行。
当然作者做的不容易,我们嘛,有钱的捧个钱场,没钱的捧个人场就行。
这是作者的demo:
可以看到基本我们需要的已经齐活了,接下来就是知道自己要做什么,大概有个规划,然后搭积木就行。
这个最重要的还是自己有想法,自己有设计感,要不就成我这种比较朴素的了。
明确要做什么
这是开发中最重要的了,我自认为。
毕竟知道自己要做什么,才好下菜。
初步的规划是做一个即时记录生活的工具。比如说,微信群里XX说 几号几号有什么活动来着。那我就可以立马记下来,微信是一个大家都使用比较频繁的工具,布置任务也多在微信上,那使用起来也就比较顺手。
目前的版本还是比较新的,像是定时,定时提醒这样的功能暂时还没有完成,还请期待后续更新。
那要做这样的一个程序,要具备的功能就是:
1.要能记录。
2.记录要能够添加标签。方便分类和查看。
3.记录可以更换背景,使用户不会感觉太过单调。
4.可以更换字体颜色。
5.可以分享和保存。便于小程序的推广。
6.小程序里可以展示其他活动,(这个只是暂时考虑,后续可能会去掉)
7.登录授权,可以将内容长久保留下来。
8.个人信息的管理。
9.个人签名可以选择是否附加到每次的日记后方。
目前主要就是这几个功能,后续会逐渐完善。
这个Diary的源码我已经上传到Github上:https://github.com/XCBYXS/XCX_Diary
不太方便的话,在我的公众号里回复“Diary”也能获取。
不过我的公号基本没啥文章就是了:
-
教程 | 校徽头像制作小程序前端实现
2018-07-15 14:59:42之前公众号推过一个校徽头像制作的工具类小程序,通过图片叠加的技术,实现头像与校徽图片的叠加,并生成新的头像图片,今天首先教大家制作小程序前台界面。 1、创建工程 打开微信开发者工具,新建一个工程,输入... -
使用微信开发者工具制作小程序的基本方法
2020-03-30 15:59:34微信开发者工具很好的集成了java的开发环境,是java初学者很好的练手软件。准备条件:注册微信小程序开发者账号,需要用到微信账号。 网址:https:... -
如何制作微信小程序(三个步骤开发小程序)
2021-12-18 11:56:05如何制作微信小程序(三个步骤开发小程序) 如何制作微信小程序?今天教大家只要三个步骤就可以制作出一个简单的小程序。 第一步,就是注册小程序的账号。首先,进入公众平台,点击立即注册,选择小程序。按照页面... -
微信小程序怎么制作自己的程序?怎样在微信上做小程序?
2022-01-19 16:32:29如今,由于小程序受欢迎度高,许多企业都有开发微信小程序的想法,但是由于不了解技术,而望而却步,那么在这种情况下怎么制作微信小程序呢?下面有些相关流程 1、注册一个小程序账号 进入微信公众平台,... -
怎么能免费制作自己的微信小程序?
2021-07-17 15:56:20怎么能免费制作自己的微信小...一,如何免费制作小程序 可能有人会问,那么如果我想免费申请小程序可以吗?答案当然是OK的。以商业用途的小程序为例,接下来我给大家详细介绍一下免费申请小程序的方法: 1,注册 . -
制作微信下单小程序,微信小程序怎么创建
2021-06-18 16:43:41制作微信下单小程序,微信小程序怎么创建 微信小程序是腾讯最新出品的一种商城小程序,开通非常简单和便捷,无需任何费用,可以直接生成,还能直播带货。许多企业商家都想制作一个自己的小程序,怎样创建微信小... -
如何制作微信答题小程序(微信答题考试小程序开发制作功能介绍)
2021-11-16 12:06:16微信答题小程序能够支持在线答题,广泛应用与教育、培训、问卷、游戏等方面,那么企业如何制作微信答题小程序呢?下面请看微信答题小程序制作方案介绍。 1.企业可以通过第三方插件、定制开发、第三方微信答题小程序... -
如何免费制作小程序?
2019-04-20 13:04:45小程序工具丨你肯定没用过吧小程序工具丨你肯定没用过吧 想分享几个小程序工具平台,也分享一下可以用小程序流量主获得广告收入的小程序工具。 目前已知可以自动生成小程序的平台有很多,比如上线了,小鹅通,短书... -
魔力拍证件照制作小程序
2019-08-10 22:17:32这两年一直在研究微信小程序,也想在小程序上试试水,终于历时半年多,终于坚持下来做成了一个并成功上线了,自己先发上来让大伙看看,希望大家能多多关注,如果有需要可以输入 “敲码人” 优惠码。 目前的功能有 ... -
小程序怎么开发制作?四步教你搭建一套完整的小程序商城
2021-05-31 16:03:50对于那些不懂互联网、不了解小程序的小白、新手来讲,又如何制作小程序呢? 接下来,我们就分享下详细的教程: 一、小程序注册与认证 1、如果有已认证的服务号,可选择【复用公众号资质】快速注册认证小程序,首次可... -
手把手教你制作自己的小程序
2020-05-11 12:52:582、制作小程序。 3、上传并提交审核。 4、审核通过,小程序上线。 简单来讲即四步操作法: 注册----制作----审核----上线 下面分别进行讲解各个步骤 第一步:注册微信小程序 输入下面的网址,进入微信公众平台 ... -
证件照制作微信小程序源码
2021-08-12 10:08:09这是一款证件照制作的微信小程序,里面也支持直接微信公众号版本生成安装 支持多种尺寸制作 支持相册上传于直接相机拍摄 支持多种类型的证件制作如,职业证件,公务员证件,身份证等各种类型 支持电子照存档等等 ... -
手把手教你如何免费制作一款微信小程序?
2021-06-11 11:20:51现在不只是企业、商家,还有学生、个人,都想自己去制作一款小程序。有的说找熟人开发,有的找外包公司。其实,不需要找人开发,不需要懂技术,只要有一定的审美能力,都可以自己搭建出一款非常漂亮的小程序商城。 ... -
证件照制作(一寸二寸照片制作)微信小程序源码
2021-08-13 17:59:33这是一款证件照制作的微信小程序,里面也支持直接微信公众号版本生成安装 支持多种尺寸制作 支持相册上传于直接相机拍摄 支持多种类型的证件制作如,职业证件,公务员证件,身份证等各种类型 支持电子照存档等等 拥有小... -
从15款工具中精选出4款,最靠谱的微信小程序制作软件!
2021-01-13 05:34:11原标题:从15款工具中精选出4款,最靠谱的微信小程序制作软件! 大家好,我是你们亲爱的小龙老师,今天是周一,很开心又和大家见面了!今天带来的是大家很关心的,微信小程序制作软件的课程!微信小程序基础知识二:... -
微信小程序——简单静态网页的制作
2021-06-09 03:41:37要求:进入开发者工具并且创建一个测试小程序, 选择建立快速模板在pages目录底下新建一个first的文件夹,其中包括指定的四个文件,并且设置第一个页面为first页面3.在first.wxml里制作如图ui界面,采用盒模型以及... -
微信小程序云开发入门(摆脱后台自己实现后台数据)
2018-09-29 11:22:49微信小程序开发实战入门,学习小程序云开发,摆脱后台,自己实现后台数据,从此就可以愉快的写小程序,自己实现小程序后台了。 -
手把手教你制作微信小程序,开源、免费、快速搞定
2018-09-24 09:31:10最近做了个“罗孚传车”的小程序 一时兴起,做了一个小程序,将个人收集的同汽车相关的行业资讯和学习资料,分享到小程序中,既作为历史资料保存,又提供给更多的人学习和了解,还能装一下:) 扫描下方小程序码可以... -
报价单制作小程序
2019-07-04 12:03:50“街寻价目表”制作小程序,可以进行快速编辑商品图片,进行转发商品价目表与完成下单支付过程。可以关注街寻公众号试试。 -
这3个头像小程序,让你随时制作独特头像!
2019-06-21 15:24:50头像是我们在这叫软件上对外的一个形象,让自己的头像更加独特可以让其他人对你的第一印象更深哦,安利你3个头像小程序,独特头像随时制作! 1.微头像状态 微头像状态是一个关于头像的工具小程序,是一个让人看到... -
微信小程序的制作方法步骤和流程
2020-11-21 20:03:26小程序制作的公司很多,并不是每家公司都会制作出你心仪的小程序。这要考察,更要好好沟通。 3.确定好小程序制作文案资料 包括设计需求,功能项目,表格表单,广告语言,模板栏目,按钮,跳转链接,运行逻 -
同款视频一键制作生成微信小程序源码下载恶搞视频,特效视频,唯美视频等等
2021-12-11 17:40:17大家好给大家带来一款视频制作小程序 这款视频呢可以根据视频模板导入照片或者文字然后一键生成对应的视频 里面包含了N种模板,大家使用过剪映那些软件应该都熟悉吧 这个小程序就相当于里面的一键制作同款视频的... -
如何在微信小程序上制作炸金花?
2021-06-29 03:33:03今天小编就带大家来共同学习如何在微信小程序上制作炸金花?希望可以帮助到有需要的小伙伴哦,下面就是详细完整的操作步骤。 app.json:{"pages":["pages/index/index"],"window":{"navigationBarBackgroundColor": ... -
微信小程序制作-----日历记事本
2019-11-05 10:27:00因为某些原因吧,我接触到了微信小程序在这里将自己的一些理解和感悟写出来。 小程序介绍 小程序其实就是前端,后端你可以使用Java去完成,小程序的目录结构,页面可以当在一个pages的文件夹里面 然后注意... -
微信小程序绘制二维码
2021-09-23 21:39:48在日常的小程序项目中,会经常遇到需要动态绘制二维码的需求。使用场景很多,例如绘制在海报上,例如制作票务码、核销码等等。 这篇文章是应一位好友的需求而写的,也希望能够给有需要的同学一些帮助。 二、实现原理... -
如何自己搭建一个小程序(步骤详解)
2021-03-15 15:53:05微信小程序自2017年1月9日上线以来,极大的方便了人们的生活;也给很多商家提供了全新的推广、销售产品渠道。但是很多用户苦于不懂技术,想自己搭建又无从下手; 那应该如何创建一个属于自己的小程序?今天分享一下...