Detailed explanation of WeChat mini-program development examples

This article mainly introduces the small program development instance detailed information, need friends can refer to the "small program" crack IDE + Demo: https://github.com/gavinkwoe/weapp-ide-crack.git
Resource Summary: https://github.com/Aufree/awesome-wechat-weapp
Official simple tutorial · MINA: http://wxopen.notedown.cn/
Hello mini-Unofficial: http://www.helloxcx.com
Application Development Tutorial: https://my.oschina.net/wwnick/blog/750055

The resource comes from the network. thank you!

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 a simple example of a small program. I hope to help you start learning development. thank you for your support for this site!

For more details about the small program development instance, please follow the PHP Chinese network!