WeChat applet case study: page building

This article uses an example to illustrate how to build a page for a small program. First, let's take a look at the page effect to be achieved in this article: This article uses a practical example to explain how to build a page for a small program. First, let's take a look at the page effects to be achieved in this article:

The bottom label is a tabBar. The implementation is relatively simple, just a simple configuration. App. json

{"Pages": ["pages/function", "pages/pay", "pages/account", "pages/index ", "pages/logs"], "tabBar": {"color": "#464a56", "selectedColor": "#6595e9", "backgroundColor ": "# FFFFFF", "borderStyle": "white", "list": [{"pagePath": "pages/function", "text": "function ", "iconPath": "images/tab_function_default.png", "selectedIconPath": "images/tab_function_sel.png" },{ "pagePath": "pages/pay", "text ": "receipt", "iconPath": "images/tab_consume_default.png", "selectedIconPath": "images/tab_consume_sel.png" },{ "pagePath": "pages/account ", "text": "Account", "iconPath": "images/tab_account_default.png", "selectedIconPath": "images/tab_account_sel.png"}]}, "window": {"navigationBarBackgroundColor ": "#6595e9", "navigationBarTextStyle": "white", "navigationBarTitleText": "V50", "backgroundColor": "# eeeeee", "backgroundTextStyle": "light "}}

It is worth noting that pages accepts an array, each of which is a string to specify which pages the applet consists. Each item indicates the path + file name of the corresponding page. The first item of the array indicates the initial page of the applet.
The pages array must be modified to add or remove pages in the applet.
The file name does not need to be suffixed, because the framework will automatically look for four files in the path. json,. js,. wxml, and. wxss for integration.
Page title:

How to implement the title of the page title? Let's take a look at the official documentation.

So it turns out! We only need to put all common page configurations in page. json, and then configure the unique properties of each page in the. json file of each page. Because the window attribute of the general page has been configured in app. json above, you only need to configure the page title in function. json:

{"NavigationBarTitleText": "navig "}

Carousel images
Next we will implement the carousel image at the top. A swiper component is provided to implement carousel images.

The code came out: function. wxml

     
        
           
          
       
  
 function.js//function.jsPage({  data: {    indicatorDots: true,    autoplay: true,    interval: 5000,    duration: 1000,    imgUrls: [       'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',       'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',       'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'     ],    },})

That's right. it's so easy to play a small program carousel! Some may ask: "The Carousel image uses a url address. what if I want to use a local image? Can it be implemented? "
This official document is not described, but we have tested it and can implement it. The code is as follows:

imgUrls: [    '../../images/adv_50.png',    '../../images/adv_60.png',    '../../images/adv_80.png' ],

Intermediate function module
The eight functional modules in the middle, similar to the Android GridView effect. This document uses a circular method to implement function. wxml.

     
          
            
   
    
{Function. name }}
       
    
 Function. jsfunctions: [{"name": "card consumption", "pic_url ":'.. /.. /images/icon_consume.png '}, {"name": "withdrawal", "pic_url ":'.. /.. /images/icon_withdrawals.png '}, {"name": "transaction record", "pic_url ":'.. /.. /images/icon_records.png '}, {"name": "Real-name authentication", "pic_url ":'.. /.. /images/icon_auth.png '}, {"name": "Airline Ticket", "pic_url ":'.. /.. /images/icon_airplane.png '}, {"name": "Train Ticket", "pic_url ":'.. /.. /images/icon_train.png '}, {"name": "mobile phone recharge", "pic_url ":'.. /.. /images/icon_phone_recharge.png '}, {"name": "", "pic_url ":'.. /.. /images/icon_water.png '}] function. wxss/** function. wxss **/. container {height: Pixel px ;}. slide-image {display: block; height: 280rpx; width: 100% }. function_container {display: flex; flex-wrap: wrap; width: 100% ;}. function_item {width: 25%; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 12px; box-sizing: border-box; padding-bottom: 10px; padding-top: 10px }. function_img {width: 60px; height: 60px ;}. function_name {padding-top: 10px}

Here, four functional buttons are arranged in each row through width: 25%.
Complete Code
The following layout is relatively simple, and the complete code is displayed: function. wxml

 
   
      
         
            
           
        
     
    
      
           
             
    
     
{Function. name }}
        
     
    
    
        
         
   
    
Special Business
     
    
   
 Function. wxss/** function. wxss **/. container {height: Pixel px ;}. slide-image {display: block; height: 280rpx; width: 100% }. function_container {display: flex; flex-wrap: wrap; width: 100% ;}. function_item {width: 25%; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 12px; box-sizing: border-box; padding-bottom: 10px; padding-top: 10px }. function_img {width: 60px; height: 60px ;}. function_name {padding-top: 10px }. pider {background: # f5f5f5; height: 40rpx; width: 100% ;}. specialities_layout {display: flex; flex-wrap: wrap; width: 100%; flex-direction: row; margin-left: 16px; margin-top: 16px; margin-bottom: 16px ;}. view_pider {background: # EEA9B8; height: 40rpx; width: 10rpx ;}. specialities_text {margin-left: 8px; font-size: 16px; height: auto; width: auto; margin-top: 6rpx ;}. bottom-image {height: 280rpx; width: 100% ;}. absolute-Center {margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;} function. js // function. js // Obtain the application instance var app = getApp () Page ({data: {userInfo :{}, indicatorDots: true, autoplay: true, interval: 5000, duration: 1000, // imgUrls :[//' http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg ',//' http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg ',//' http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg '//], ImgUrls :['.. /.. /images/adv_50.png ','.. /.. /images/adv_60.png ','.. /.. /images/adv_80.png '], functions: [{"name": "card consumption", "pic_url ":'.. /.. /images/icon_consume.png '}, {"name": "withdrawal", "pic_url ":'.. /.. /images/icon_withdrawals.png '}, {"name": "transaction record", "pic_url ":'.. /.. /images/icon_records.png '}, {"name": "Real-name authentication", "pic_url ":'.. /.. /images/icon_auth.png '}, {"name": "Airline Ticket", "pic_url ":'.. /.. /images/icon_airplane.png '}, {"name": "Train Ticket", "pic_url ":'.. /.. /images/icon_train.png '}, {"name": "mobile phone recharge", "pic_url ":'.. /.. /images/icon_phone_recharge.png '}, {"name": "", "pic_url ":'.. /.. /images/icon_water.png '}]}, // bindViewTap: function () {wx. navigateTo ({url :'.. /logs '})}, onLoad: function () {console. log ('onload') var that = this // call the method of the application instance to obtain the global data app. getUserInfo (function (userInfo) {// update the data that. setData ({userInfo: userInfo}) that. update ()})}})

For more details about small program cases, refer to the PHP Chinese network for relevant articles on page building!