Shulou(Shulou.com)06/01 Report--

The editor of this article introduces in detail "case Analysis of WeChat Mini Programs Operation process". The content is detailed, the steps are clear, and the details are handled properly. I hope this "WeChat Mini Programs Operation process case Analysis" article can help you solve your doubts. Let's follow the editor's train of thought to slowly deepen, let's learn new knowledge.

one。 What is WeChat Mini Programs?

In fact, the essence is that (mixed) app is between web app and native native app, with rich interfaces to call various functions of mobile phones, as well as flexibility and cross-platform.

1. Operating environment difference

WeChat Mini Programs runs on three ends: iOS, Android and developer tools for debugging.

The script execution environment at the three ends and the environment used to render non-native components are different:

On iOS, Mini Program's javascript code runs in JavaScriptCore and is rendered by WKWebView in environments such as iOS8, iOS9 and iOS10

On Android, Mini Program's javascript code is parsed by X5 JSCore, which is rendered by X5 based on the Mobile Chrome 53lap57 kernel.

On the development tools, Mini Program's javascript code runs in nwjs and is rendered by Chrome Webview from official documentation.

two。 Mini Program directory knot project ├── pages | ├── index | | ├── index.json index page configuration | | ├── index.js index page logic | | ├── index.wxml index page structure | | └── index.wxss index page style sheet | └── log | ├── log.json log page configuration | ├── log.wxml log page logic | ├─ ─ log.js log page structure | └── log.wxss log page stylesheet ├── app.js Mini Program logic ├── app.json Mini Program Public Settings └── app.wxss Mini Program Common style sheet II. Mini Program architecture

WeChat Mini Programs's framework consists of two parts: View view layer (there may be multiple) and AppService logic layer (one). The View layer is used to render the page structure, and the AppService layer is used for logical processing, data requests, and interface calls, which are run in two threads.

The view layer is rendered using WebView, and the logical layer is run using JSCore.

The view layer and the logic layer communicate through the WeixinJsBridage of the system layer, the logic layer notifies the data changes to the view layer, triggers the page update of the view layer, and the view layer notifies the triggered events to the logic layer for business processing.

Let's focus on wxs:

Because view and App Service are different threads, they used to transfer data, so when you encounter some data that needs to be processed in view, you can use wxs to process it, as defined below and instructions for use.

Index.js

/ / get the application instance const app = getApp () Page ({data: {motto: 'Hello World', userInfo: {}, hasUserInfo: false}, / / event handler function bindViewTap: function () {}, onLoad: function () {}}) {{tools.bar (motto)}} {{tools.foo}} var foo = "' hello world' from comm.wxs" Var bar = function (d) {return 'what' + d;} module.exports = {foo: foo, bar: bar}; read here, this "WeChat Mini Programs running process example Analysis" article has been introduced, want to master the knowledge of this article also need to do your own practice to understand, if you want to know more related articles, welcome to follow 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.