编写我的第一个微信小程序

最近在学习微信小程序也算是入门级别的,于是乎跟着学习了下,下面简单的展示下自己做的第一个小程序界面

                                                                          

简单介绍下,初次使用微信小程序你可能会觉得不塌适应当然我第一次使用也是这种感觉,但是慢慢钻研一番你就会习惯的,其实用久了你就会发现其实使用微信小程序去做一个东西里面的东西跟做网页一样。说了这么多我来展示下我的目录结构

首先在pages下面新建一个名为welcome的目录,然后在下面新建如图所示的文件,我们要展示的界面代码主要写在welcome.wxml里面代码其次welcome.json主要是写一些配置文件,welcome.wxss其实就像我们学网页里面的css,welcome.js主要写一些功能函数之类的。话不多说直接呈上代码

首先是welcome.wxml

<view class="container">
  <image class="user_image" src="/images/avatar/4.png"></image>
  <text class="user_text">hello,10月</text>
  <view class="user_moto" bindtap="OnTap">
  <text class="moto">开启小程序</text>
  </view>
</view>

其次是welcome.wxss

.container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.user_image{
  height: 200rpx;
  width:200rpx;
  margin-top: 160rpx;
}
.user_text{
  margin-top: 100rpx;
  font-size: 32rpx;
  font-family: MicroSoft Yahei;
  font-weight: bold;
}
.moto{
  font-size: 22rpx;
  font-family: MicroSoft Yahei;
  font-weight: bold;
  line-height: 80rpx;
  color: #405f80;

}
.user_moto{
  margin-top: 200rpx;
  border: 1px solid #405f80;
  width: 180rpx;
  height: 80rpx;
  border-radius: 5px;
  text-align: center;
}
page{
  height: 100%;
  background-color: #b3d4db;
}

因为只是个界面所以json和js里面没写什么(ps:微信开发者工具现在还不是很完善,你在使用的时候还会出一些bug)

比如welcome.json什么都没写就会报错,解决方法就是加一对大括号

附加素材如下

ps:想要学习微信小程序的小伙伴请点击这个网站https://blog.csdn.net/wyf2017/article/details/96638855关注我的公众号我会不定期给大家提供学习资源。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值