欧非资源网：安全、免费、专业放心的资源下载站！ 最新软件|软件分类

您的位置：欧非资源网 > 电脑专区 > 电脑教程 > 微信小程序入门基础教程：了解代码，初步学习代码

微信小程序入门基础教程：了解代码，初步学习代码 时间：2020-05-06 18:35作者：admin来源：未知人气：512我要评论(0)

我们讲到了小程序的安装以及基本的代码的编写，第一次学会了修改小程序的代码，能够将页面上显示出“helloworld”的字样，那么，今天我们学什么呢？学习代码，了解代码。

删除

要学好小程序，首先就不能依托于他人的模板，否则什么都学不会。

首先，我们需要将代码全部删除。注意：删除的是index.wxml和index.wxss里的代码，别的地方的代码别动。

小程序学习日志2：了解代码，初步学习代码

删除之后，按一下Ctrl+S，保存一下，系统就会自动保存，我们现在可以看到，页面上已经什么都没有了。

小程序学习日志2：了解代码，初步学习代码

测试

打几个字来测试一下，简答点，打入代码：<div class="box"></div> 用过前端开发的小伙伴们应该知道这个代码的意思，这个代码的意思就是块，也可以理解为区域块，我们现在设置这个代码，将文字放在这个块里，然后我们进行下一步的操作。

ps：这个代码其实不是很正规，小程序给了更为规范的代码，但是怎么说，我们是基础，先用这个，以后再改也不迟。这里的.box是样式命名，下面我们会用到这个设置的样式。

参考代码：<div class="box"></div>

小程序学习日志2：了解代码，初步学习代码

我们转到index.wxss页面里面，在最后的一行输入代码，就会形成左边的样子。注意一下，这里的height是指方框的高度，width是指方框的宽度，display是个方框，background是背景颜色。

参考代码：
  .box{
    width: 200px;
    background: red;
    height: 200px;
    display: block; 
  }

小程序学习日志2：了解代码，初步学习代码

正式讲解

1、块元素

<view>

上述讲了个样子，现在我们开始步入正轨的讲：

首先，<div></div>代码在小程序里使用是严重错误的。

小程序里的块代码应该是<view></view>

小程序学习日志2：了解代码，初步学习代码

我们将这里的样式命名为“item”。

类似，下面的这里的样式修改一下，这个时候，我们就不需要display的这个属性了，因为它本身就是个块元素。

小程序学习日志2：了解代码，初步学习代码

2、行元素

在HTML代码里面，<div>和<span>是一组好搭档，一个是块元素，一个是行元素，在小程序里是肯定没有这个<span>的，那么，小程序里的行元素是什么呢？

<text>

由图所示，这个标签可以当成行标签来用。

小程序学习日志2：了解代码，初步学习代码

3、整体样式

前面一章我们讲到了app..wxss是全局的边框，那么，我们如何使用这个整体样式呢？

在这里，我们输入以下样式代码：.box{border: 3px solid green} 这里面解释一下：border是框，3px是3像素，这里的px是像素的意思，solid是指实线，green是绿色，指边框的颜色。

参考代码：
  .box{
    border: 3px solid green
  }

小程序学习日志2：了解代码，初步学习代码

在index.wxml页面输入<view class="box">欢迎关注小编</view> 调用刚才的样式。可以看到，页面上出现了个绿色的框。

参考代码：
  <view class="box">欢迎关注小编</view>

小程序学习日志2：了解代码，初步学习代码

说明

这里的要注意一点，就是app.wxss的优先级没有index.wxss里面的优先级高，换句话说，在index.wxss里面输入样式规范要更重要。

4、插入图片

<image>

在HTML里插入图片是<img>，这里是<image>，但是要注意，这里的标签功能变多了，而且给你封装好了。

<image>标签可以调用网络的图片，也可以调用本地的图片。

调用网络的图片是可以的，但是不太建议调用百度图片。

调用网络图片的方法，首先是找到一个网络的图片，图片的结尾应该是jpg、png、而不是html。

参考代码：
  <image src="http://www.xx.com/xx/XXXXXX.jpg"></image>
这是网络图片的位置。

小程序学习日志2：了解代码，初步学习代码

那么，小程序里本地的图片怎么导入呢？

首先，你需要在目录里创建一个images的文件夹，然后将本地的图片放进这个小程序的终端文件夹里。

小程序学习日志2：了解代码，初步学习代码

可以看到，小程序里面现在的图片已经完成导入了。

参考代码：
  <image src="/pages/images/图片名"></image>

小程序学习日志2：了解代码，初步学习代码

写在最后

经过讲解，大家会了吗？

第二章我们讲了块标签的使用方法、行标签的使用方法，和样式的使用方法，还了解了图片的插入方法，那么，我们下一节会讲什么呢？敬请期待把。

小程序是我们现在生活中随处可见的功能，微信的小程序、头条的小程序等等，未来，还会有更多的APP、更多的客户端用上小程序，而我们，也将在小程序的世界里寻觅那么一点的光彩。

文章评论

查看所有0条评论>>

分类索引