Lei Feng network press : This article author Bokajun, a program. Lei Feng Network (search "Lei Feng Network" public number concerned) has been authorized by the author. Unauthorized refuse to reprint!
The WeChat application number (a new name for applets, application numbers) has finally arrived!
It is still in the stage of closed beta. WeChat only invited some companies to participate in the beta test. Surely everyone is concerned about what the final form of the application number looks like? How to transform a service number into a small program?
We will briefly demonstrate the development process with an example of a simple third-party tool. The company's project confidentiality can not share code and screenshots. Bocajun is secretly giving everyone tutorials while working overtime. Thanks to the card case team for providing their service number to move this operation.
OK, in order for everyone to see this tutorial as soon as possible, Boca is doomed to stay up late! Start updating tonight and hope to release the first tutorial tomorrow morning! Record start! Take a few days to complete the transformation!
PrefaceBefore starting to develop application numbers, take a look at the official applet tutorial! The following content is from the WeChat official mini-program development guide.
This document will take you step by step to create a WeChat applet and you can experience the actual effect of the applet on your mobile phone. The home page of this applet will display the welcome message and the WeChat avatar of the current user. Click on the avatar to view the startup log of the current applet on the newly opened page.
1. Get Wechat applet AppID
First, we need to have an account. If you can see the document, we should have already invited and created an account for you. Note that the AppID of the service number or subscription number cannot be used directly. Using the provided account, log in to https://mp.weixin.qq.com to view the App ID of the WeChat applet in Settings - Developer Settings.
Note: If we do not use the administrator micro signal registered at the time of registration, experience the applet on the phone. Then we also need to operate "bind developers." That is, in the "user identity-developer" module, binding requires experience of the micro-signals of the applet. This tutorial defaults to registering accounts and experiences using administrator micro signals.
2. Create project
We need to use the developer tools to complete the applet creation and code editing.
After the developer tools are installed, open and log in using the WeChat scan code. Select create "project", fill in the AppID obtained above, set a local project name (non-appletter name), such as "my first project", and select a local folder as a directory for code storage , Click "New Project" on it.
To make it easier for beginners to understand the basic code structure of the WeChat applet, during the creation process, if the selected local folder is an empty folder, the developer tool will prompt if it is necessary to create a quick start project. Select "Yes" and the developer tools will help us generate a simple demo in the development directory.
After the project is created successfully, we can click on the project, enter and see the complete developer tool interface, click on the left navigation, in the "Edit" can view and edit our code, in the "debug" can test the code and Simulate the applet's effect on the WeChat client. In the "project", you can send it to the phone to preview the actual effect.
3. Write code
Click "Edit" in the left navigation of the developer tools, we can see this project, has been initialized and contains some simple code files. The most critical and essential ones are app.js, app.json, and app.wxss. Among them, the .js suffix is ​​a script file, the .json suffix file is a configuration file, and the .wxss suffix is ​​a style sheet file. The WeChat applet reads these files and generates applet instances.
Below we simply understand the functions of these three files, facilitate the modification and develop our own WeChat applet from scratch.
App.js is the applet's script code. We can monitor and process applet lifecycle functions and declare global variables in this file. Call the rich API provided by MINA, such as synchronous storage and synchronous reading of local data in this example.
//app.js
App({
onLaunch: function () {
// Call API to get data from 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{
// Invoking 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
}
})
App.json is a global configuration of the entire applet. We can configure in this file which pages the applet consists of, configure the applet's window background color, configure the navigation bar style, and configure the default title. Note that this file cannot have any comments added.
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
App.wxss is the common stylesheet for the entire applet. We can use the style rules declared in app.wxss directly on the page component's class attribute.
/app.wxss/
.container {
Height: 100%;
Display: flex;
Flex-direction: column;
Align-items: center;
Justify-content: space-between;
Padding: 200rpx 0;
Box-sizing: border-box;
}
4. Create a page
In this tutorial, we have two pages, the index page and the logs page, which are the welcome page and the presentation page for the applet startup log. They are all in the pages directory. The path + page name of each page in the WeChat applet needs to be written in the pages of app.json, and the first page in the pages is the home page of the applet.
Each applet page is composed of four different suffix files with the same name under the same path, such as: index.js, index.wxml, index.wxss, index.json. The .js suffix file is a script file, the .json suffix file is a configuration file, the .wxss suffix is ​​a style sheet file, and the .wxml suffix file is a page structure file.
Index.wxml is the structure file for the page:
Used in this example
Index.js is the script file for the page. In this file we can listen to and process page life cycle functions, get applet instances, declare and process data, and respond to page interaction events.
//index.js
// Get application instance
Var app = getApp()
Page({
Data: {
Motto: 'Hello World',
userInfo: {}
},
// Event handlers
bindViewTap: function() {
wx.navigateTo({
Url: '../logs/logs'
})
},
onLoad: function () {
Console.log('onLoad')
Var that = this
// Call the application instance method to get global data
app.getUserInfo(function(userInfo){
// update data
that.setData({
userInfo:userInfo
})
})
}
})
Index.wxss is the page's style sheet:
/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;
}
The style sheet of the page is not necessary. When there are page style sheets, the style rules in the page's style sheet cascade over the style rules in app.wxss. If you do not specify a page style sheet, you can also use the style rules specified in app.wxss directly in the page's structure file.
Index.json is the page's configuration file:
The page's configuration file is not necessary. When there is a configuration file for a page, the configuration item will overwrite the same configuration item in the app.json window. If there is no specified page configuration file, the default configuration in app.json is used directly on this page.
The page structure of logs
Logs page usage
//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))
})
})
}
})
The operating results are as follows:
5. Phone preview
On the left menu bar of the developer tool, select "Project" and click "Preview". After scanning the code, you can experience it in the WeChat client.
At present, the preview and upload functions cannot be realized yet, and we need to wait for the next update of the WeChat official.
As you can see, the development guide given by WeChat official is still very simple. Many details, codes, and functions are not clearly displayed. So it's time to show off the strength of Boca. Development tutorial officially begins!
Chapter I: PreparationIt is important to be prepared. To develop a WeChat application number, you need to download the developer tools on Weixin's official website (weixin.qq.com) in advance.
1. Download the latest WeChat developer tool. After opening, you will see this interface:
2. Click on the "New Web+" item and the following screen appears:
3. The contents of this page need to pay attention
AppID: Fill in according to official explanation.
Appname: The name of the project's outermost folder. If you name it "ABC," all subsequent project contents will be stored under the "/ABC/..." directory.
Local development directory: The project is stored in a local directory.
Note: Again, if you and the team members work together to develop the project, it is recommended that you use the same directory name and local directory to ensure the coherence of collaborative development. If you have a project before, the import process is similar to the above, and will not be repeated.
4. After all the preparations are completed, click on the "New Project" button and the popup box "OK" will appear .
5. As shown in the above figure, at this moment, the WeChat developer tool has automatically built an initial demo project for you . This project contains the basic content and framework of a WeChat application project. Click on the project name ("cards" in the picture) to enter the project, you can see the basic structure of the entire project: Â
The current user group of WeChat is very large. After WeChat launches the public number, everyone can see it, and it also promotes the rapid development of h5. With the increasing complexity of the needs of the public number business, the application number is now coming. When our team specifically looked at the document one or two times, it found that the way it provided to developers was also undergoing a complete change. From the operation of the DOM to operating data, it was difficult to achieve many h5 on the public number based on a bridge tool provided by WeChat. The functions implemented are somewhat similar to hybrid development. Unlike the hybrid approach, the open interface of WeChat is more rigorous. The structure must use the components he provides to us. External frameworks and plugins cannot be used here. Let's develop The DOM is completely separated from the operation, and the development thinking has changed greatly.
If a worker wants to do good, he must first sharpen his tools. It is very important to understand its core function, first understand its entire operation process.
Life cycle:
In index.js:
Console tool can see:
In the home console, you can see that the order is App Launch-->App Show-->onload-->onShow-->onReady.
The first is the startup and display of the entire app. The launching of the app can be configured in app.js, followed by the loading display of each page and so on.
Imagine being able to handle a lot of things here, such as loading boxes and the like can be achieved.
routing:
Routing has always been a core point in project development. In fact, there are very few introductions of WeChat to routing. We can see that WeChat is well encapsulated in routing, and it also provides three jump methods.
wx.navigateTo(OBJECT): Keep the current page, jump to a page in the application, use wx.navigateBack to return to the original page.
wx.redirectTo(OBJECT): Closes the current page and jumps to a page within the application.
wx.navigateBack(): Closes the current page and rolls back the previous page.
These three are basically enough to use, and the micro-encapsulation is very good in terms of routing. Developers do not need to configure routing at all, and often many frameworks are complicated to configure in routing.
Components:
The WeChat component is also very comprehensive in terms of providing components. It basically meets the needs of the project. Therefore, the development speed is very fast. It can be browsed several times before development and the development efficiency will be very good.
other:
Any external frameworks and plugins are basically unusable, even native js plugins are also very difficult to use, because in the past our js plugins were basically all in the form of an operation dom, and the architecture of WeChat application number is not allowed to operate this time. Any dom, even the dynamically set rem.js we used to use before is also not supported.
This WeChat also provides WebSocket, you can use it to chat directly, and the space for development is very large.
Compared with the public number, we found that the development and application number is componentized, structured, and diversified. The New World is always full of surprises. More eggs are waiting for everyone to discover.
Then start working on some simple code!
1. Find the project folder and import it into your editor. Here, I use the Sublime Text editor. You can choose your favorite editor according to your own development habits.
2. Next, you need to adjust the project structure according to your project content. In the sample project, the "card_course" directory contains mainly the "tabBar" page and some configuration files for the application.
3. The "tabBar" of the sample project is five menu buttons:
4. Find the "app.json" file to configure the five menus. Find ""tabBar" in the line of code:
You can change it according to actual project requirements, where:
"Color" is the bottom font color, "selectedColor" is the highlight color of the page, "borderStyle" is the color of the line above the menu, and "backgroundColor" is the background menu bar color. The text description is more abstract. It is recommended that you debug and review its effects one by one, and deepen the impression.
The order of the codes under "list" must be placed one by one and cannot be changed arbitrarily.
".wxml" suffix is ​​hidden in the file name after ""pagePath"". This is a humanized point in the WeChat development code - it saves time for you to write code without having to frequently declare a file suffix.
""iconPath"" is the icon path for which the page is not displayed. The two paths can be directly network icons.
""selectedIconPath" is the path of the highlighted icon currently displayed on the page, which can be removed. After removal, the icon ""iconPath" is displayed by default.
""Text" is the title of the page. It can also be removed. After removal, the icon will be displayed purely. If only one of them is removed, the position will be occupied.
Note: The bottom menu of WeChat supports up to five columns (five icons), so you must consider the layout of the menu bar before you design the UI and basic architecture of the WeChat application.
Here by the way, our team is currently designing two sets of people. Codes are allocated at the same time. According to the design guide given by WeChat, we design the sample drawing on the other side. We will make the UI part code according to the sample image. It is relatively high and does not require the UI to be fully drawn. Both sides can be synchronized!
5. According to the above code rules, I have done the basic structure of the sample project for your reference:
6. After the "Json" file is configured, the basic structure of "card_course" is shown in the figure above. Unwanted subsets can be deleted temporarily. The missing subset requires you to create new ones. When deleting a subset, remember to check that the related content in "app.json" has been deleted along the way.
Note: I personally suggest that you create a new "wxml" file and add the corresponding "js" and "wxss" files together. Because the configuration feature of WeChat application number is to resolve to a "wxml" file, it will also be Find the "js" and "wxss" files with the same file name in the same directory, so the "js" file needs to be pre-configured in "app.json" in time.
When writing "wxml", the interface code provided by the WeChat application number can be used, most of which is the previous "div", and we now use "view". When other subsets are needed, they can be selected according to the interface provided by WeChat.
Use the "class" name to set the style. The "id" name is of little use here. The main operating data, do not operate "dom".
7. The above is the "wxml" code on the top page of the example project. As you can see from the figure, the amount of code to implement a page is very small.
8. The "Wxss" file is the imported style file. You can also write the style directly in it. The example uses the import method:
9. Refresh the code and refresh it. You can see that the "view" tag with no background turns to pink directly.
Note: After modifying the contents under "wxml" and "wxss", direct F5 refresh will directly see the effect. If "js" is modified, click the restart button to see the effect.
10. In addition, public styles can be directly referenced in "app.wxss".
11. The "Js" file needs to be pre-configured in the ""page" of the "app.json" file. For clarity of the project structure, I created four other page files in the same directory as the index home page of the example project, as follows:
After the above steps, the five bottom menus in the case are all configured.
Lei Feng Net Note: This article is authorized by Baccarat authorized by Lei Feng. If you need to reprint, please contact the original author, and indicate the author and source. You must not delete the content.
We specialize in cable assembly overmolding. Our customized molded cables are built precisly following customers' spec.Experienced proposal can be offered to customers for evaluation by considering stable quality and competitive price.
we have internal design, prototype, and manufacturing the widest range of molded harnesses, also a diversified line of strain / flex reliefs and grommets.
Molded Cables,Stranded Round Molded Cables,Molded Patch Cord Cable,4 Pole Waterproof Molded Cable,Waterproof Connectors
ETOP WIREHARNESS LIMITED , https://www.etopwireharness.com