小程序分兩屏，首屏展示的是每個城市的油價、每日黃歷、分享功能、定位當(dāng)前城市功能；第二屏展示的是每日笑話。
完整效果可以搜索小程序：悟空仔油價
?
開發(fā)詳情：
1、首先介紹開發(fā)工具
（1）、開發(fā)小程序常用的有微信官方提供的工具 -- 微信開發(fā)者工具。
工具介紹鏈接：
?
（2）、白鷺科技推出的Egret Wing
?
小程序目錄
?
2、小程序Appid，每個小程序?qū)?yīng)一個appid，如果要開發(fā)上線的小程序，首先需要注冊一個小程序微信小程序 引用js，注冊地址：；如果只是練習(xí)小程序項目，可以使用測試appid
?
完成之后就可以愉快的開發(fā)小程序了
3、安裝小程序插件 Vant Weapp
本項目使用了小程序插件 Vant Weapp，項目地址：
#/
安裝插件的方法有詳細說明，步驟四 構(gòu)建 npm 包的時候如果提示沒有找到文件夾，首先先創(chuàng)建文件夾
?
4、城市列表獲取
全國城市的獲取，本來想用vant 提供的數(shù)據(jù)插件，結(jié)果引用失敗，沒辦法，直接新建了js文件，復(fù)制到了里面。
小伙伴可以嘗試下微信小程序 引用js，能不能引用成功：
#/area
?
?
5、獲取當(dāng)前登錄用戶的位置信息（使用微信的位置接口和騰訊地圖的小程序SDK）
第一步、使用微信提供的位置接口：wx.( )
?
獲取到當(dāng)前打開用戶的經(jīng)緯度信息
第二步、使用騰訊地圖的小程序SDK的(:)方法獲取城市信息
?
6、獲取今日油價、今日黃歷和笑話接口
采用了聚合數(shù)據(jù)的免費接口，只需注冊，就可以有每天100次的免費接口訪問權(quán)限
注冊地址：
?
笑話展示頁面使用了-view的組件
請求接口之前封裝了_get和_post方法
?
7、本來是想做文章資訊頁，但是文章資訊的小程序要有審核資質(zhì)，所以改成了笑話頁；
文章詳情頁的頁面還保留著，需要的小伙伴可參考下
?
開發(fā)不易，小程序源碼下載鏈接：