kingdex
1.0.0
The inspiration comes from this year's popular mobile game - Honor of Kings. Occasionally it is not very convenient to use the mobile phone to search for game data online, so I came up with the idea of developing the "King of Kings Illustrated Book" applet. Crawl data from the official website, integrate heroes, equipment, inscriptions and other information into the WeChat applet, and query game information anytime and anywhere.
Scan the mini program code below on WeChat to experience it immediately:
First, click Fork or the green button Clone or download in the upper right corner to download the source code, and use WeChat developer tools for debugging and development. WeChat also provides mini program development documents, providing a complete set of solutions from mini program registration, development tools, development and debugging to release, creating its own ecosystem similar to Apple.
The project has a total of 9 pages, involving list display, hero details, equipment classification, inscription condition filtering and other functions. Since the storage service of leancloud is used in the background, the ajax api of the mini program is not used, and leancloud is introduced. The sdk needs to rely on a file named leancloud.config.js , which is placed in the utils folder. Since third-party services such as leancloud are usually paid flexibly, and the King's Illustrated Book has been officially released on WeChat, I pushed the code leancloud.config.js was ignored, please understand.
leancloud.config.js contains the AppID and AppKey information of the leancloud application:
module . exports = {
appId : '你的AppID' ,
appKey : '你的AppKey'
} Before using the project, you need to create your own leancloud application and build王者荣耀官网爬虫I wrote before to obtain data. They both require the leancloud.config.js file.
Let’s briefly talk about the development of WeChat mini programs. There was a lot of buzz on the Internet for a while, and then I took the time to look at the development documents. Damn it, isn’t this Vue.js? ! Just look at the example below.
Mini program:
Page ( {
data : {
list : [ ]
} ,
onload : function ( ) {
this . setData ( {
list : [ 1 , 2 , 3 ]
} )
}
} ) < view wx:for =" {{ list }} " > {{ item }} </ view >Vue.js:
new Vue ( {
data : {
list : [ ]
} ,
mounted : function ( ) {
this . list = [ 1 , 2 , 3 ]
}
} ) < view v-for =" item in list " > {{ item }} </ view >Although the APIs look similar, there are still obvious differences:
wx:for="item in list" an error will be reported.The applet has two threads, corresponding to two independent modules: View (view) and AppService (logic). View is used to render templates and styles, and AppService is used to handle business logic, data requests, API calls, etc. Interested students can refer to: "Analysis of WeChat Mini Program Architecture". In addition, the Minion Food Delivery Team’s mini program articles are also good.
Speaking of "King's Illustrated Book", this is my first small program. For experienced front-end users, you can get started in one day by following the official documentation. Compared with coding, it was a challenge for me to complete the prototype UI design of the entire product. In terms of layout, color matching, and interaction, I referenced many products in more than ten days and gained a deeper understanding of the design. I still have the final result. Quite satisfactory.
The open source code of this project is for learning reference only and commercial use is prohibited.
GPL
