Un tutoriel d'introduction simple pour le développement rapide de mini-programmes WeChat

Cet article présente principalement des informations pertinentes sur des exemples détaillés de développement de mini-programmes WeChat. Les amis qui en ont besoin peuvent s'y référer

C'est une brève introduction, et c'est génial~ :

js : traitement métier

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
  motto: 'Hello World',
  userInfo: {name:'汗青',
        desc:"前端的春天来了！\n 前端要烂大街了！！",
     avatarUrl:"http://img2.3lian.com/2014/gif/10/9/25.jpg"}
 },
 //事件处理函数
 bindViewTap: function() {
  wx.navigateTo({
   url: '../logs/logs'
  })
 },
 onLoad: function () {
  console.log('onLoad')
  var that = this
   //调用应用实例的方法获取全局数据
  app.getUserInfo(function(userInfo){
   //更新数据
   that.setData({
    userInfo:userInfo
   })
   that.update()
  })
 }
})

wxml : créer une mise en page

<!--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 : définir le 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;
}

Captures d'écran de démonstration

Captures d'écran de démonstration de petits composants de programme

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!