WeChat Mini Program Development (4) Practical Guide to Mini Program Development

Find the created demo folder and import the project into your editor. The Sublime Text editor is used here.

At this time, you need to change the structure according to your own project requirements. Below the project root directory is the homepage rendering Several tabBar pages, as well as some configuration files of the app, such as the tabBar of the business card box project are 3 switching menus

We first find the app.json file, open it, configure these menus, and configure the tabBar. You can directly change the configuration file to your own design.

App.json has several configuration items:

• Pages: This is written js File, the suffix .js does not need to be used here. Configure the correct path and you can call it normally (if it cannot be called, a page error will be reported directly after restarting the WeChat developer tool). Window: Configure some styles at the top, the documentation is more detailed. tabBar: Several configurations at the bottom are well known. networkTimeout: No use has been found yet. It is recommended to read the documentation. Make additions and changes based on actual project needs. iconPath and selectedIconPath: The bottom menu button image is highlighted when switching clicks. * text: You can remove it. If you remove it all, you will find that the height of the bottom tabar will be reduced a lot.

After the Json file is configured, create the file according to the project. Demo: It stores fake data. The development tools of this issue support require. The fake data is in the form of .js file. The data structure inside is consistent with json. Just expose the data.

#Then get the data require and come in Yes, this is very convenient to use; Images: image path; Page: pages other than tabar; Servise: service delivery layer (used when jointly debugging real data with the background); Wxss: some public css files; everyone found out after seeing this Each page is associated with three different suffixes. Separating pages, css, and js can only be done in this way at present. It is a standard for WeChat application accounts.

The Wxss file imports the style file you wrote, or you can write styles directly in it.

#Js files must all be configured in pages to take effect.

Next chapter: WeChat mini program home page development.

Chapter 4 WeChat Mini Program Home Page Development

After various preparations and configurations, we came to the home page development. First, you need to achieve the homepage renderings as follows:

##Template There are many business cards and you need to use a template. The basic components provided by WeChat here are roughly input (search box), action-sheet (on the right is a bottom drop-down menu, which requires a drop-down menu), Scroll-view (ABC on the right) Jump), (there are still some problems with this implementation, which are being overcome).

View is a block element, a style for the entire search box.

Business card holder: Since this project focuses on the business card function, it is used in many places, so the business card needs to be separated by template.
• Template: Define a template. The name of the template is actually a scope.

  Block: Loop control, there are many business cards, they must be looped out, which is similar to the loop of many front-end frameworks that operate data. Supports custom attribute data, which is used to determine online and offline business cards. There are some data introductions in View, which support ternary operators.

It is very convenient to introduce template. is is the same as name, and data is filled with data passed by nameData.

Everything is bound to data as the center point.

The specific operation to get the data depends on your data structure:

The data structure and json data here The structure is the same,

If you want to pass it to the page, it is

this.<a href="http://www.php.cn/code/8209.html" target="_blank">set</a>Data({nameData:card_list_name.data.cards,timeData:card_list_time .data.cards});

Because the page traverses nameData, timeData

You can look at the printed data structure , parsed and passed according to your structure.

#You can also take a look at some operations on data here. (This must be operated according to the defined json data format)

The style of the business card needs to be used in many pages and placed in common.css. This common.css All pages need to use some initialization settings. It can be mapped to the global APP only after it is referenced in app.wxss.

Search box: where bindChange is the event when the input box changes. The bindchange provided by WeChat still has minor issues in terms of support. Currently, this event can only be triggered by losing focus. It will be improved in the future and the function will be implemented first.

Write events in index.js

bindInputChange:function(e){ //发生搜索事情var self = this; //this绑定，这个this指向微信的提供window var Text = e.detail.value.toUpperCase(); //取到输入的内容if(Text==""){ //如果输入为空 一些东西需要显示 否则不显示show_letter = "block"; }else{show_letter = "none";}this.setData({show_letter:show_letter, showSheet:true});var res = nameData; 获取到传递的数据if(data_type=="name"){}else if(data_type=="time"){res = timeData; };for(var k in res){ //for-in循环取到data里面的cardsvar data = res[k].cards; for(var i = 0;iIf(data[i].userName!=null && data[i].userName.indexOf(Text)!=-1){ data[i]["display"] = "block"; //存在就是赋值显示}else{data[i]["display"] = "none"; // 不存在赋值不显示}}}}

Menu bar: do the menu bar, use the drop-down menu component action-sheet provided by WeChat, and the conditions for it to be triggered are here.

Everything starts with the binding event:

还是得先布好局才能被调动

![](http://upload-images.jianshu.io/upload_images/3113151-700fe4381ecb70c1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Js 配置：

![](http://upload-images.jianshu.io/upload_images/3113151-a29c120dbfb3e6ff.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Data 初始化数据：

![](http://upload-images.jianshu.io/upload_images/3113151-7ac34cbc72e90e98.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

这里得取非，直接设置 false 调不出来: 调用事件。

![](http://upload-images.jianshu.io/upload_images/3113151-bfdd0f2e6ce40a96.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

调出来还得去掉它啊：如下相同即可

![](http://upload-images.jianshu.io/upload_images/3113151-e2536f3cad3ab6d0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

取消直接上事件即可。（分为菜单栏外部与底部）

![](http://upload-images.jianshu.io/upload_images/3113151-07ae959331529a76.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![](http://upload-images.jianshu.io/upload_images/3113151-5ea6156d3a6cf559.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

//好了，就是这么简单。实现效果简单，体验效果确实非常不错。

![](http://upload-images.jianshu.io/upload_images/3113151-31724704aa72189e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

还需要个 loading 效果（暂时没做动画，后期再考虑。）Loading 布局

![](http://upload-images.jianshu.io/upload_images/3113151-6b9e098615e2a5ce.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

首页的最外层 view

![](http://upload-images.jianshu.io/upload_images/3113151-ca2127936d0fa74b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

根据微信的生命周期

"Onload:function(e){this.setData({toastDisplay:”block”,htmlWrapDisplay:”none”})}, onShow:function(e){this.setData({toastDisplay:”none”,htmlWrapDisplay:”block”})}

The loading bar is completed.

Scan and directly call the camera function. From here you can see the camera provided by WeChatapi It is very fast to use, just follow the Just configure it as needed.

#After clicking to scan, you can see the following effect in the developer tools.

This is explained here, the DOM length is limited, the structure of the page is too long, and it cannot be rendered.

#The ABC jump on the left (still being improved). There is also a function of swiping left to delete a business card. It is a pity that WeChat does not provide this function, which is very practical on the mobile terminal. I will have to spend some time to write it down myself later (will be improved later).

Okay, that’s it for today’s update.

【Related recommendations】

1. Complete source code download of WeChat mini program

2. WeChat mini program demo: card Card car

3. Simple left swipe operation and waterfall flow layout

###

The above is the detailed content of WeChat Mini Program Development (4) Practical Guide to Mini Program Development. For more information, please follow other related articles on the PHP Chinese website!