Quick development of WeChat applets

This article mainly introduces detailed information about small program development instances. For more information about small program development instances, see this article.

Just a little bit ~ :

Js: business processing

// Index. js // Obtain the application instance var app = getApp () Page ({data: {motto: 'Hello World', userInfo: {name: 'hire', desc: "Spring is coming! \ N front-end is about to crash !! ", AvatarUrl:" http://img2.3lian.com/2014/gif/10/9/25.jpg "}}, // Event Processing function 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 ()})}})

Wxml: create a layout

 
  
    
     
   
    {{userInfo.name}}
     
   
    {{userInfo.desc}}
    
   
    
   
    {{motto}}
    
  
 

Wxss: 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-name { color: #aaa; font-size: 30rpx; margin: 30rpx;}.userinfo-desc { color: #f00; font-size: 50rpx; line-height: 70rpx;}.usermotto { margin-top: 200px;}

Demo

The above is the details of the Quick Start tutorial for small program development. For more information, see other related articles in the first PHP community!