vito 发表于 2019-12-20 11:29:35

开发小程序半年了,我写了一个小程序常用开发库

http://p3.pstatp.com/large/dfic-imagehandler/173fa684-e2a1-4ec9-93c8-36275ea46d07

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


http://p3.pstatp.com/large/pgc-image/8a84c6dbd4e74379bab0b9d6691920e6

我来介绍一下写的一个小程序常用开发库,已经全面开源发布,目前仅有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:03

#程序员干货站#

A随行付POS机_赵 发表于 2019-12-20 12:15:39

接活吗
页: [1]
查看完整版本: 开发小程序半年了,我写了一个小程序常用开发库