Wechat App number (mini program, the new name of “app number”) has finally arrived!

It is still in the private beta stage, and wechat only invited some enterprises to participate in the closed beta. I’m sure you’re all interested in what the app will look like in the end. How to transform a “service number” into a “mini program”?

Let’s briefly demonstrate the development process with an example of a simple third-party tool. (The company’s project is so secret that it can’t share code or screenshots. Boca jun was secretly writing tutorials while working overtime.Thanks to the Cardigan team for providing their service number to perform this procedure, so bocarjun’s tutorial is available via the cardigan public account at 😄)

OK, boca jun is going to have to stay up late to get you to this tutorial as soon as possible! The update starts tonight and hopefully the first tutorial will be out in the morning! Start the record! Let’s see how many days it takes!

The preface

Before you start developing your app, take a look at the official “mini program” tutorial! (The following content is from wechat’s official “mini program” development guide)

This document will take you step by step to create a micro channel mini program, and you can experience the actual effect of the small program on the phone. The home page of the mini program will display a welcome message and the current user’s wechat profile picture. By clicking the profile picture, you can view the startup log of the current mini program on the newly opened page.

1. Obtain the AppID of wechat applets

First, we need to have an account, and if you can see the documentation, we should have invited and created one for you. Note Do not directly use the AppID of the service number or subscription number. Using the provided account, log in https://mp.weixin.qq.com, you can view the AppID of wechat mini program in the “Settings” – “Developer Settings” of the website.

Note: If we are not using the administrator wechat account bound to the registration, we can experience this small program on our mobile phone. Then we also need to operate “bind developer”. That is, in the “user identity – developer” module, the binding needs to experience the micro signal of the small program. The default account registration and experience of this tutorial are using the administrator’s wechat account.

2. Create projects

We need to complete small program creation and code editing through developer tools.

After the developer tool is installed, open it and log in using wechat scan code. Select Create Project, fill in the AppID obtained above, set a local project name (not applets name), such as “my first project”, select a local folder to store the code in, and click “New Project”.

In order to facilitate beginners to understand the basic code structure of wechat applets, during the creation process, if the selected local folder is an empty folder, the developer tool will prompt you whether to create a Quick Start project. Select “Yes” and developer tools will help us create a simple demo in the development directory.

After the success of the project creation, we will be able to click on the project, come in and see the full interface of developer tools, click on the left navigation, in the “edit” to view and edit the code, you can test in “debug” small program code and simulation in WeChat client effect, in the “project” can be sent to the mobile phone preview effect.

3. Write code

Click “Edit” in the left navigation of the developer tools. We can see that the project has been initialized and contains some simple code files. Js, app.json and app.wxss are the three most crucial and essential ones. Js files are script files,.json files are configuration files, and.wxss files are style sheets. The wechat applet will read these files and generate the applet instance.

Below we briefly understand the functions of these three files, convenient to modify and develop their own micro channel small program.

App.js is the script code for a small program. In this file we can listen for and handle applets’ life cycle functions and declare global variables. Call the rich apis provided by MINA, such as synchronous storage and synchronous reading of local data in this case.

//app.js App({ onLaunch: The function () {/ / call the API to get data from the local cache var logs. = wx getStorageSync (' logs') | | [] logs. The 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 ({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 } })Copy the code

App. json is the global configuration of the entire applet. In this file we can configure which pages the applet consists of, the background color of the applet window, the style of the navigation bar, and the default title. Note that you cannot add any comments to this file.

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "WeChat",

    "navigationBarTextStyle":"black"

  }

}Copy the code

App.wxss is a common style sheet for the entire applet. We can use the style rules declared in app.wxSS directly on the class property of the page component.

/**app.wxss**/

.container {

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  padding: 200rpx 0;

  box-sizing: border-box;

}Copy the code

3. Create a page

In this tutorial, we have two pages, the Index page and logs page, the welcome page and the display page for the applet launch log, both in the Pages directory. The [path + page name] of each page in wechat applet needs to be written in pages of app.json, and the first page in pages is the home page of the applet.

Each applet page is composed of four different files with the same name in the same path, such as index.js, index.wxml, index.wxss, and index.json. .js files are script files,.json files are configuration files,.wxss files are style sheets, and.wxml files are page structure files.

Index. WXML is the structure file of the page:





  

    

    {{userInfo.nickName}}

  

  

    {{motto}}

  

Copy the code

In this example,
, , and
are used to structure the page and bind data and interactive processing functions.

Index.js is a script file for the page, in which we can listen and process page lifecycle functions, get applets, declare and process data, respond to page interaction events, and so on.

Var app = getApp() Page({data: {motto: 'Hello World', userInfo: {}}, function bindViewTap: {motto: 'Hello World', motto: 'Hello World', motto: 'Hello World', motto: 'Hello World', motto: 'Hello World', motto: 'Hello World', motto: 'Hello World', motto: 'Hello World', motto: 'Hello World', motto: 'Hello World') function() { wx.navigateTo({ url: '.. /logs/logs' }) }, onLoad: Function () {console.log('onLoad') var that = this app.getUserinfo (function(userInfo){// Update data that.setData({ userInfo:userInfo }) }) } })Copy the code

Index. WXSS is a style sheet for the page:

/**index.wxss**/

.userinfo {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.userinfo-avatar {

  width: 128rpx;

  height: 128rpx;

  margin: 20rpx;

  border-radius: 50%;

}

.userinfo-nickname {

  color: #aaa;

}

.usermotto {

  margin-top: 200px;

}Copy the code

The style sheet for the page is not necessary. When there is a page style sheet, the style rules in the page style sheet overlay the style rules in app.wXSS. If you do not specify a style sheet for the page, you can also use the style rules specified in app.wxSS directly in the structure file of the page.

Index.json is the configuration file for the page:

The configuration file for the page is not necessary. When there is a configuration file for a page, the configuration item on that page overwrites the same configuration item in the window of app.json. If no page configuration file is specified, the default configuration in app.json is used directly for that page.

The page structure of logs





  

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

  

Copy the code

The Logs page uses the
control tag to organize the code, uses wx:for-items to bind the logs data on the
, and loops the logs data to expand the node

//logs.js var util = require('.. /.. /utils/util.js') Page({ data: { logs: [] }, onLoad: function () { this.setData({ logs: (wx.getStorageSync('logs') || []).map(function (log) { return util.formatTime(new Date(log)) }) }) } })Copy the code

The running results are as follows:

Review images

4. Mobile preview

Select “Project” on the left menu bar of the developer tool and click “Preview” to experience it in the wechat client after scanning the code.

Review images

Currently, the preview and upload functions are not available, and we need to wait for the next update from wechat official.

As you can see, the wechat official development guide is very simple, many details, codes and functions are not clearly displayed, so it is time to show the strength of boca Jun! Development tutorial officially started!

Chapter one: Preparation

Preparation is important. To develop a wechat application, you need to download the developer tools from weixin.qq.com in advance.

1. Download the latest wechat developer tool, and you will see this interface after opening it:

Review images

2. Click “New Web +” project, then the following screen appears:

Review images

3. The contents of this page need attention —

  • AppID: fill in according to the official explanation.

  • Appname: the outermost folder name of the project. If you name it “ABC”, all subsequent project content will be saved in “/ABC/…”. Directory.

  • Local development directory: The directory where the project is stored locally.

Note: Again, if you are working with team members on the project, it is recommended that you use the same directory name and local directory to ensure uniformity of collaborative development. If you already have a project, the import process is similar to the above.

4. After all the preparations are complete, click The “New Project” button, and click “OK” in the displayed box.

Review images

5. As shown in the figure above, at this moment, wechat Developer Tool has automatically built an initial demo project for you, which contains the basic content and framework required for a wechat application project. Click the project name (” cards “in the picture) to enter the project, you can see the basic architecture of the whole project:

Review images

Chapter two: Project framework

Wechat user group is very large at present, wechat after the launch of the public number, the popularity of everyone can see, but also promote the rapid development of Html 5, with the public business needs more and more complex, the arrival of the application number now is just right.

 

Bokajun found that the way wechat provides developers is also undergoing comprehensive changes: from manipulating DOM to manipulating data, a bridge tool provided by wechat is used to realize many functions that are difficult for Html 5 on public accounts, which is similar to hybrid development, different from hybrid development: Wechat’s open interface is more rigorous, and the structure must adopt the components it provides. External frameworks and plug-ins can not be used here, allowing developers to completely break away from DOM operation and great changes in development thinking.

 

To do a good job, he must sharpen his tools. It’s important to understand its core functions, and to understand how it works.

Life cycle:

In index.js:

Review images

Developer tools Console:

Review images

App Launch–>App Show–>onLoad–>onShow–>onReady.

The first is the startup and display of the entire app, which can be configured in app.js, followed by the loading and display of each page.

You can imagine that you can handle a lot of things here, like load boxes and stuff like that.

Routing:

Routing has always been a core point in project development. In fact, wechat has little introduction to routing. It can be seen that wechat has been well encapsulated in routing and also provides three jump methods.

Wx. navigateTo(OBJECT) : Keep the current page, go to a page in the application, use wx.navigateBack to return to the original page.

Wx. redirectTo(OBJECT) : Closes the current page and switches to a page in the application.

Wx.navigateback () : Close the current page and roll back to the previous page.

These three are basically enough to use, and the routing microenvelope is very good. Developers do not need to configure routing at all, and many frameworks are very cumbersome in routing configuration.

Components:

The wechat component is also very comprehensive, basically meet the needs of the project, so the development speed is very fast, you can carefully browse several times before development, development efficiency will be very good.

Other:

Basically, no external framework or plug-in can be used, even the native JS plug-in is difficult to use, because the previous JS plug-in basically exists in the form of dom manipulation, but the structure of wechat application account this time does not allow any DOM manipulation. Even rem.js, the dynamic setting that developers used to use, is not supported.

The wechat also provides WebSocket, you can directly use it to chat, can develop a very large space.

Compared with the public boka jun found that the development of application number componentization, structure, diversification. The new world is always full of surprises, and more Easter eggs are waiting to be discovered.

Now it’s time to do some simple code!

1. Find the project folder and import it into your editor. Here, Boccagin uses the Sublime Text editor. You can choose your preferred editor based on your development habits.

Review images

2. Next, you need to structure your project according to the content of your project. In the sample project, the “Card_course” directory contains the “tabBar” page and some configuration files for the application.

3. The “tabBar” of the sample project is five menu buttons:

Review images

4. Find the “app.json” file to configure the five menus. Find “tabBar” in line of code:

Review images

You can change according to actual project requirements, where:

  • “Color” is the bottom font Color, “selectedColor” is the highlight Color to switch to that page, “borderStyle” is the Color to switch to a line above the menu, and “backgroundColor” is the backgroundColor of the bottom menu bar. Text description is abstract, I suggest you debug and view the effect, deepen the impression.

  • The code order under “list” must be placed in sequence and cannot be changed randomly.

  • In the file name after “pagePath”, the suffix “.wxml “is hidden, which is a humanized point in wechat development code — to save you the time to write the code, you do not need to declare file suffix frequently.

  • IconPath indicates the iconPath of the page that is not displayed. The two paths can be network ICONS directly.

  • SelectedIconPath is the highlight iconPath of the current page. You can remove it. After removing it, the icon iconPath will be displayed by default.

  • “Text” is the title of the page, which can also be removed. If only one icon is removed, this position will be occupied.

Note: the bottom menu of wechat supports up to five ICONS, so you will need to consider the layout of the menu bars in advance when designing the UI and basic architecture of your wechat application.

5. According to the above code rules, Boca Jun has prepared the basic structure of the sample project for your reference:

Review imagesReview images

6. After the “Json” file is configured, the basic structure of “card_course” is shown in the figure above. The subset that is not needed can be deleted temporarily, and you need to take the initiative to create the subset that is missing. When deleting subsets, check to see if the relevant content in “app.json” has been deleted.

Note: Bokajun personally suggests that when you create a new “WXML” file, you should create the corresponding “JS” and “WXSS” files together, because the configuration feature of wechat application number is that when you parse to a “WXML” file, you will find “JS” and “WXSS” files with the same file name in the same directory. Therefore, the “js” file should be pre-configured in “app.json” in time.

When writing “WXML”, you can code according to the interface provided by wechat application number, which is mostly the previous “div”, but now you can use “view”. When other subsets are needed, they can be selected according to the interface provided by wechat.

Use the “class” name for styling; the “ID” name is basically useless here. It mainly operates on data, not dom.

Review images

7. Above is the “WXML” encoding for the front page of the sample project. As you can see from the figure, there is very little code to implement a page.

8. The “Wxss” file is an imported style file. You can also write styles directly in it, as in this example:

Review imagesReview images

9. Refresh the code once, and you can see that the “View” TAB with no background turns pink.

Note: after modifying the contents under “WXML” and “WXSS”, refresh F5 directly to see the effect directly, modify “JS” need to click the restart button to see the effect.

10. Also, common styles can be referenced directly in “app.wxss”.

Review images

11. The “Js” file must be pre-configured in the “page” of the “app.json” file. In order to clarify the project structure, Bocarjun created four other page files in the same directory as the “Index” homepage in the sample project, as follows:

Review images

Review images

After the above steps, the five bottom menus in the example are all configured.