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

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

浏览量:510 时间: 来源:流年若逝

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

                                                                          

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

首先在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:想要学习微信小程序的小伙伴请关注我的公众号我会不定期给大家提供学习资源。

 

 

 

 

 

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎