Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "WeChat Mini Programs introduction Development case Analysis", so the editor summarizes the following contents for you. The content is detailed, the steps are clear, and it has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "WeChat Mini Programs entry Development case Analysis" article.

Register WeChat Mini Programs

If you do not have an account for Wechat public platform, please go to the home page of Wechat public platform and click the "register now" button to register. The registered account types can be Subscription account, service number, Mini Program and WeCom. We can choose "Mini Program".

Then fill in the account information, it should be noted that the mailbox must be not registered by Wechat public platform, not bound by personal WeChat, and each mailbox can only apply for one Mini Program.

After activating the mailbox, select the subject type as personal Type and register the principal information as required. The subject information cannot be modified after submission, and the subject will become the only legal subject and contracting subject for you to use the services and functions of Wechat public platform, and shall not be changed or modified when other business functions are activated later.

All OK can directly enter the management platform of Mini Program. If the direct jump fails, you can also log in manually from the Wechat public platform. Fill in the basic information of Mini Program, including name, icon, description, etc. After the submission is successful, add developers. The developer defaults to the administrator, and we can also add binding developers from here. This is an operation that only the administrator has permission to do.

Then click "Settings" in the left navigation bar, find the development settings, and get the AppID of Mini Program.

Wechat developer tools

Download Wechat web developer tools and download the corresponding installation package according to your operating system for installation.

Open the developer tool, use Wechat scan code to log in to the developer tool, and get ready to develop your first Mini Program!

The first Mini Program new project

Open the developer tool, select "Mini Program Project", and click "+" in the lower right corner to create a new project.

Select an empty folder as the project directory, fill in the AppID, and then fill in a project name, for example, I call it GoZeroWaster here. Click OK to enter the main interface of the tool.

Project directory structure

WeChat Mini Programs's basic file structure and project directory structure are described as follows:

. ├── app.js # Mini Program logical file ├── app.json # Mini Program configuration file ├── app.wxss # global public style file ├── pages # stores each page of Mini Program │ ├── index # index page │ │ ├── index.js # page logic │ │ ├── index.wxml # page structure │ │ └── index.wxss # page style sheet │ └── logs # logs page │ ├── logs.js # page logic │ ├── logs.json # page configuration │ ├── logs.wxml # page structure │ └── logs.wxss # page style sheet ├── project.config.json └── utils └── util.js

There are three files in the root directory: app.js, app.json, and app.wxss. Mini Program must have these three files describing APP and put them in the root directory. These three are application-level files, and parallel to them is a pages folder that holds the pages of Mini Program.

We can make an analogy with web front-end development technology:

Wxml is similar to a HTML file and is used to write tags and skeletons for pages, but only with components encapsulated by Mini Program itself.

Wxss is similar to CSS files and is used to write page styles, except that css files are replaced with wxss files

The js file is similar to the JavaScript file in front-end programming and is used to write the page logic of Mini Program.

The json file is used to configure the style and behavior of the page.

Target result

Let's first take a look at the final goals and results, which is very simple, a total of two pages:

(in order to enable the majority of programmers to protect the environment and love life, I specially chose the theme of "Zero garbage Life" to do Demo)

Step decomposition

Break down the target results:

Personal center

Life guide

Simulated pop-up window

Preview picture

Head and footer

In the preview of the target result, we see that both pages have common parts-the header and footer. So before building the content of the page, let's deal with the header and footer. We can easily guess that these two parts belong to the global configuration of Mini Program, so we need to modify the app.json file.

The initial content is as follows:

{"pages": ["pages/index/index", "pages/logs/logs"], "window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "# fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "balack"}}

The pages property is used to set the page path, which is an array, each of which is a string that specifies which pages the Mini Program consists of. The first item of the array represents the initial page of Mini Program. When adding or decreasing pages in Mini Program, you need to modify the pages array.

The window property is used to set the status bar, navigation bar, title, and window background color of Mini Program.

Let's change the title and color of the page header. At the end of the page, we make a tab bar to switch between pages. This property is called tabBar. The code is as follows:

{"pages": ["pages/index/index", "pages/logs/logs"], "window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "# 2f2f8f", "navigationBarTitleText": "GoZeroWaste", "navigationBarTextStyle": "white"}, "tabBar": {"color": "# bfc1ab", "selectedColor": "# 13b11c", "backgroundColor": "# 1f1f4f" "list": [{"pagePath": "pages/index/index", "iconPath": "image/icon_component.png", "selectedIconPath": "image/icon_component_HL.png", "text": "personal Center"}, {"pagePath": "pages/details/details", "iconPath": "image/icon_API.png" "selectedIconPath": "image/icon_API_HL.png", "text": "Life Guide"]}}

(the pictures used are placed in the image directory of the project, and you can also use your own pictures.)

The properties of several tabBar used here are color, selectedColor, backgroundColor, and list,list are an array that is mainly used to set the navigation path.

After CTRL + S is saved, the simulator will refresh automatically, and you can see the effect immediately.

Personal center

For simplicity, let's implement the "personal Center" page in the pages/index directory. Double-click to open index.wxml, and the initial content is as follows:

Get the avatar nickname {{userInfo.nickName}} {{motto}}

There is already some code here, although we may not understand it now, but we know that this is the source code of the page now. Let's comment out the "Hello World" section and add what we want to show:

Get the avatar nickname {{userInfo.nickName}} {{company}} {{position}} {{lesson}}

Here {{company}}, {{position}} and {{lesson}} are used as placeholders, respectively, similar to the template language of Django. Of course, it can also be replaced directly with the corresponding characters, but we want to follow the {{motto}} practice so that you know where to modify the data. Yes, it is in the index.js file:

Page ({data: {motto: 'Hello World', company: "GoZeroWaste", lesson: "21 days of Zero garbage Life Guide", position: "garbage Wizards", / *. * /}

The components in the wxml file are similar to those in web development, while the components are used to write text, and it should be noted that only nesting is supported within the components. Of course, insert pictures are available, and the pictures should be saved to the image directory, otherwise they cannot be uploaded during testing.

{{lesson}}

Mode='widthFix' means to scale to fit the screen size by keeping the width unchanged, the height automatically changing, and keeping the aspect ratio of the original image unchanged.

Next, you need to modify the index.wxss file to set the style:

/ * * 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;}. ID_Badge {padding-top: 20rpx; color: blue;}. ID_info {display: flex; flex-direction: column; align-items: center }. Pics {width: 400rpx;}

Save the refresh and the personal Center page is complete.

Life guide

In the original project, there are only index and logs directories under the pages directory, so we also need to create a directory for the second page.

There are two ways to create a page:

On the pages diagram of the directory structure, create a new directory, and then create a page composition file one by one under the directory

Under app.json, add directly

The second method is recommended to modify the app.json file:

{"pages": ["pages/index/index", "pages/logs/logs", "pages/details/details"]

After saving the refresh, you will find that this page is automatically created in the directory structure. Correspondingly, modify the link to tabBar in app.json (we've actually done that):

{"pagePath": "pages/details/details", "iconPath": "image/icon_API.png", "selectedIconPath": "image/icon_API_HL.png", "text": "Life Guide"}

Then modify the title of the details.wxml settings page:

Guide to living with zero garbage for 21 days

Modify the details.wxss setting style:

/ * pages/details/details.wxss * / .title {display: flex; flex-direction: column; align-items: center; margin-top: 40rpx; margin-bottom: 40rpx; font-size: 40rpx;}

This page is a list display page, let's first prepare the data in the details.js file:

/ / pages/details/details.jsPage (initial data of {/ * page * / data: {showModalStatus: false, list: [{id: 0, name: "write a 'junk diary', introduce:" Zero garbage is not a grand project, but made up of small habits and choices in daily life. The hardest part is to take the first step. " , src:'.. / image/day01.jpg', showModalStatus: false, catalog: [{section: "1. Xxx"}, {section: "2. Xxx"}, {section: "3. Xxx"}, {section: "4. Xxx"},]}, {id: 1 Name: "bring your own shopping bag", introduce: "in our house At that time, most of the trash cans were plastic bags, and when these bags followed me home, they could hardly escape the fate of being thrown into the dustbin. " , src:'.. / image/day02.jpg', showModalStatus: false, catalog: [{section: "1. Xxx"}, {section: "2. Xxx"}, {section: "3. Xxx"}, {section: "4. Xxx"},]} / * omit * /]}

Next we will use list rendering (wx:for) to bind this data to an array and render it repeatedly on the page. Modify the details.wxml file:

{{item.name}} {{item.introduce}}

The subscript variable name of the current item of the default array defaults to index, and the variable name of the current item of the array defaults to item.

Modify the details.wxss file to add styles:

.lesson {height: 190rpx; padding-left: 20rpx;} .lessonPic {position: absolute; height: 150rpx; width: 150rpx;} .lessonName {position: absolute; margin-left: 220rpx; font-size: 35rpx;} .lessonIntroduce {position: absolute; margin-left: 220rpx; margin-top: 60rpx; margin-right: 20rpx Color: rgb (185,161,161); font-size: 28rpx;}

All right, the second page is complete.

Simulated pop-up window

Next, we want to simulate the effect of a pop-up window on the "Life Guide" page, which is not displayed normally, but only appears when you click, press "OK" below and it will disappear.

After implementing this function, we need to bind an event handler function bindtap in the component. When we click on the component, Mini Program will find the corresponding event handler function in the corresponding Page on the page.

We first introduce a boolean variable showModalStatus in details.js for each column of data to describe the corresponding pop-up window state, and the initial value is false, which means it is not displayed. At the same time, the outer layer also adds a showModalStatus variable with an initial value of false to achieve the masking effect. As follows:

Data: {showModalStatus: false, list: [{id: 0, name: "write a junk diary", introduce: "Zero garbage is not a grand project, but made up of small habits and choices in daily life. The hardest thing is to take the first step." , src:'.. /.. / image/day01.jpg', showModalStatus: false, catalog: [{section: "1. Xxx"}, {section: "2. Xxx"}, {section: "3. Xxx"}, {section: "4. Xxx"} ]}

Then insert the pop-up window in details.wxml and use conditional rendering (wx:if) to determine whether to render (display) the pop-up window. At the same time, data-statu is added to each item to represent the status of the pop-up window. As follows:

{{item.name}} {{item.introduce}} {{item.name}} {{catalog.section}} OK

Add powerDrawer event handling to details.js, including displaying and closing events:

PowerDrawer: function (e) {console.log ("clicked"); var currentStatu = e.currentTarget.dataset.data; var index = e.currentTarget.id; / / close if (currentStatu = = 'close') {this.data.list.showModalStatus = false; this.setData ({showModalStatus: false, list: this.data.list,}) } / / display if (currentStatu = = 'open') {this.data.list.showModalStatus = true; this.setData ({showModalStatus: true, list: this.data.list,});}}

Finally, style the pop-up window and mask layer in details.wxss:

.drawer _ box {width: 650rpx; overflow: hidden; position: fixed; top: 50%; z-index: 1001; background: # FAFAFA; margin:-150px 50rpx 0 50rpx;} .drawer _ content {border-top: 1.5px solid # E8E8EA; height: 210px; overflow-y: scroll / * scrollable beyond the height of the parent box * /} .btn _ ok {padding: 10px; font: 20px "microsoft yahei"; text-align: center; border-top: 1.5px solid # E8E8EA; color: # 3CC51F;} .drawer _ screen {width: 100%; height: 100%; position: fixed; top: 0; left: 0 Z-index: 1000; background: black; opacity: 0.5; overflow: hidden;}

OK, the simulation pop-up window is also realized.

Preview picture

The final step is to implement the image preview and image saving functions on the first page, and add a click event previewImage to the image in index.wxml.

Add an imgalist entry to index.js (we upload the QR code image of the official account directly to CSDN's image server) and implement previewImage event handling. As follows:

Page ({data: {motto: 'Hello World', company: "GoZeroWaste", lesson: "21 days of Zero garbage Life Guide", position: "garbage Wizards", imgalist: [' https://img-blog.csdnimg.cn/20190109104518898.jpg'], userInfo: {}, hasUserInfo: false CanIUse: wx.canIUse ('button.open-type.getUserInfo')}, previewImage: function (e) {wx.previewImage ({current: this.data.imgalist, / / http link for currently displaying pictures urls: this.data.imgalist / / list of http links for pictures to be previewed})} The above is the content of the article "case Analysis of WeChat Mini Programs's getting started with Development" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to 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.