创意电子

标题: 开发小程序半年了，我写了一个小程序常用开发库 [打印本页]

作者: vito 时间: 2019-12-20 11:29
标题: 开发小程序半年了，我写了一个小程序常用开发库

之前一直在做vue、react开发，年初，因工作需要，学习开发微信小程序，总体下来还是很好学的，只是微信的坑比较多，时不时的要填坑（这里并不是诋毁微信），相信有很多开发者也会和我有同样的想法。

我来介绍一下写的一个小程序常用开发库，已经全面开源发布，目前仅有8个常用功能：
项目地址：
giehub:
https://github.com/yancekang/wechat-plug

gitee:
https://gitee.com/yangon/wechat-plug

小程序分享海报
身份证拍摄取景框
时间线
获取当前详细地址
城市选择
日期选择
页面自定义导航左边按钮
订单操作

小程序分享海报

使用场景：用户分享生成海报，海报中包含用户信息的小程序码，这里的小程序码是根据用户动态生成。
实现过程：首先将海报上固定的信息可以完全设计到图片上，只需要将动态变化的信息由前端去生成，如果生成的元素过多，会使整个生成海报的时间变长，
我们模拟海报上动态变化的信息只有用户昵称和小程序码，这样我们只需一张海报底图、昵称和小程序码。
通过canvas画布将这三个素材组合到一起，这里注意的一点是涉及到图片的需要利用wx.downloadFile先将图片缓存到本地
详细代码：
https://github.com/yancekang/wechat-plug/blob/master/pages/unit/poster/poster.js
身份证拍摄取景框

使用场景：图片识别，证件识别等
主要是利用camera组件，添加蒙层实现取景框效果（这里就不放效果图了）。
时间线

时间线主要是css样式，这里不做介绍。
获取定位详细地址

我们通过微信的接口获取到的定位信息只有经纬度，给人的感觉不是很直观，这里就需要将经纬度转换为中文地址，因此需要利用第三方接口，我这里使用的是腾讯的地理位置信息服务，首先获取到经纬度，通过经纬度换取具体的中文信息。
wx.getLocation({ success: function(res) { console.log(res) that.setData({location: res}) qqmapsdk.reverseGeocoder({ location: { latitude: res.latitude, longitude: res.longitude }, success: function (location) { console.log(location) that.setData({ location_city: location.result.address }) }, fail: function (error) { } }) },})具体效果请移步到微信小程序体验。也请感兴趣的码友点个赞。

作者: gyzgdq 时间: 2019-12-20 11:51
#程序员干货站#

作者: A随行付POS机_赵 时间: 2019-12-20 12:15
接活吗

欢迎光临创意电子 (https://wxcydz.cc/)