indent

微信小程序笔记

在前端学习方面,一直不太愿意去尝试过于新的东西。新的东西往往意味着功能不全面,要采坑填坑,学习成本较大。甚至经不起时间的考验,还没来得及应用就已经不能代表最先进的开发模式。特别是过去的五六年,前端发生了翻天覆地的变化,这就更需要我们有选择性的去学习,而不是冒然跟新。

但对于微信小程序,在过去的一年里的成长,大家是有目共睹的。不管是从官方更新节奏,还是社区活跃度,已经日趋成熟。甚至大部分的招聘岗位都不忘加上会小程序这一条。所以我觉得是时候应该来实践一下小程序了。

小程序的教程很多,下面我只是介绍下我在开发中的一些笔记。

mpvue

mpvue:http://mpvue.com

一套代码解决h5和小程序2个版本。

微信获取openid

客户端调用接口wx.login() 获取临时登录凭证code(有效期五分钟),将其发送给服务端(开发者服务器),服务端拿code跟微信服务器换取openid和 session_key 等信息;

自定义元素属性

自定义属性以’data-‘开始,可以通过事件对象e.target.dataset获取到自定义属性:
data-name属性,e.target.dataset.name获取;
data-userName属性,e.target.dataset.username获取;
data-user-name属性,e.target.dataset.userName获取。

weUi

weui.css :https://github.com/Tencent/weui

weui.wxss :https://github.com/Tencent/weui-wxss

weui.js版本 :https://www.npmjs.com/package/weui.js

动态生成小程序码

基本步骤:后端拿appid和秘钥跟微信服务器换取token,然后用token和小程序码的path等信息,调微信官方接口生成小程序码

小程序支持通过API接口生成二维码,一种有3中接口,接口也都很简单,传入要生成的path,width即可,可是弄了很久,已知返回null,最后查找资料发现,小程序的API并不是返回图片地址,而是直接返回了二进制文件。
解决办法(php):
通过file_put_contents将二进制图片存储到服务器。

图片长按发送好友

方法一:
wx.previewImage(Object object)
在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。如果不喜欢新页面的方式打开,就只能用第二种方法。

方法二:
内嵌网页web-view里的img图,长按用户可以进行保存图片、发送给朋友等操作。内嵌网页没有原生小程序页面流畅。

849890769@qq.com

Proudly published with Hexo