A计划小程序的血与泪
A计划只是一个代号,不代表任何小程序 微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。 最近两周由于公司业务需求,本胖主导开发了一款功能简单的小程序—A计划(以下本次开发小程序的代号),可以说这两周本胖都是在浏览小程序官网以及小程序论坛,适应小程序的开发模式以及填开发过程中的大坑小。这里需要说一句,自己平时做demo和开发公司级别的正式项目永远都是两码事哈,本胖这次也是深有体会,很多之前做demo时候只是模棱两可的知识在这次开发中得到了深入认识,还有就是对小程序开放能力的深入理解,知道了小程序能做什么,小程序不能做什么,所以敬以此文记录本胖对小程序的认知,如有错误,烦请指出,谢谢。 1 小程序登录以及授权1.1 小程序登录任何项目都会涉及到登录这个问题,在JSP的远古时代登录都是直接由服务端控制,在现在react,vue单页面时代,登录是有客户端控制,所以现在的很多前端框架都会有全路由守护这种东西,能很方便地帮助我们控制路由权限,那么在小程序里面的登录时怎么控制的呢? 小程序里面的登录主要分2种 A. 利用现有登录体系 直接复用现有系统的登录体系,只需要在小程序端设计用户名,密码/验证码输入页面,便可以简便的实现登录,只需要保持良好的用户体验即可。 复制代码 B.利用OpenId OpenId 是一个小程序对于一个用户的标识,利用这一点我们可以轻松的实现一套基于小程序的用户体系,值得一提的是这种用户体系对用户的打扰最低,可以实现静默登录。具体步骤如下:
1.小程序客户端通过 wx.login 获取 code
2.传递 code 向服务端,服务端拿到 code 调用微信登录凭证校验接口,微信服务器返回 openid 和会话密钥 session_key ,此时开发者服务端便可以利用 openid 生成用户入库,再向小程序客户端返回自定义登录态
复制代码
这次由于需要获取用户手机号的,所以我们选择了第二种(注意了,个人主体的小程序号是获取不了用户手机号的)。但是这里需要强调的一点是登录和授权获取用户信息(比如手机号,头像,微信步数)是两回事情,不要搞混淆了,登录是可以做到静默登录的,但是很少有小程序只做一个登录的,那会是一个没有灵魂的小程序哈。 1.2 授权这里不得不承认,微信是中国流量最大的app,所有小程序才有了生根萌芽的沃土,做小程序就不得不涉及到相关用户权限的授权。A计划小程序这次涉及到授权的地方主要是获取用户手机号,还记得那年夏天微信小程序获取手机号还是可以直接通过API方式直接弹出授权弹框的,这次发现竟然不行了,只好去官网看看改动了哪些(不得不说这也是小程序的不确定性,一家独大,想改就改),发现现在要获取用户手机号只能通过引导用户触发相应的按钮才行。 1.3 登录+授权解决方案这次本胖采用的方案是专门用一个页面(login)来进行用户的登录以及授权,这里需要注意的是,你在取微信用户绑定的手机号,需先调用wx.login接口。 我们首先需要下面这个button组件用来引导用户触发登录 <button type="primary" open-"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的各种坑哈。 2.1 实体机海报空白上图中就是在生成海报的时候出现的实体机空白问题,但是在模拟器里面却不会有,在查阅了很多资料以后发现是图片资源没能及时加载出来,就会造成在drawImg的时候没有真实的图片可以画,当然就是空白了。 既然是因为在画图的时候图片没有及时请求到造成的问题,那么解决的方案当然就是在页面初始化的时候就去异步请求图片 downloadFile(url,name) {
wx.downloadFile({
url: url,success: function (res) {
}
});
}
复制代码
2.2 背景图片自适应canvas是需要设置大小的,否则取他的默认大小。但是canvas的单位是px和小程序标准的单位rpx是不同的。所以我们需要动态给canvas区域设置宽高才能让canvas满满填充整个理想区域。 createNewImg: function (text) {
wx.createSelectorQuery().select('#canvas-container').boundingClientRect( (rect) => {
this.setData({
canvasW: rect.width,canvasH: rect.height
});
var width = this.data.canvasW,height = data.canvasH,context = wx.createCanvasContext('mycanvas');
context.drawImage(data.imgUrl1,0,width,height);
context.draw();
}).exec();
},复制代码
上面的代码就是用过获取不同屏幕下canvas的包裹元素的宽高然后动态给canvas赋值,然后对应图片的画图也是一个道理,就可以让图片只适应不同屏幕。 2.3 文字居中好了,画好了主图本胖就要在主图写字了,需求是写一段文字,字数不定,居中显示。 本胖一开始想当然了用了setTextAlign设置了文字的对齐方式,可是一看竟然没有说明用,于是本胖只好想算出所有文字的全部长度,用区域宽度减去文字的长度除以2设置文字的起始X坐标就可以了。 上面代码里面的measureText就是解决问题的核心API。
|