微信小程序入门与实战(1)——欢迎页面

welcome.wxml

<!--pages/welcome.wxml-->
<view class="container">
<!--
<image class="user-avator" src="/img/welcome.jpg"></image>
-->
<l-avatar class="l-avatar" shape="circle" placement="bottom" size="180" 
          open-data="{{['userAvatarUrl','userNickName']}}"/>
 <text class="user-name">hello</text>
 <view class="moto-container" bind:tap="onTap" >
 <!--bind:tap冒泡 catch:tap非冒泡-->
  <text class="moto">welcome</text>
 </view>
</view>

welcome.wxss

/* pages/welcome.wxss */
page{
  background-color:#b3d4db;
  height: 100%;
}
.container{
  display: flex;
  flex-direction:column;
  align-items: center;
}


.user-avator{
  width:500rpx;
  height:348rpx;
  margin-top:160rpx;
}

.user-name{
  font-size:32rpx;
  font-weight: bold;
}

.moto-container{
  margin-top: 200rpx;
  border: 1px solid #405f80;
  height: 80rpx;
  width:200rpx;
  border-radius: 5px;
  text-align: center;
}


.moto{
  font-size:24rpx;
  font-weight: bold;
  line-height: 80rpx;
  color: #405f80;
}

welcome.js

默认暂无修改

welcome.json

{
  "navigationBarBackgroundColor": "#b3d4db",
  "usingComponents":{"l-avatar":"/miniprogram_npm/lin-ui/avatar/index"}
}

这里使用了lin-ui组件
参考地址：https://doc.mini.talelin.com/start/

安装：
1、打开小程序的项目根目录，执行下面的命令

npm init

2、

npm install lin-ui

3、会在根目录里生成项目依赖文件夹 node_modules/lin-ui
4、使用：在json文件中使用usingComponents引入，第一个参数是后续在wxml中使用该组件时用的名称，第二个参数是组件所在的目录