WeChat applet development LOL hero example code

This article mainly introduces the relevant information on the development of the WeChat mini program LOL hero introduction. Friends who need it can refer to it

The WeChat mini program has been very popular recently, just like the housing prices in Chengdu. Yesterday I I also tried it and made my own hero list. Today I will record my production process here.

　1. Download the WeChat Developer Tool

Official website link: https://mp .weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364, after the download is completed, it can be installed by default

　2. Create a new project

Open WeChat Developer Tools (you need to scan the WeChat QR code to log in for the first time), as shown in the figure below, click Add Project, then enter the APPID, project name, and select the directory where your project is located (local directory). If there is no AppID, select No APPID. (Some functions are limited)

                                                                                                                                                                                     

## Directory explanation: The pages folder contains all the pages involved in your mini program. The image folder stores images. app.json is the entry configuration file of a mini program. Some global settings are in this file.

We can see that there are four files in the detail directory:

(1) detail.js is the js involved in the detail.wxml page Processed files

(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 requested by the mini program to be displayed , UI shelf.

(4) detail.wxss is the style file of detail.wxml, similar to css file

　3.1 Next, let’s take a look at the app.json file:

{
 "pages":[
  "pages/index/index",
  "pages/logs/logs",
  "pages/detail/detail",
  "pages/notice/notice",
  "pages/noticedetail/noticedetail"
 ],
 "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "英雄角色",
  "navigationBarTextStyle":"black",
  "backgroundColor": "#fbf9fe"
 },
 "tabBar": {
  "color": "#333",
  "selectedColor": "#3cc51f",
  "borderStyle": "#cccccc",
  "backgroundColor": "#ffffff",
  "list": [{
   "pagePath": "pages/index/index",
   "text": "英雄列表",
   "iconPath": "image/list_normal.png",
   "selectedIconPath": "image/list.png"
  }, {
   "pagePath": "pages/notice/notice",
   "text": "版本公告",
   "iconPath": "image/hot_normal.png",
   "selectedIconPath": "image/hot.png"
  }]
 }
}

pages are the pages that need to be registered for the entire mini program. Note that there is no need to specify the file suffix, and we do not need to remove the bit. A page refers to the specified wxss, js, and json files. The applet will automatically match the related filename.wxml, filename.wxss, filename.js, and filename.json files, so we must keep the file names consistent when naming these files. .windows are some settings for the navigation bar of the mini program, such as navigation title, color, etc.

tabBar is the navigation button at the bottom of the mini program. You can set multiple buttons according to your own needs. , and specify the corresponding path and name.

　3.2 app.js file

app.js contains some global functions, global variables, etc.

//app.js
App({
 onLaunch: function () {
  //调用API从本地缓存中获取数据
  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{
   //调用登录接口
   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
 }
})

Put some global variables in the globalData object. For example, if we want to pass parameters across pages, we must use this.

If we want To operate this global variable on another page, you need to do the following:

var app=getApp();

app.globalData.userId="12"

This will do it Global variables are operated.

　

3.3 Data Binding

The data binding in the applet is similar to angular and vue, using the method of double curly braces, inside the curly braces That is, variables are in the shape of {{name}} in the detail.wxml file. Setting the value of the variable name needs to be set in the corresponding detail.js file.

Page({
  data: {
    hero:heros.getInfoById(app.globalData.userId),<br>　　　　 name:&#39;Ricky&#39;,<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 Binding events

wxml The event binding in uses bind+method name

Click me!

The custom attribute takes the form of data-attribute name. To get to this custom attribute, you can get it through the event object in the tapName method.

　3.5 List rendering

The list rendering in the applet uses the wx:for="{{items}}" method. Each time the items variable is looped, an item object will be generated, and each item can be obtained through item.name The name attribute in a loop

　{{item.name}}{{item.id}}

　3.6 Navigation

You can use the page jump in the applet:

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

Official regulations allow up to 5 pages to be redirected.

Finally, let me show you the screenshot of my mini program~

The above is the detailed content of WeChat applet development LOL hero example code. For more information, please follow other related articles on the PHP Chinese website!