Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this "WeChat Mini Programs front-end source code analysis" article, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article, let's take a look at this "WeChat Mini Programs front-end source code analysis" article.

Basic structure of the file:

First take a look at the entry app.js,app (obj) to register for a Mini Program. Accept an object parameter that specifies the life cycle function of Mini Program, and so on. Other files can get the app instance through the global method getApp (), and then directly call its properties or methods, such as (getApp () .globalData)

/ / app.jsApp ({onLaunch: function () {/ / call API to get 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 login 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}})

I understand that app.js initializes files for portals and is also a place to provide global API extensions. Here are some of the methods and properties that come with it.

The onLaunch hook function is executed automatically after Mini Program initialization is completed, and then if you don't actively call onLaunch during the Mini Program life cycle, it won't be executed again.

Var logs= wx.getStorageSync ('logs') | | [] gets the logs attribute in the local cache. If the value is empty, setting logs= [] is similar to localStorage in HTML5.

Logs.unshift (Date.now ()) the current login time is added to the array

Wx.setStorageSync ('logs', logs) stores the data in the local cache. Because wx is a global object, you can directly call wx.getStorageSync (' logs') in other files to get the locally cached data

The getUserInfo function, as its name implies, is to obtain login user information, which means that this function provides an interface to obtain user information. Other pages will not be executed if you do not call it. Other pages call this method through getApp (). GetUserInfo (function (userinfo) {console.log (userinfo);}) to get user information.

GetUserInfo:function (cb) {/ / parameter is cb, type is function var that = this if (this.globalData.userInfo) {/ / user information is not empty typeof cb = = "function" & & cb (this.globalData.userInfo) / / if the type of parameter cb is a function, execute cb to get user information;} else {/ / if the user information is empty, that is, if getUserInfo is called for the first time, the user login interface will be called. Wx.login ({success: function () {wx.getUserInfo ({success: function (res) {console.log (res) that.globalData.userInfo = res.userInfo//) assigns user information to globalData. If you call the getUserInfo function again, you do not need to call the login interface typeof cb = = "function" & & cb (that.globalData.userInfo) / / if the parameter cb type is a function Execute cb to get user information}})}}

The globalData object is used to store global data, calling the

Then briefly analyze the app.json file, which is used to configure WeChat Mini Programs globally, determine the path of the page file, window performance, set network timeout, set multi-tab, etc.

The most important is the pages attribute, required, for the array, the elements in the array for the string file path, specify which pages Mini Program consists of, the first item must be the initial page of Mini Program.

{"pages": ["pages/index/index", "pages/logs/logs"], "window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "# fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black"}}

Then take a look at the project index and logs folders. WeChat Mini Programs's initial project put the relevant js, wxss and wxml of each page in its own file, so that the structure looks much clearer.

Let's take a look at the index folder, the initial page of Mini Program. Under the index folder are three small files: index.js, index.wxml and index.wxss. Mini Program separates the js, css and html code and puts them in separate files, each doing its own job. The js and stylesheet file names must be consistent with the wxml file names of the current folder to ensure that the effects of js and stylesheets are visible on the page. I appreciate this design concept, uniform, clear responsibilities, reduce the complexity of code design.

Index.wxml, this is the common template file, data-driven, there has been front-end mvc, mvvm project development is no stranger to this, after all, this is based on react development.

/ / View container / / bindtap binds the click-and-touch event for the container and triggers the bindViewTap event handler when the touch leaves. BindViewTap sets the variable to add / / curly braces through index.js page () to parse the data object of index.js into the corresponding value, and it is real-time {{userInfo.nickName}} {{motto}}.

Index.js, which is almost the same as reaact, is used in a different way. Page () to register a page. Accept an OBJECT parameter that specifies the initial data of the page, lifecycle functions, event handlers, and so on.

Var app = getApp () / / get the application instance Page of the entry file app ({data: {motto: 'Hello World', userInfo: {}}, / / Custom event handler function Click .userinfo to easily trigger this function bindViewTap: function () {wx.navigateTo ({/ / Global object wx's jump page method url:'.. / logs/logs'})}, onLoad: function () {/ / when the page is loaded Automatically trigger the lifecycle function console.log ('onLoad') var that = this / / call the method of the application instance to obtain global data app.getUserInfo (function (userInfo) {/ / update data, page automatically render that.setData ({userInfo:userInfo})}})

The index.wxss file renders only the page to which it currently belongs, overwriting the same global app.wxss style.

Then analyze the logs log folder. Under the logs folder are logs.wxml, logs.js, logs.wxss and logs.json. In the same way, the rendering of the effect can only be completed by ensuring the same name.

Logs.wxml file

/ / the function of block container has no other practical meaning. Wx:for function: traversing the logs array, the block block will be copied as many times as it is traversed, and for-item is equivalent to

Traversing the element gives a variable name for easy reference.

{{index + 1}}. {{log}}

Logs.js file

/ / logs.jsvar util = require ('.. /.. / utils/util.js') / / util.js is equivalent to a function library We can customize the extension and encapsulation of some common functions and methods Page ({data: {logs: []}) in this file. OnLoad: function () {this.setData ({logs: (wx.getStorageSync ('logs') | | []) .map (function (log) {/ / obtain locally cached logs log data via wx.getStorageSync return util.formatTime (new Date (log)) / / date format})

Logs.json file

{"navigationBarTitleText": "View startup log" / / current page configuration file, set the navigation bar title at the top of the window current page and other related content} the above is about the "WeChat Mini Programs front-end source code analysis" of this article, I believe we all have a certain understanding, I hope the content shared by the editor will be helpful to you, if you want to know more related knowledge content, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.