前言

最近在学B/S相关的东西,js资料看的头疼了,做了几个小项目也是稀里糊涂的,没有过明白js中的精华.索性就先放下休息一下,看看微信小程序的制作,找了一套视频,跟着视频中老师讲的来模仿着做了一个界面.

正文

开发环境

微信官方推出了小程序的IDE开发环境,大家可以去网站上下载,这个安装就很简单了,默认安装就可以了

这个是登录后的界面,选择小程序项目进入IDE开发环境.
界面大概就是长这个样子

程序结构

主要的程序结构如图中所标识的样子

界面的样子

代码

写程序之前注意的一点就是要选择iPhone6 为开发背景,因为iPhone6 中的分辨率是比较简单的,物理分辨率的转换也是比较简单的.
首先说类似的HTML代码

<!--index.wxml-->
<view class="container"><image class="user-avatar" src='/images/4.png' ></image><text class="user-name">Hello,Langford_Hao</text><view class="moto-container"><text class="moto">开启小程序之旅</text></view>
</view>

然后是类似css代码,其实完全可以理解为css代码只是名称不一样而已.

/**index.wxss**/
.container{display:flex;flex-direction:column;align-items:center;
}.user-avatar{width:200rpx;height:200rpx;margin-top:160rpx;
}
.user-name{margin-top:100rpx;font-size:32rpx;font-family:MicroSoft Yahei;font-weight:bold;
}
.moto-container{margin-top:200rpx;border:1px solid #405f80;width:150px;height:30px;border-radius:5px;text-align:center;
}
.moto{font-size:22rpx;font-family:MicroSoft Yahei;font-weight:bold;line-height:40rpx;color:#405f80;
}
page{height:100%;background-color:#b3d4db;}

在接下来就是js的相关代码了,当然我的js中只有一个page,也是因为这个界面比较简单.

//index.js
Page({})

utils中的代码

app.json

{"pages":["pages/index/index"],
"window": {"navigationBarBackgroundColor": "#b3d4db"
}
}

app.wxss

/**app.wxss**/
.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box;
}

结尾

其实这些对于一个前端知识掌握的特别扎实的同学来说很简单的,但是对于我这个半路出家的新手来说是可以理解和正常写出来的代码,毕竟是刚开始学习前端的一些东西.继续努力,通过业余时间不断的学习总结.未来一片光明,加油

微信小程序开发--欢迎界面相关推荐

微信小程序开发登录界面mysql_微信小程序欢迎界面开发的实例详解
微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现逻辑的实现样式的实现 1.布局的实现整个布局 ...
微信小程序开发界面介绍
这里是引用主要是简单的介绍一下微信小程序开发界面的各个文件先看下这个图片这是最简单的目录了 pages: 所有的页面都要在这里面创建,在这里面创建的页面需要在app.json里面添加一下路径如下 ...
2、微信小程序开发界面
2.微信小程序开发界面针对于上节需要补充的点在新建微信小程序时,要注意区分微信公众号IP和微信小程序IP.我们在开发小程序的时候是要用微信小程序IP不然编译不了哈哈哈. 左边是模拟器的视图,右边是 ...
微信小程序开发工具调试界面鼠标看不见
微信小程序开发工具调试界面鼠标看不见参考该贴<模拟鼠标消失> 解决方法: 打开"控制面板",在右上角搜索"鼠标" 点击"鼠标" ...
uniapp微信小程序开发如何解决input框或者（textarea）框输入时界面被顶起，输入法遮盖输入框的问题？
最近在写微信小程序开发,客服吐槽,点击输入时界面总是被顶起来,输入框也被遮挡了一半,以下是解决方案. 首先将输入框设置为不向上顶页面的参数如下输入框参数 :adjust-position=" ...
微信小程序开发：简单列表界面的实现
最近,想了解下微信小程序的开发. 看了下官网的组件和API介绍,想通过一个简单的列表展示,来学习下如何开发微信小程序. 先来看下最后的效果(使用的测试数据,后期可改为http请求返回的数据). 底部的 ...
微信小程序开发的完整流程介绍，新手必读
自从跳一跳小程序游戏出现后,一夜之间,小程序就变得家喻户晓了,功能开发也越来越丰富,在微信搜一搜就会发现许多大品牌早已有自己的小程序了,越来越多的企业和商家都看中了这个风口,想快速开发出一款属于自己的 ...
微信小程序开发系列一：微信小程序的申请和开发环境的搭建
我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序 ...
python天气查询小程序加背景图_微信小程序开发背景图显示功能
这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image只能 ...

微信小程序开发--欢迎界面

前言

正文