油价小程序开发 - 手把手教你写小程序(适合初学者)

2021-08-23  本文已影响0人  chenshuai

最近有空开了一个简单的油价小程序,分享给大家学习。(适合新手练手项目,大神们请多指教)

首先展示一下小程序


油价小程序预览_腾讯视频

 小程序分两屏,首屏展示的是每个城市的油价、每日黄历、分享功能、定位当前城市功能;第二屏展示的是每日笑话。

完整效果可以搜索小程序:悟空仔油价

开发详情:

 1、首先介绍开发工具

(1)、开发小程序常用的有微信官方提供的工具 -- 微信开发者工具。

工具介绍链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

(2)、白鹭科技推出的Egret Wing

http://developer.egret.com/cn/github/egret-docs/Wing/ui/index.html

小程序目录

2、小程序Appid,每个小程序对应一个appid,如果要开发上线的小程序,首先需要注册一个小程序,注册地址:https://mp.weixin.qq.com/wxopen/waregister?action=step1;如果只是练习小程序项目,可以使用测试appid

完成之后就可以愉快的开发小程序了

3、安装小程序插件 Vant Weapp

本项目使用了小程序插件 Vant Weapp,项目地址:

https://vant-contrib.gitee.io/vant-weapp/#/quickstart

安装插件的方法有详细说明,步骤四 构建 npm 包的时候如果提示没有找到文件夹,首先先创建文件夹miniprogram

4、城市列表获取

全国城市的获取,本来想用vant 提供的数据插件,结果引用失败,没办法,直接新建了js文件,复制到了里面。

小伙伴可以尝试下,能不能引用成功:

https://vant-contrib.gitee.io/vant-weapp/#/area

5、获取当前登录用户的位置信息(使用微信的位置接口和腾讯地图的小程序SDK)

https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

第一步、使用微信提供的位置接口:wx.getLocation(Object object)

https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html

获取到当前打开用户的经纬度信息

第二步、使用腾讯地图的小程序SDK的reverseGeocoder(options:Object)方法获取城市信息

https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodReverseGeocoder

6、获取今日油价、今日黄历和笑话接口

采用了聚合数据的免费接口,只需注册,就可以有每天100次的免费接口访问权限

注册地址:https://www.juhe.cn/

 笑话展示页面使用了scroll-view的组件

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

请求接口之前封装了_get和_post方法

7、本来是想做文章资讯页,但是文章资讯的小程序要有审核资质,所以改成了笑话页;

文章详情页的页面还保留着,需要的小伙伴可参考下

开发不易,小程序源码下载链接:

https://mp.weixin.qq.com/s/FrrZbXMVrUV45q_pu8uGQg

或者关注关注公众号:忧郁的悟空仔

上一篇下一篇

猜你喜欢

热点阅读