Micro-Credit program development examples of details _ other comprehensive

"Applet" Cracked IDE + demo:https://github.com/gavinkwoe/weapp-ide-crack.git
Resource rollup: Https://github.com/Aufree/awesome-wechat-weapp
Official Simple Tutorials · mina:http://wxopen.notedown.cn/
Hello applet-Unofficial: http://www.helloxcx.com
Micro-letter Application Number development tutorial: https://my.oschina.net/wwnick/blog/750055

Resources from the Web, take it!

Easy to get a bit, Roar ~:

JS: Business Processing

Index.js
//Get application instance
var app = Getapp ()
Page ({
 data: {
  motto: ' Hello World ',
  userInfo: {name: ' History ',
        desc: "The front of the spring is coming!" \ nthe front end is going to rot the street!! ",
     avatarurl:" Http://img2.3lian.com/2014/gif/10/9/25.jpg "}
 },
 //event handler function
 bindviewtap:function () {
  wx.navigateto ({
   URL: ' ... /logs/logs '
  }
 },
 onload:function () {
  console.log (' OnLoad ') var that =-this
   // Invokes the method that applies the instance to get the global data
  app.getuserinfo (function (userInfo) {
   //Update data
   that.setdata ({
    userInfo: UserInfo
   })
   that.update ()
  }
 )
})

Wxml: Creating a layout

<!--index.wxml-->
<view class= "container" > <view bindtap= "Bindviewtap" class= "userinfo"
 >
  <image class= "Userinfo-avatar" src= "{Userinfo.avatarurl}}" background-size= "Cover" ></image>
  <text class= "Userinfo-name" >{{userInfo.name}}</text>
  <text class= "Userinfo-desc" >{{ userinfo.desc}}</text>

 </view>
 <view class= "Usermotto" >
  <text class= "User-motto" ">{{motto}}</text>
 </view>
</view>

WXSS: Setting Styles

/**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 screenshot

Small Program Component Demo Demo screenshot

The above is a simple example of micro-letter procedures, I hope to help start learning micro-letter development of friends, thank you for your support of this site!