沉淀笔记

您现在的位置是:首页 > 电脑教程

电脑教程

微信小程序入门基础教程:了解代码,初步学习代码

2023-02-10 10:28:22 电脑教程
我们讲到了小程序的安装以及基本的代码的编写,第一次学会了修改小程序的代码,能够将页面上显示出“helloworld”的字样,那么,今天我们学什么呢?学习代码,了解代码.rH1删除要学好小程序,首先就不能依托于他人的模板,否则什么都学不会.rH1

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


删除

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

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

rH1

rH1

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

rH1

rH1

测试

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

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

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

rH1

rH1

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

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

rH1

rH1

正式讲解1、块元素

<view>rH1

上述讲了个样子,现在我们开始步

微信推广运营方法有哪些?微信推广运营思路有哪些?

入正轨的讲:rH1

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

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

rH1rH1

rH1

rH1

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

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

rH1

rH1

2、行元素

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

<text>rH1

由图所示,这个标签可以当成行标签来用.rH1

rH1

rH1

3、整体样式

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

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

参考代码:rH1  .box{rH1    border: 3px solid greenrH1  }

rH1

rH1

在index.wxml页面输入<view

浅谈office2016与visio2016不能并存的问题分析介绍

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

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

rH1

rH1

说明

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


4、插入图片

<image>rH1

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

<image>标签可以调用网络的图片,也可以调用本地的图片.rH1

调用网络的图片是可以的,但是不太建议调用百度图片.rH1

调用网络图片的方法,首先是找到一个网络的图片,图片的结尾应该是jpg、png、而不是html.
参考代码:rH1  <image src="http://www.xx.com/xx/XXXXXX.jpg"></image>rH1这是网络图片的位置.

rH1

rH1

那么,小程序里本地的图片怎么导入呢?rH1

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

rH1

rH1

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

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

rH1

rH1

写在最后

经过讲解,大家会了吗?rH1

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

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

<


苹果13功能

苹果ID密码

【沉淀笔记】文章内容来源:https://www.chendian168.cn/diannao/16514.html
版权声明

本文由沉淀笔记发布/转载,不代表沉淀笔记立场,本站资讯除标注“原创”外的信息均来自互联网以及网友投稿,版权归属于原始作者,如果有侵犯到您的权益,请联系我们提供您的版权证明和身份证明,我们将在第一时间删除相关侵权信息,谢谢.联系地址:977916607@qq.com