WeChat mini-app LOL hero introduction development instance, mini-app lol

Mini-app LOL hero introduces development instances, mini-app lol

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)

3. write code

My project structure is as follows:

Directory explanation: the pages folder contains all the pages involved in your applet. put the image in the image folder. app. json is the entry configuration file of a small program. Some global settings are in this file.

We can see that the detail directory contains four files:

(1) detail. js is the file processed by js on the page detail. wxml.

(2) detail. json is the configuration file of detail. wxml. For example, we can set the title of the navigation bar.

(3) detail. wxml is the page that the applet asks for to display, the shelf of the UI.

(4) detail. wxss is a detail. wxml Style File, similar to a css file.

3.1 next let's take a look at the app. json file:

{"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),<br>　　　　 name:'Ricky',<br>　　　　 items:[{"id":1,"name":"name1"},{"id":2,"name":"name2"}]  },  onLoad:function () {    this.setData({      hero:heros.getInfoById(app.globalData.userId)    })  },<br>　　tapName:function(event){<br>　　　　console.log(event)<br>　　}})

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

<View id = "tapTest" data-hi = "MINA" bindtap = "tapName"> Click me! </View>

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

<View wx: for = "{items}" class = "listView" bindtap = "showDetail" data-idIndex = "{index + 1 }}"> <br> <view> {{item. name }}</view> <view >{{ item. id }}</view> <br> </view>

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.

For more small program API information, please refer to the official website: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html? T = 1475052046827

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

 

 

 

Thank you for your reading and hope to help you. Thank you for your support for this site!