WeChat mini-app development LOL hero instance code

This article mainly introduces the development materials of mini-app LOL heroes. For more information, see this article, for more information, see

Recently, the small program is hot, just like the price in Chengdu. I tried it yesterday and made a list of my heroes. today, I recorded my production process here.

1. download developer tools

Official website link: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html? T = 1475052055364. you can install it by default after the download is complete.

2. create a project

Open the developer tool (scan the code to log on for the first time), as shown in, click Add project, enter APPID, project name, and select the Directory (local directory) where your project is located ), if you do not have an AppID, select no APPID (some functions are limited)

{"Pages": ["pages/index", "pages/logs", "pages/detail", "pages/notice ", "pages/noticedetail"], "window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "# fff", "navigationBarTitleText": "hero role ", "navigationBarTextStyle": "black", "backgroundColor": "# fbf9fe"}, "tabBar": {"color": "#333", "selectedColor ": "# 3cc51f", "borderStyle": "# cccccc", "backgroundColor": "# ffffff", "list": [{"pagePath ": "pages/index", "text": "Hero list", "iconPath": "image/list_normal.png", "selectedIconPath": "image/list.png "}, {"pagePath": "pages/notice", "text": "Version Announcement", "iconPath": "image/hot_normal.png", "selectedIconPath ": "image/hot.png"}]}

Pages is the page that the entire applet needs to register. Note that you do not need to specify the file suffix, and we do not need to bitwise a page to reference the specified wxss, js, and json files. the applet automatically matches the related filename. wxml, filename. wxss, filename. js, filename. json file, so we must keep the file names consistent when naming these files.

Windows provides some settings for the applet navigation bar, such as the navigation title and color.

TabBar is the navigation button at the bottom of the applet. you can set multiple buttons as needed and specify the corresponding path and name.

3.2 app. js file

App. js contains some global functions and global variables.

// App. jsApp ({onLaunch: function () {// call the API to obtain data from the local cache var logs = wx. getStorageSync ('logs') | [] logs. unshift (Date. now () wx. setStorageSync ('logs', logs)}, getUserInfo: function (cb) {var that = this if (this. globalData. userInfo) {typeof cb = "function" & cb (this. globalData. userInfo)} else {// call the logon interface wx. login ({success: function () {wx. getUserInfo ({success: function (res) {that. globalData. userInfo = res. userInfo typeof cb = "function" & cb (that. globalData. userInfo) }}) }}, globalData: {userInfo: null, userId: null }})

Some global variables are put in the globalData object. for example, we need to use this to transmit parameters across pages.

To operate this global variable on another page, perform the following operations:

Var app = getApp ();

App. globalData. userId = "12"

In this way, you can operate global variables.

　3.3 Data binding

The data binding in the applet is similar to angular and vue. the double curly braces are used. the variables are included in the curly braces. in the wxml file, for example, {name}, setting the variable name value must be in the corresponding detail. set in the js file.

Page({  data: {    hero:heros.getInfoById(app.globalData.userId),
　　　　 name:'Ricky',
　　　　 items:[{"id":1,"name":"name1"},{"id":2,"name":"name2"}]  },  onLoad:function () {    this.setData({      hero:heros.getInfoById(app.globalData.userId)    })  },
　　tapName:function(event){
　　　　console.log(event)
　　}})

To dynamically set variables on a single page, use the this. setData ({}) method

　3.4 bind events

Bind + method name is used for event binding in wxml

Click me!

Custom attributes are in the form of data-attribute names. to access this custom attribute, you can obtain it through the event object in the tapName method.

3.5 List rendering

The list rendering in the applet adopts the wx: for = "{items}" method. every cycle of the items variable generates an item object. you can use the item. name gets the name attribute in each loop

　　 {Item. name }} {Item. id }}

3.6 Navigation

The page jump in the applet can be used:

wx.navigateTo({     url: '../detail/detail'   })

A maximum of five pages can be redirected.

Finally, let's take a look at my mini apps ~

The above is the detailed content of the LOL hero instance code developed by the applet. For more information, see other related articles in the first PHP community!