土鳖屋源码社区

 找回密码
 欢迎注册

QQ登录

只需一步,快速开始

03广告位出售中
广告出售中
广告位
联盟招募 收益最高
免费建网站 服务器特价
网维体微信营销平台
【多线高防】无视一切攻击!织梦模板
站长平台 精确提升SEO
21广告位高权重链接招租
微信抢红包源码云主机
国内/香港主机/试用免费
微信小程序微信营销项目
小程序
源码商城棋牌源码
查看: 17|回复: 0

A计划小程序的血与泪

[复制链接]
弗罗多 发表于 2018-11-8 17:11 | 显示全部楼层 |阅读模式

微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。

最近两周由于公司业务需求,本胖主导开发了一款功能简单的小程序—A计划(以下本次开发小程序的代号),可以说这两周本胖都是在浏览小程序官网以及小程序论坛,适应小程序的开发模式以及填开发过程中的大坑小。这里需要说一句,自己平时做demo和开发公司级别的正式项目永远都是两码事哈,本胖这次也是深有体会,很多之前做demo时候只是模棱两可的知识在这次开发中得到了深入认识,还有就是对小程序开放能力的深入理解,知道了小程序能做什么,小程序不能做什么,所以敬以此文记录本胖对小程序的认知,如有错误,烦请指出,谢谢。

1 小程序登录以及授权1.1 小程序登录

任何项目都会涉及到登录这个问题,在JSP的远古时代登录都是直接由服务端控制,在现在react,vue单页面时代,登录是有客户端控制,所以现在的很多前端框架都会有全路由守护这种东西,能很方便地帮助我们控制路由权限,那么在小程序里面的登录时怎么控制的呢?

小程序里面的登录主要分2种

A. 利用现有登录体系

直接复用现有系统的登录体系,只需要在小程序端设计用户名,密码/验证码输入页面,便可以简便的实现登录,只需要保持良好的用户体验即可。复制代码

B.利用OpenId

OpenId 是一个小程序对于一个用户的标识,利用这一点我们可以轻松的实现一套基于小程序的用户体系,值得一提的是这种用户体系对用户的打扰最低,可以实现静默登录。具体步骤如下:1.小程序客户端通过 wx.login 获取 code2.传递 code 向服务端,服务端拿到 code 调用微信登录凭证校验接口,微信服务器返回 openid 和会话密钥 session_key ,此时开发者服务端便可以利用 openid 生成用户入库,再向小程序客户端返回自定义登录态复制代码

这次由于需要获取用户手机号的,所以我们选择了第二种(注意了,个人主体的小程序号是获取不了用户手机号的)。但是这里需要强调的一点是登录和授权获取用户信息(比如手机号,头像,微信步数)是两回事情,不要搞混淆了,登录是可以做到静默登录的,但是很少有小程序只做一个登录的,那会是一个没有灵魂的小程序哈。

1.2 授权

这里不得不承认,微信是中国流量最大的app,所有小程序才有了生根萌芽的沃土,做小程序就不得不涉及到相关用户权限的授权。A计划小程序这次涉及到授权的地方主要是获取用户手机号,还记得那年夏天微信小程序获取手机号还是可以直接通过API方式直接弹出授权弹框的,这次发现竟然不行了,只好去官网看看改动了哪些(不得不说这也是小程序的不确定性,一家独大,想改就改),发现现在要获取用户手机号只能通过引导用户触发相应的按钮才行。

1.3 登录+授权解决方案

这次本胖采用的方案是专门用一个页面(login)来进行用户的登录以及授权,这里需要注意的是,你在取微信用户绑定的手机号,需先调用wx.login接口。

我们首先需要下面这个button组件用来引导用户触发登录

<button type="primary" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">微信登录</button>复制代码

然后需要在login页面的onload事件中发起wx.login(),获取对应的code存起来。 关键的一步到了,在用户点击确定授权的按钮,我们需要监听getPhoneNumber事件

getPhoneNumber(e) {    if (e.detail.iv) {      this.setData({        iv: e.detail.iv,        encryptedData: e.detail.encryptedData      });      this.login(this.getPhone);    }}复制代码

注意到上面最后一行的代码,是在获取到iv以及encryptedData这两个解密用户手机号必备的变量的时候才去发起登录以及获取对应的手机号前端显示用。

可以看到上面的微信登录按钮其实一开始是先做了一个获取用户手机号权限的操作,操作成功后才登录的,如果一开始就登录了,但是用户没有同意授权手机号,那么将变得毫无意义,因为手机号才是小程序需要快捷获取的核心用户信息之一。

登录完成后客户端可以获取到一个自定义token。类似于浏览器里面的JSSSESIONID,可以存小程序本地,在需要的时候手动带上就可以了,这一点比不了浏览器可以设置自动带上cookie那么方便。

2 生成海报

为什么很多小程序里面都会有生成海报呢,其实也是因为小程序不能直接转发到朋友圈,不能直接转发到QQ以及其他社交平台,那么就需要出现海报这个中间传播者。这次A计划小程序里面也有这个功能,于是本胖就愉快地开始了海报的填坑。

小程序的海报一般都是通过canvas生成的,也就是填小程序canvas的各种坑哈。

bodog



您需要登录后才可以回帖 登录 | 欢迎注册

本版积分规则

QQ|小黑屋|手机版|土鳖屋源码社区 ( 豫ICP备14000521号-2 )

GMT+8, 2019-1-23 13:34

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

豫公网安备 41088202000172号

快速回复 返回顶部 返回列表