|
導讀微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現(xiàn)了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用，也是一... 微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現(xiàn)了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用，也是一項門檻非常高的創(chuàng)新，經(jīng)過將近兩年的發(fā)展，已經(jīng)構造了新的小程序開發(fā)環(huán)境和開發(fā)者生態(tài)。 0.序玩陰陽師的肝帝們都知道，每天早上5點和下午6點會刷新兩次封印任務，每次做任務時最蛋疼的就是找各種怪物對應的副本以及神秘線索。 陰陽師提供了 網(wǎng)易精靈 可以進行一些數(shù)據(jù)查詢，但體驗實在太感人，所以大多數(shù)人選擇使用搜素引擎搜索怪物分布及神秘線索。 而每次使用搜索引擎查找又十分不方便，所以筆者決定寫一個查詢陰陽師妖怪分布的小程序，力求做到使用快捷體驗更快捷，把更多的時間留給狗糧和御魂。 恰好上周末有兩天時間，所以立馬開寫。 1.構思與設計 ( 3小時 )1.1 構思
1.2 設計 構思好后筆者就開始用筆者半吊子的 PS 水平設計了下草圖，大概是這個樣子：
嗯，最主要的首頁和詳情頁設計好就行，然后就可以開始具體考慮怎么做了！ 1.3 技術架構
到此，正式開發(fā)前的準備得當后，我們就可以開始正式開發(fā)了 2. API 服務開發(fā) ( 5小時 ) Django 的 API 服務開發(fā)筆者之前經(jīng)常做，所以有比較完整的解決方案，可以參考這里 django-simple-serializer 之所以花了 5 個小時是因為近 4 個小時在增加 django-simple-serializer 對 Django ManyToManyField 中 through 特性的支持。 簡而言之， through 特性就是可以使多對多關系的中間表增添一些額外的字段或屬性，例如: 怪物副本和怪物之間的多對多關系就需要增加一個儲存每個副本有多少只相應怪物數(shù)量的字段 count。 搞定 through 支持后 API 的構建就很快啦，主要有五個 API ：
寫好接口后添加一些 mock data 以供測試； 3. 前端開發(fā) ( 8小時 ) 前端花了最久的時間。 一方面筆者真的是個后端工程師，前端屬于半路出家，另一方面小程序有一些坑。 當然，最主要的是一直在調(diào)整界面效果，這里花了大量時間。 寫小程序的整體體驗筆者感覺就和寫 vue.js 一摸一樣，只不過一些 html 標簽沒辦法使用，而是需要按小程序官方提供的組件進行書寫， 這里有一點感受就是，小程序本身組件化的設計思路應該是借鑒了 React 而語法之類的應該是借鑒了 vue.js 。 最后前端開發(fā)完畢后主要分為這幾個頁面：
哎，丑媳婦早晚要見公婆，這里不得不放最后開發(fā)出來的界面圖了
對于微信小程序的入門及基礎，筆者就不在這里多講了，相信到現(xiàn)在對微信小程序有關注的開發(fā)者或多或少自己寫個簡單的 demo 肯定是沒問題的，我就主要講一講我在開發(fā)中遇到的坑： 3.1 background-image 屬性 在寫式神詳情頁的時候兩個地方需要用到 background-image 屬性設置背景圖，在微信開發(fā)者工具中一切顯示正常，但一到真機調(diào)試就沒有辦法顯示，最后發(fā)現(xiàn)小程序的 background-image 在真機不支持引用本地資源，解決方案有兩種：
正常來講，css 中的 background-image 就支持 base64 ，這種方案相當于把圖片直接用 base64 編碼成一段 base64 碼進行儲存，在使用時這樣使用即可： [CSS] 純文本查看 復制代碼 background-image: url(data:image/image-format;base64,XXXX); image-format 為圖片本身的格式，而 xxxx 就是圖片經(jīng)過 base64 后得到的編碼。這種方式其實是一種變相引用本地資源的方式，好處在于可以減少請求圖片的次數(shù)，而缺點則是會增大 css 文件并使其不是那么好看。 最后筆者選擇第二種方式主要還是考慮到圖片的大小以及 wxss 的增大在可接受范圍內(nèi)。 3.2 template 小程序支持模版，但要注意模板擁有自己的作用域，只能使用data傳入的數(shù)據(jù)。 另外，在傳入數(shù)據(jù)時需要將相關數(shù)據(jù)解構傳入，在模版內(nèi)部是直接以 {{ xxxx }} 的形式進行訪問，而不是像在循環(huán)中 {{ item.xxx }} 這種訪問形式； 關于解構： [XML] 純文本查看 復制代碼 <template is="xxx" data="{{...object}}"/>三個 . 就是解構操作； 一般 template 都會放在 單獨的 template 文件中讓其他文件進行調(diào)用，而不會直接寫在正常的 wxml 中。 比如筆者目錄大概是這樣的： [JavaScript] 純文本查看 復制代碼 ├── app.js ├── app.json ├── app.wxss ├── pages │ ├── feedback │ ├── index │ ├── my │ ├── onmyoji │ ├── statement │ └── template │ ├── template.js │ ├── template.json │ ├── template.wxml │ └── template.wxss ├── static └── utils 關于其他文件調(diào)用 template，直接使用 import 即可： [XML] 純文本查看 復制代碼 <import src="../template/template.wxml" /> 然后在需要引用模版的地方： [XML] 純文本查看 復制代碼 <template is="xxx" data="{{...object}}"/>
<!--is 后填寫模版名稱-->這里遇到另一個問題，template 對應的樣式寫在 template 對應的 wxss 中并沒有作用，需要寫在調(diào)用 template 的文件的 wxss 中，比如 index 需要使用 template 則需要將對應的 css 寫在 my/my.wxss 中。 4. 爬取圖片資源 ( 2小時 ) 式神的圖標及形象圖基本上陰陽師官網(wǎng)都有，這里自己做也不現(xiàn)實，所以果斷寫爬蟲爬下來然后存到自己的 cdn 。 大圖和小圖都在 http://yys.163.com/shishen/index.html 這里可以找到。 一開始考慮爬取網(wǎng)頁然后 beautiful soup 提取數(shù)據(jù)，后面發(fā)現(xiàn)式神數(shù)據(jù)竟然是異步加載的，那就更簡單了，分析網(wǎng)頁得到 https://g37simulator.webapp.163.com/get_heroid_list 直接返回了式神信息的 json 信息，所以很容易寫個爬蟲就可以搞定了： [Python] 純文本查看 復制代碼 # coding: utf-8
import json
import requests
import urllib
from xpinyin import Pinyin
url = "https://g37simulator.webapp.163.com/get_heroid_list?callback=jQuery11130959811888616583_1487429691764&rarity=0&page=1&per_page=200&_=1487429691765"
result = requests.get(url).content.replace('jQuery11130959811888616583_1487429691764(', '').replace(')', '')
json_data = json.loads(result)
hellspawn_list = json_data['data']
p = Pinyin()
for k, v in hellspawn_list.iteritems():
file_name = p.get_pinyin(v.get('name'), '')
print 'id: {0} name: {1}'.format(k, v.get('name'))
big_url = "https://yys.res.netease.com/pc/zt/20161108171335/data/shishen_big/{0}.png".format(k)
urllib.urlretrieve(big_url, filename='big/{0}@big.png'.format(file_name))
avatar_url = "https://yys.res.netease.com/pc/gw/20160929201016/data/shishen/{0}.png".format(k)
urllib.urlretrieve(avatar_url, filename='icon/{0}@icon.png'.format(file_name))然而，爬完數(shù)據(jù)后發(fā)現(xiàn)一個問題，網(wǎng)易官方的圖片都是無碼高清大圖，對于筆者這種窮 ds 大圖放在 cdn 上兩天就得破產(chǎn)，所以需要批量將圖片轉成既不太大又能看的過去。嗯，這里就可以用到 ps 的批處理能力了。
等批處理結束，期間刷個御魂啥的應該就好了，然后將得到的所有圖片上傳到靜態(tài)資源服務器，圖片這里就處理完啦。 5. 式神數(shù)據(jù)爬取 ( 4小時 ) 式神分布數(shù)據(jù)網(wǎng)上比較雜并且數(shù)據(jù)很多有偏差，所以斟酌再三決定采用半人工半自動的方式，爬到的數(shù)據(jù)輸出為 json： [JavaScript] {
"scene_name": "探索第一章",
"team_list": [{
"name": "天邪鬼綠1",
"index": 1,
"monsters": [{
"name": "天邪鬼綠",
"count": 1
},{
"name": "提燈小僧",
"count": 2
}]
},{
"name": "天邪鬼綠2",
"index": 2,
"monsters": [{
"name": "天邪鬼綠",
"count": 1
},{
"name": "提燈小僧",
"count": 2
}]
},{
"name": "提燈小僧1",
"index": 3,
"monsters": [{
"name": "天邪鬼綠",
"count": 2
},{
"name": "提燈小僧",
"count": 1
}]
},{
"name": "提燈小僧2",
"index": 4,
"monsters": [{
"name": "燈籠鬼",
"count": 2
},{
"name": "提燈小僧",
"count": 1
}]
},{
"name": "首領",
"index": 5,
"monsters": [{
"name": "九命貓",
"count": 3
}]
}]
}然后再人工檢查一遍，當然還是會有遺漏，所以數(shù)據(jù)報錯的功能就很重要啦。 這一部分實際寫代碼的時間可能只有半個多小時，剩下時間一直在檢查數(shù)據(jù)； 一切檢查結束后寫個腳本直接將 json 導入到數(shù)據(jù)庫中，檢查無誤后用 fabric 發(fā)布到線上服務器進行測試； 6. 測試 ( 2小時 ) 最后一步基本上就是在手機上體驗查錯，修改一些效果，關閉調(diào)試模式準備提交審核； 此時已經(jīng)是周日，哦，不對，應該是周一早上一點鐘了：
不得不說，小程序團隊審核速度很快啊，周一下午就審核通過了，然后果斷上線。 最后放效果圖：
以上就是24小時開發(fā)陰陽師小程序的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！ 小程序是一種不需要下載安裝即可使用的應用，它實現(xiàn)了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個人學習測試使用，請在下載后24小時內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網(wǎng)絡資源,如侵犯到您的權益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風下載站
