小程序开发入门
发布于 2 年前 作者 xiulan97 4772 次浏览 来自 分享

小程序开发--编程入门

我在接触微信小程序开发前,主要做的事后端开发。所以我在学之前是一定有编程基础。写一些博客是想记录下自己前端的学习路程。在下面的代码会写下详尽的注释信息。

前端开发就类似建房子,首先搭框架、建成毛坯房,然后再进行装修。我们的 wxml 代码搭建的就是房子的毛坯房, 我们还需要使用xss来对骨架进行装修。比如说窗户要怎么设计,要安装什么风格的门,地砖颜色... 装修就是可以按功能来进行分类,然后便是深入到每一处细节。对于之前没有接触过编程的同学来说,我们可以将前端开发学习类比于学习office,ppt编辑。

WXML

<view class="title"> hello world! </view>
<image src="path_to_image" mode="widthFix"> </image> 
<!-- 注解  
	<view> </view> 用来输入文字,<image> </image> 用来插入图片;
	view中的 class 就是给我们的view分类,相同的class的“装饰”是一样的,“装饰”写在wxss文件中;
	mode="widthFix" 可以调整展示图片的宽度 
-->

使用index.wxml 和 index.wxss文件可以开发一个简单的名片小程序 

 <!-- index.wxml -->

<view class="card"> 
  <image src="../../images/bg.jpg" class="bg" mode="widthFix"> </image>
  <image src="../../images/person.jpg" class="person" mode="widthFix"> </image>
  <view class="info"> 
    <view> name: yin </view>
    <view class="tel"> TEL: 12345667 </view>
    <view> WeChat: 6342373 </view>
  </view>
</view>

WXSS

/** index.wxss **/
.card {
  margin: 10px; /** 相对屏幕的边距 **/
  position: relative; /** 相对定位 **/
}
/** 字体粗细 font-weight 字体大小:font-size **/
.title {
  font-family: PingFang SC; /** 字体 **/
  font-weight: 100;  /**字体粗细 **/
  color:red;  
  font-size: 20rpx; /** 字体大小 **/
  margin-bottom: 40rpx; /**下边距 **/
}
​
.bg
{
  width: 100%; /** 宽度 **/
  border-radius: 10px; /** 边角半径**/
  box-shadow: 0px -5px 5px black; /** 边阴影部分; 前两个px分别表示x,y轴的偏移;最后一个 5px表示阴影的大小 **/
}
.person 
{
  width: 60px;
  position:absolute; /** 绝对定位, 是和相对定位一起使用。 **/
  top:20px; /** 绝对定位中对于顶部的距离 **/
  right: 20px;  /** 绝对定位中对于右边的距离 **/
}
​
.info
{
  
  position: absolute;
  left: 30px;
  bottom: 40px;
  line-height: 20px; /** 行高 **/
}
​
.tel
{
    margin-top:10px; /** 上边距 **/
}


10 回复

写的不错 我算是学到了

刚入门的表示有学到很多,感觉写的不错~

实用型知识,学起来

棒👍🏻

👍🏼 👍🏼 👍🏼 👍🏼 👍🏼

学习到了,应该发一些记录学习过程。

实际上大部分就是html和css,但是有一些wx封装得更适合小程序开发使用

一起加油把

我个人觉得前端开发最大的难点是页面布局和样式控制。把这两个点想清楚了,再把相应的标签和组件放上去就差不多了。所以还是得多动手练习。加油!

文章总结不错~

回到顶部