天气微信小程序-DreamBird-微信天气小程序哪个好-微信小程序开发天气预报-即速应用

天气微信小程序-DreamBird-微信天气小程序哪个好-微信小程序开发天气预报

浏览量：1253 时间：2020-04-06 来源：levindandelion

1.
一直想开发一个简单的小程序，最近终于落实，从0-1还是要花些功夫的。
2.
先看看效果：
3.
一共三个页面，用到了和风天气api、微信小程序JavaScriptSDK获取城市列表以及定位当前城市、小程序云开发获取小程序码、
4.
之前在前端获取小程序码，返回的是arraybuffer，转base64后用FileSystemManager和canvas处理不理想，开发工具能显示，真机不显示。
5.
后来就在云函数里去请求数据，用云端cloud.uploadFile将小程序码存到云存储里，小程序端可用文件的fileId直接访问，省事多了。
//云函数入口文件constcloudrequire('wx-server-sdk');constrprequire('request-promise');//cloud.init({env:'test-xxxxx'});//cloud不指定env环境的话，均默认指向正式环境cloud.init();constdbcloud.database();//云函数入口函数exports.mainasync(event,context){const{OPENID}cloud.getWXContext();try{consttkawaitrp({url:'https://api.weixin.qq.com/cgi-bin/token?grant_typeclient_credential',qs:{appid:'xxxxxx',secret:'xxxxxx'//微信公众平台登录小程序开发账号里获取},json:true});constresultawaitrp({method:'POST',url:`https://api.weixin.qq.com/wxa/getwxacode?access_token${tk.access_token}`,//获取小程序码的接口有3种，可查小程序apibody:{path:`/pages/index/index`,auto_color:true},json:true,encoding:null//这个参数重要});constuploadawaitcloud.uploadFile({cloudPath:`codeImg/${OPENID}.png`,//codeImg/表示在云存储里增加了一个codeImg文件夹,并将图片存在该文件下面；可不要。fileContent:result,});returnupload.fileID;}catch(err){console.error(err)}}6.
不管在小程序端还是云端，初始化cloud如果不指定env环境，云函数、云数据库、云存储均默认指向正式环境，即使你在云开发上选了test环境也无用。
7.
第一个页面里调用云函数把用户数据存到了云数据库，云函数里可获取所有用户数据，创建的数据也不会默认加_openid字段，不受权限配置限制；小程序端直接操作数据库才会受权限配置限制，添加数据也会默认加上_openid
8.
第二个页面用户可拖拽排序城市，可用小程序movable-area组件或自己在元素上监听bindlongpress、bindtouchstart、bindtouchmove、bindtouchend去实现，不过要弄清楚event.currentTarget、event.changedTouches。频繁使用this.setData，拖拽可能会卡，可用防抖优化一下。
9.
第三个页面点击字母滚动到对应城市分类用小程序scroll-view。汉字转拼音用的hz2py_full.js大小30kb,简单好用，具体看这篇https://www.jianshu.com/p/8fac04d6441f
10.
问题：只实现了点击字母滚动到对应城市分类，在字母上滑动却无法实时滚动到对应分类，因为获取不到实时字母。（ps：用触点坐标去计算当前字母会不会不太精确？）有实现过的指教一下，谢谢！
11.
github