Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

The introduction

Small programs are a brand new way to connect users and services, which can be easily obtained and spread in wechat, and have excellent use experience

I. Introduction to small programs

1.1 History of small program technology

The main development language of small programs is JavaScript. When WebView in wechat gradually becomes an important entry point of mobile Web, wechat has related JS API. This kind of API was originally provided for some internal business of Tencent. In early 2015, wechat released a set of web development kit, called JS-SDK, which opened dozens of apis such as shooting, recording, voice recognition, TWO-DIMENSIONAL code, map, payment, sharing, card coupons and so on.

WeixinJSBridge.invoke('imagePreview', {
    current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641'.urls: [ // A list of all image urls in array format
        'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg'.'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg'.'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg']},function(res) {
    console.log(res.err_msg)
})

Copy the code

Js-sdk is a package of the previous WeixinJSBridge, as well as the release of new capabilities, and is open to all developers from internal, the vast majority of mobile web pages spread in wechat use the relevant interface.

An enhanced version of JS-SDK, which has an important function called “offline storage of wechat Web Resources”.

The offline storage of wechat Web resources is a Web acceleration solution based on wechat for Web developers.

By using wechat offline storage, Web developers can directly load Web resources from wechat locally instead of pulling them from the server by virtue of the resource storage capability provided by wechat, thus reducing the loading time of Web pages and providing better Web browsing experience for wechat users. All Web apps under each public account can cache a maximum of 5M resources.

1.2 Differences between applets and ordinary Web development

  1. Logic layer and rendering layer

The web development rendering thread and script thread are mutually exclusive, which is why long script runs can cause the page to become unresponsive, whereas in applets the two are kept separate and run on separate threads. Web developers can use the DOM API exposed by various browsers for DOM selection and manipulation.

The logic layer of the applet is separate from the render layer. The logic layer runs in JSCore and does not have a full browser object, so it lacks the DOM API and BOM API. This difference results in some libraries familiar to front-end development, such as jQuery, Zepto, etc., not running in small programs. The JSCore environment is also different from the NodeJS environment, so some NPM packages will not run in applets.

  1. Facing the operating environment

Web developers need to face a variety of browsers, IE, Chrome, QQ browsers on the PC side, Safari, Chrome and various WebViews in iOS and Android system on the mobile side.

In the process of small program development, we need to face the wechat client of iOS and Android, as well as the small program developer tools for assisting development. The three running environments of small programs are also different, as shown in Table 1-1

Runtime environment Logic layer Rendering layer
iOS JavaScriptCore WKWebView
The android V8 Chromium Custom kernel
Applets developer tools NWJS Chrome WebView

IOS secure UIWebView rejected solution: Replace UIWebView with more secure WKWebView

Blog.csdn.net/z929118967/…

II. Preparation

2.1 Register wechat applets and obtain the AppID of the applets

It is recommended to use the existing public account to quickly associate registration small program, and check AppID and AppSecret on the development setting page

  1. After registering the applets, be sure to remember the original ID, which can be used to retrieve passwords and other functions.
  2. When registering, if the QQ mailbox is occupied, you can give the QQ mailbox alias, such as my English QQ mailbox [email protected]

2.2 Development Tools

Download developer tools for code development and upload

Download address: developers.weixin.qq.com/miniprogram…

Wechat developer tool has three modules.

  1. Applets simulator
  2. Small program editor
  3. Small program debugger: function is similar to the review element of the page in the browser. We can modify the properties in the element mode box and view the changes of the related properties of the page.

Debugger is divided into six functional modules: Wxml, Console, Sources, Network, Appdata, Storage.

2.3 Small program management background basic operations

Kunnan.blog.csdn.net/article/det…

2.4 Composition of small program code

  1. Json suffix json configuration file, in the small program, plays the role of static configuration
  2. WXML template file with the.wxml suffix, similar to HTML roles.
  3. .wxSS suffix WXSS style files, with most of the features of CSS, small programs in WXSS also made some expansion and modification.
  4. Js script logic file with the suffix.js. It is used to write scripts to interact with users and respond to user click events

JSON configuration file:

App. json is the global configuration of the current applet, including all page paths, interface performance, network timeout, bottom TAB, etc

At the bottom of the TAB


  "tabBar": {
    "color": "#7A7E83"."selectedColor": "#3cc51f"."borderStyle": "black"."backgroundColor": "#F7F7F7"."list": [{"pagePath": "pages/index/index"."iconPath": "images/[email protected]"."selectedIconPath": "images/[email protected]"."text": "Home page"
      },
      {
        "pagePath": "pages/getOpenId/index"."iconPath": "images/[email protected]"."selectedIconPath": "images/[email protected]"."text": "Classification"
      },
      {
        "pagePath": "pages/getMiniProgramCode/index"."iconPath": "images/[email protected]"."selectedIconPath": "images/[email protected]"."text": "Interface"
      },
      {
        "pagePath": "pages/deployService/index"."iconPath": "images/[email protected]"."selectedIconPath": "images/[email protected]"."text": "About"}},Copy the code

2.5 Route Forwarding

Kunnan.blog.csdn.net/article/det…

2.6 Expanding Capabilities (Search)

The search component Searchbar provides the search capability and displays the results of the search

Developers.weixin.qq.com/miniprogram…

III. Directory structure

3.1 Project directory structure

file necessary role
app.js is Small program logic
app.json is Applets common configuration
app.wxss no Common style sheets for applets 

├ ─ ─ / cloudfunctions /# cloud function├ ─ ─ / miniprogram /# Front-end code│ ├ ─ ─ / images /# Images and other resources│ ├ ─ ─ / pages /# page directory│ ├ ─ ─ / app. Js# global configuration│ ├ ─ ─ / app. Json# global configuration│ ├ ─ ─ / app. WXSS# global style file├ ─ ─ / project. Config. Json# Project profile
Copy the code

An applet page consists of four files, which are:

The file type necessary role
js is Page logic
wxml is Page structure
json no Configuration page
wxss no Page style sheet

3.2 Cloud function directory

Cloudfunctions // Cloud function directory ├─ config.json // Parameters and time trigger configuration files ├─ index.js // Cloud function ├─ package.json // Cloud function dependency managementCopy the code

see also

For more, check out # Applets: iOS Reverse, which presents valuable information only for you, focusing on the mobile technology research field.