The introduction

Hello everyone, I am a personal exerciser who has been practicing for two and a half years. I like singing, dancing, rap, basketball and Music!

Uh huh! Stop being a sand sculptor and be serious. I’m writing a technical tutorial! (Private letter urging more let me write sand carving is 😈?)

People rely on clothes and horses by saddle, the dog with bells run happy, first to learn the interface development of small programs, the first point 🌹🍐🌹🔥, behind to masturbation interactive process, optimize performance and so on. The content of this section is relatively simple, and the learning process is as follows. Readers can learn according to their own levels as required:

  • 📚 Learn a learn: a few minutes of the front-end three musketeers (HTML, CSS and JavaScript) basic syntax.
  • 🆚 comparison: from HTML, CSS traceless transition to wechat small program WXML, WXSS.
  • 🐱 take a look: what components wechat applet provides.
  • 🔥 play around: There are two ways to control component hidden display: block Wx :if VS hidden property.
  • 🚀 : Duplicate code to extract template/ component where it is used.
  • 🌝 skin a skin: decompiler other people’s small program, learn (chao) xi (XI) under the component how heap.

It looks like a lot of content, but in fact, it is very simple. It is estimated that you will not have to read this article in ten minutes ~

🎵 Music!

0x1, 🐔 You’re so beautiful Babe

As mentioned in the last section, the gameplay of native applets:

Write pages in WXML, write styles in WXSS, write logic in JS, change configuration in JSON

May be some white really completely did not touch the front end, as a “true, learning from scratch micro channel small program development” tutorial:

By the way, just for a few minutes

1. Front-end three Swordsmen (HTML, CSS, JS)

① HTML(Hyper Text Markup Language)

Hypertext Markup Language (HTML), which has no compilation process, is just a markup language, not a programming language, that makes web pages out of various tags.

Example code for a simple HTML page is as follows:


       

<html>

<head>

<title>A title</title>

</head>

<body>

    <p>content</p>

</body>

</html>

Copy the code

Then came “two nouns” :

Tags/elements: Keywords surrounded by Angle brackets, such as

above, have the following syntax:

  • Tags usually come in pairs, such as the

    content

    above, with exceptions such as the start/open tag before the newline

    tag and the end/close tag.

  • Support nested tags, but you can’t cross, such as < div > < p > < / p > < / div > is correct, but the < div > < p > < / div > < / p > is wrong.

“Properties” : Add auxiliary information to the tag, in the form of key-value pairs, such as jump links for tag A:

<a href="http://coder-pig.github.io">Crazy hint ~</a>

Copy the code

The syntax is as follows:

  • You can set multiple attributes for a tag, separated by Spaces.
  • Several common attributes: class(sets the class name), ID (sets the unique ID of the element), style(sets the element style)

To learn more about tags and attributes can visit: www.w3school.com.cn/tags/index..

② CSS (Cascading Style Sheets)

Cascading style sheets, styles are representations of labels, such as blue font styles for text labels.

<font color="blue">The text</font>

Copy the code

Cascading means stacking styles on HTML elements using CSS selectors! You can add styles using the tag’s style attribute, but CSS is also introduced for a reason: to solve the problem of separating content from presentation. Modifying a CSS document can change the layout and appearance of all the elements in an HTML page without having to go to the HTML page to find the elements to modify.

There are four ways to introduce CSS styles:

<! Use the style attribute to specify a CSS style for an element.

<p style="color: #000000;">xxx</p>



<! <style> <style>

<style type="text/css">

    h1 {background-color:# 000000; }

</style>



<! -- ③ <link> tag introduces external style sheet, <head> tag adds -->

<head>

    <link rel="stylesheet" type="text/css" href="mystyle.css">

</head>



<! The @import directive introduces an external stylesheet -->

<style>

    @import url("style.css");

</style>



<! An HTML file can be used in all four ways, in order of priority: inline > inline > import > link -->

Copy the code

CSS selectors

If you want to style a tag, you have to find the node, right? CSS selectors are a set of rules for locating labels.

Three types of selectors:

  • Tag selector: All specific tags in a document use the same CSS style.
  • Id selector: The element sets the ID selector with the ID attribute. The selector is defined with “#”.
  • Class selector: The element uses the class attribute to set the class selector, which can be used in multiple elements and is displayed with a “.”.

Create a new test.html and try using CSS selectors:


       

<html>

<head>

  <title>CSS example</title>

  <style type="text/css">

  <!--Label selector >

  p {background-color:red; }

  <!-- idThe selector >

  #id-choose {background-color:green; }

  <!-- classThe selector >

  .class-choose {background-color:blue; }

</style>

</head>

<body>

  <p>Text 1</p>

  <p id="id-choose">Text 2</p>

  <p class="class-choose">Text 3</p>

</body>

</html>

Copy the code

Open the browser to see the effect:

In addition, there are some compositional gameplay, such as derivative selectors, more on CSS selectors and positioning, don’t panic. More CSS styles as well as the detailed usage of CSS selectors can visit: www.w3school.com.cn/css/index.a.

③ JavaScript

Node.js is one of the most popular scripting languages in the world. In addition to front-end write interaction and dynamic effects, node.js can also write to the server:

Famous Atwood’s law: Any application that can be written in JavaScript, will eventually be written in JavaScript.

It is still simple to pass through the basic syntax of JavaScript

Variables: use the var keyword to declare variables, start with a letter, and are case sensitive. “2, comments” : divided into single-line comments (// comment content) and multi-line comments (/* comment content */). “3. Data Type” is divided into two categories:

Basic data types:

  • Undefined: The default value of a variable that is not initialized.
  • Null: An empty value, understood as a placeholder, that can be used to initialize a variable or function return value.
  • String: All characters are 16 bits in Unicode and are represented by single and double quotation marks.
  • Boolean: Used for logical judgment, only true and false.
  • Number: internally represented as a 64-bit floating point number, the values of 1 and 1.0 are the same in JS.

Reference data types:

  • Var num = [1,2,3]; Access via subscript, which starts at 0 and supports different types of elements!
  • object:Curly bracket wrappingObject attributes passName:Multiple attributes are separated by commas.

    Var person = {id: 1, name:” “}; , can be accessed through.or[]Access properties such as:

    person.id 和 person[“id”]It’s all ok.
  • Functions: defined by the function keyword, wrapped in curly braces around code blocks.

“4. Operators”

  • Arithmetic operators (7) : ` + ` (add) ` – ` (reduction) ` * ` (take) ` / ` (except) ` % ` (more than) ` + + ` (on the) ` — ` down (since)
  • The assignment operator (6) : after the arithmetic operators and ` = ` (equal) : ` = `, ` + = `, ` – = `, ` * = `, ` / = `, ` % = `
  • Logical operators (3) : ` && ` (and) ` | | ` (or) `! ‘(not), returns a Boolean value.
  • Comparison operators (8 kinds) : ‘==’ (equal), ‘===’ (absolutely equal, value and type equal), ‘! = ‘(does not equal),’! = = ` (or type), ` > ` (greater than), ` < ` (less than), ` > = ` (greater than or equal to), ` < = ` (less than or equal to).
  • Conditional operators: simplified if statements such as var s = age > 18? (output adult):(output minor).
  • The bitwise operators (7) : ` & ` (bitwise and) ` | ` (bitwise or ` ^ ` (the bitwise xor) ` ~ ` (DE) by a ` < < ` (left) ` > > ` moves to the right (symbols) ` > > > ` (unsigned moves to the right)
  • Type operators (two types) : typeof(return variable type) and instanceof(determine whether an object is of a type).

“5. Conditional structure” : Conditional structure in JS is divided into if and switch structure, code examples are as follows:

var socre = 70;



<! - ordinaryif-else -->

if(score > 60) {

  console.log("Qualified");

}else {

  console.log("Unqualified");

};



<! --if-else if -->

if(score < 60) {

  console.log("Fail");

}else if(score <= 70) {

  console.log("Pass");

}else if(score <= 80) {

  console.log("In");

}else if(score <= 90) {

  console.log("Good");

}else {

  console.log("Optimal");

};



<! --switch -->

switch(true) {

    case score < 60: console.log("Fail"); break;

  case score < 70: console.log("Pass"); break;

  case score < 80: console.log("In"); break;

  case score < 90: console.log("Good"); break;

  default: console.log("Optimal"); break;

};

Copy the code

“6. Circular Structure”

  • For loop: Executes a block of code multiple times.
  • For-in: traverses object properties.
  • While: A loop executes a block of code when the condition is true. Do-while executes once before judging.

There are also two loop break statements: break(to break out of the loop) and continue(to skip the current loop to the next one). JS basic syntax here, too much content will not finish, want to learn system can move to: www.w3school.com.cn/b.asp, anyway I wrote more than two weeks of small programs also didn’t how to turn over the documents, may be I didn’t play slip small program, feel the need to open another section behind lu JavaScript.

2. WXML and WXSS in wechat applet

HTML/CSS and wechat small program WXML/WXSS can be described as “extremely similar”, the official comparison of the article: “small program code composition”, here is a simple extraction of the main points.

1) WXML VS HTML

  • Different labels: nodiv.p.spanMuch more,view.button.textAnd other commonly used controls.
  • DOM tree manipulation: DOM attributes and behavior cannot be manipulated through the DOM API like a Web page, for example, elements cannot be accessed through getElementById(). Applets use MVVM mode, two-way data binding, through a template syntax to describe the state and interface structure relationship.
  • Events: The internal behavior of the component is made known to the developer in the form of events.

(2) the CSS VS WXSS

  • New dimension unit: RPX, ADAPTS to screen width.
  • Provide global and local styles: app.wxss global, page name. WXSS single page.
  • Only some CSS selectors are supported.

PS: The difference is not that big. It is easy to transition from HTML and CSS to WXML and WXSS.

0x2 🐔 You too beautiful Beibei OH (quick view of wechat small program components)

1, built-in components overview

This series will not explain the control one by one, the official documentation for each component has a detailed explanation, as well as each component Bug & Tip can be seen, document link: Developers.weixin.qq.com/miniprogram…

2, Block WX: If vs Hidden

A common requirement in daily development is to control how components are shown or hidden depending on the situation. It can be controlled by

or hidden property in wechat applet. The code example is as follows:

<! -- index.js -->

// Add a variable control

Page({

  data: {

IsLogin: false // Whether to log in

  },

})



<! -- index.wxml -->

/ / use<block wx:if>

<view class="container">

    <block wx:if="{{isLogin}}">

        <view>Is logged in</view>

    </block>

    <block wx:else>

        <view>Not logged in</view>

    </block>

</view>



// Use the hidden property control

<view hidden="{{isLogin}}">Not logged in</view>

<view hidden="{{! isLogin}}">Is logged in</view>

Copy the code

Both methods can achieve what we want, and here’s the difference:

  • Wx :if: lazy, do nothing if the initial render condition is false, do not start partial rendering until the condition is true for the first time, have higher switching cost, suitable for scenes where the running condition changes less frequently.
  • Hidden: Components are always rendered, but with control over show and hide, with a higher initial rendering cost, suitable for scenes that switch frequently.

Also, one thing to note:

A block is not a component!! It is simply a wrapper element that does no rendering on the page and only accepts control properties such as Wx :if, Wx :for, etc. For example, if you want to display this bunch of components when the condition is true, and use that bunch of components when the condition is not, you can wrap a block around it. If there is only one component to determine, there is no need to wrap a block around it. For example, the code above can remove the block entirely:

<view wx:if="{{isLogin}}">Is logged in</view>

<view wx:else>Not logged in</view>

Copy the code

Template and component

Page write too much, naturally there are some duplicate code, after all, artists also want to be lazy, there are the same or similar places is normal. Instead of just copying and pasting layers, we need to copy the page code as well as the styles, interaction logic, etc. Every time to manually copy and paste, much fishing ah, as a tOU (tOU) rate (LAN) of the development son, must think of a way to extract the relevant code ah, when used to guide a guide. Two reuse modes are provided in applets:

  • Template: a template used for demonstration purposes. The function needs to be written separately on the call page.
  • Component: a component that can have its own business logic, which can be viewed as a separate page for scenarios with multiple business logic interactions.

Then let’s write two simple pieces of code to see the difference between the two.

Template template

Template file creation and reference:

Create a new templates folder => Create a text. WXML file => The templates section is wrapped with the

<! -- test.wxml -->

<template name="text">

        <text>Template text</text>

</template>

Copy the code

② Template import:

Import template file from index. WXML => Use the template tag is attribute to determine which template file is imported:

<! -- index.wxml -->

<import src=".. /.. /templates/text.wxml" />

<view class="container">

        <template is="text"/>

</view>

Copy the code

The running results are as follows:

  • ③ Template style import:

Import style files by @import:

<! -- test.wxml -->

<template name="text">

        <text class="blue-text">Template text</text>

</template>



<! -- index.wxss -->

.blue-text { color: blue; }



<! -- index.wxss -->

@import ".. /.. /templates/text.wxss" ;

Copy the code

The running results are as follows:

④ Data transfer and event processing

There may be times when you need to pass data into the template, or handle events such as clicking a button to display a Toast. Change the template text to js, add a button, a click event.

<! -- test.wxml -->

<template name="text">

        <text class="blue-text">{{show}}</text>

</template>

<template name="button">

        <button bindtap="onClick">button</button>

</template>



<! -- index.js -->

Page({

  data: {

    content: {

Show: "Ha ha"

    }

  },

  onClick: function () {

    wx.showToast({

Title: 'Clicked ',

    })

  }

})



<! -- index.wxml -->

<import src=".. /.. /templates/text.wxml" />

<view class="container">

        <template is="text" data="{{... content}}"/>

        <template is="button"/>

</view>

Copy the code

The running results are as follows:

Component component

Create a compoments folder, create a test folder, put test. WXML and test. WXSS into it, and adjust the test. WXML code:

<view>

  <text class="blue-text">{{content.show}}</text>

  <button bindtap="onClick">button</button>

</view>

Copy the code

Create a new test.js file. The js of the custom component is slightly different from the js of the page:

Component({

  // The component's property list

  properties: {

    name: {

      type: String.

      value: '123'

    }

  },



  // The initial data of the component

  data: {

    content: {

      show: "Ha ha"

    }

  },



  // List of methods for the component

  methods: {

    onClick: function () {

      wx.showToast({

        title: 'Clicked'.

      })

    }

  }

})

Copy the code

You also need to add a test.json file that declares this to be a component:

{

    "component": true.

    "usingComponents": {}

}

Copy the code

To reference the control, you also need to configure it in JSON. Open index.json and add:

"usingComponents": {

    "test": ".. /.. /components/test/test"

}

Copy the code

Index.html then references the control, passing in a property defined in JS, such as name here:

<! -- index.wxml -->

<view class="container">

    <test name="Test"></test>

</view>

Copy the code

The running results are as follows:

There are a lot of content about the custom components, behind will combine instance, now want to know can be diverted: developers.weixin.qq.com/miniprogram…

0x3 🐔 You are so beautiful Beibei (reverse wechat mini program)

It was Jerome Who once said:

Borrow (chao) to learn (XI) other people’s program, can be said to be the development of the daily:

See how other people’s pages are stacked, how to tune the style, how to do the dynamic effect, how to write the logic. But commercial projects, others can not directly give you the source code, let you borrow (Chao) (XI). So only through some of the wayside means to obtain the source code, that is: decompilation.

❗ ️ ❗ ️ ❗ ️ FBI Warning ❗ ️ ❗ ️ ❗ ️

The original intention of decompiling someone else’s source code is just to: study and learn to see how someone else realizes a feature point! Do not go directly with other people’s material (copyright), still have disgusting change the second packaging of things other people’s small program business, others discover is to tell you, eat a lawsuit to lose money, serious point should go inside squat!! Keep your fingers crossed, after all:

1, obtain wechat small program source package WXAPkg

Micro channel small program source hosted on the micro channel server, when the first open small program, the small program source file will be downloaded to the local, and then decompression compilation execution. How do I get the source file? Grab the package and get the URL of the source file to download? Naive, catch wechat link basically leave decryption, let alone can solve it, you every decomcompile a wechat small program to catch? Now that you’ve downloaded it to your phone, just go to the file and copy it to your computer.

You need a root Android chicken, or a jailbroken Apple chicken

(I only have Android chicken, I think android as an example) the reason to root permission because the small program source file in:

/data/data/com.tencent.mm/MicroMsg/{UserId}/appbrand/pkg

Under the directory, UserId is a hexadecimal string. Here I use the RE file manager to access the above directory and see the source files of the small programs listed:

But looking at it this way, it’s hard to figure out which one is the target. Can first open wechat, delete the target small program, and then search to find the small program, open, and then return to this directory, in descending order according to the date, the first is our target small program source file! Here, take the Xicha GO applet as an example:

Here is the source file of the small program for Xicha GO. Then you can get it on your computer in two ways:

  • 1. Compress files.
  • 2. Copy files to another directory, for example, Download.

Then through wechat or QQ sent to the computer, here if directly sent to the words, will report the file can not be found!

2. Decompiler tool wxappUnpacker

Github Repository: github.com/qwerty47212…

Clone the project with Git and install it locally. If you don’t have Nodejs installed, install it. Then go to the project, open the terminal, and install a wave of dependencies:

npm install esprima -g

npm install css-tree -g

npm install cssbeautify -g

npm install vm2 -g

npm install uglify-es -g

npm install js-beautify -g

npm install escodegen -g

Copy the code

NPM install XXX: install XXX

3. Start decompiling

Open terminal, CD to wxappUnpacker directory, type:

node wuWxapkg.js xxx.wxapkg

Copy the code

It should be all green after running, and then success:

But this is the mistake:

Searched the official issues, 2333, and there is no answer, alas, uncomfortable, but also how, their own hands to find a problem, change ah. Error: path not found:

E:\Test\_- 750230640._176\plugin-private:\wxbab743cd6debd38d\plugin.json

Copy the code

Then, look at the corresponding path:

E: \Test\ _- 750230640 _176\ __plugin__\wxbab743cd6debd38d\plugin.json

Copy the code

Plugin-private: and __plugin__, but Windows does not support: as folder names,

Plugin-private: is replaced by __plugin__, but there is no corresponding conversion when the directory is addressed. Let’s try to change the path when we save the file. First locate the error line:

Before line 70 add:

name = name.replace("plugin-private:"."__plugin__");

Copy the code

Then do it again:

Oh, my God, a new error was reported, the same official issues checked, did not find the answer, it seems to be because of the subcontracting problem, and then the author seems to have been sued by TX, the code did not update much. The comments section found a library improved by a later-comer: github.com/gudqs7/wxap… Once again, NPM installs the dependent libraries, and then type:

./bingo.sh xxx.wxapkg

Copy the code

The path error is also reported:

Add the code above to replace the path, save, run:

Oh, my God, nice, that’s it. Good decompilation.

4. Import of wechat developer tools

Open the wechat developer tool and import the project using a random appID.

WXML: error: used custom component, go to path, create a new blank index. WXML, and report error

Create a blank index.js file, and you can see the applet compiling:

Then the dialog box for locating permissions pops up:

Open app.json to add location permission configuration:

  "permission": {

    "scope.userLocation": {

      "desc": "Your location information will be used to display the effects of the applet location interface."

    }

  }

Copy the code

After loading the animation, the following dialog box pops up:

Then set the open not to verify the legitimate domain name:

Please connect to the Network again. There is a request from the Network at the bottom. Estimate is short of what parameters, would not like spiders, can write death request header or parameter, WeChat authorization login And then take WeChat id as the user credentials, and then to adjust their own login interface, and then return a string of token, such as to complete the subsequent requests, I got caught this token, program writing death should be ok, general. When I skillfully opened Fiddler, configured a manual agent for the phone, and then opened Xicha Go to capture the bag, BUT I did not catch any request??

Try your browser and other apps, and you’ll get the data, and you’ll see rules like this after a search:

  • 1. Android 7.0 or later, regardless of micro trust version, will trust the certificate provided by the system.
  • 2. Android 7.0 or later, wechat 7.0 or later, wechat will trust the certificate provided by the system.
  • 3. Android 7.0 or later, wechat 7.0 or later, wechat only trusts its self-configured certificate list.

Cunning, really cunning, silently put down the hands of the brush class native 9.0 Millet MIX2s, rummage through the cabinet to find the treasure of the country line native Moto X1085, looking at this delicate bamboo back cover, Moto Logo was worn by the years to trace, do their own 33 nien boot pictures, the past, as if yesterday (2333, I just want to show off.)

Set up a manual proxy, install the certificate, and then capture the package to see, sure enough, captured data:

Then open the compiled source with VS Code, search authorizations globally, and find it in api.js:

Add the request header refer to the header:

referer: "https://servicewechat.com/wxxxxx42xx4f24xxxx/176/page-frame.html"

Copy the code

But an error was reported after compiling:

This is a cross-domain problem and cannot be set directly. PostMan:

I can only use this code once, forget it, I’m too lazy to bother about it, I’ve got the interface, can I still change the price, 1 cent to buy a cup of Zhi Zhi Tao tao? Our original intention is just to see the page layout and style! You may ask:

I can’t even log in. I have been stuck on this page. How can I cut to other pages to see the effect?

For this simple, click add build mode:

For example, if I want to see the page about Xi Cha GO, search “About Xi Cha GO” globally, locate aboutAggregate. WXML, and start the configuration path of the page: Pages/aboutGo/aboutAggregate/aboutAggregate, this path can be found in the app. Get in json, of course, you enter aboutAggregate is also a smart tips.

Instead of loading the contents of the page displayed on the release machine, open aboutAggregate. WXML with the following code:

<! --pages/aboutGo/aboutAggregate/aboutAggregate.wxml-->

<text>pages/aboutGo/aboutAggregate/aboutAggregate</text>

Copy the code

I lost, pants off, no code??

In fact, this is the subcontracting loading mechanism of the small program, the previous also said that the first time to open the small program, you need to download the complete source package, if the code is large, there will be a long blank screen. For good user experience, you can divide your code into one main package and multiple subpackages. Open the small program to load the main package by default. When entering the subcontracting page, load the corresponding subcontracting.

Em… After loading, RE file manager locates wXAPkg package. Sure enough, there is a new package, and the suffix is _176:

Decompilation commands for subpackages are a little different:

Sh subpackage. wxapkg -s= Decompiled main package directory

Copy the code

After compiling, aboutAggregate. WXML is available, but the page is messy:

Copy aboutAggregate. WXSS to the main package and compile it again.

More details about the subcontract load, can be set to the official website to consult: developers.weixin.qq.com/miniprogram…

Yes, the page is seen, you may have a question:

If I’m not logged in, that popover stays there, or some controls don’t show up until I’m logged in?

It’s not easy. Just go to AppData and change the judgment tag to the value you want.

Again, you may be wondering:

Do not login no data, the list does not show the content, I can not see the effect!

If you can’t create your own data, copy the data returned by the corresponding interface. If it is simple, write it to JS. If it is complicated, make a local mock server to return the data, and then change the logic of data acquisition into JS. Of course, if you don’t like too much clutter, you can cut out WXML, WXSS, js and make your own. There are many ways to move your brain! About reverse micro channel small program to talk about these, there are omissions to fill the back of ~

summary

This section is not like the general basic tutorial, yili yili began to introduce a control, personal feel know what controls, when used where to check. Of course, the core of the common use or to understand, such as the above block tag, hidden property, template template, component component. Most of the case is: just start to learn small program, not necessarily there will be a design draft for you to do, if you want to practice, borrow (chao) to learn (XI) written by others small program, write the same page, is a good way to practice. Encounter do not know how to achieve, or feel that their implementation is a bit redundant, want to see how others do it, this time to decompile others small program learning or very good ~

References:

  • Official documents of wechat applets
  • Basic javaScript Syntax (part 1)
  • Everyone who can join an Internet company is a talented person

If this article is helpful to you, welcome to leave a message, like, forward quality three lian, thank 😘~