前言 不知不觉到第四篇了，回看前面几篇写的好像没有一点深度，总感觉自己是厚着脸皮在写，但是再想想自己也不是要写多么好，给多少人看，其实就是自己学习的一个总结，巩固自己的知识。顺便如果可以帮到一些同学那就更好，这就是我的初衷啊！所以我还会继续，今天就要讲讲 <image> 组件了。 <image>的作用 我好像很喜欢拿HTML里面的标签来做对比，🆗，可能已经猜到我要说什么了，没错其实<image>标签对应的就是HTML里的<img>标签嘛！它们的功能和作用基本没什么变化，都是在页面上显示一张图片。但是也有一些不同，那就是<image>的功能更加的强大，微信小程序提供了很多的属性给它，赋予了它很强的功能，比如：懒加载、图片缩放、裁剪等。详情见 文档 如何使用 这里强调的是wxml里面所有的标签  都是两两成对的，有开始标签就要有闭合标签，不然会报错的， （ps:除了<icon>）所以正确用法是这样的<image src= “图片路径”></image>，图片的路径，可以是相对路径也可以是绝对路径，看一段代码 wxml代码 [代码]<image src='https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png' ></image>[代码] 运行结果 [图片] 这里还是贴个图吧！因为有个对比好明白一点，😂。欧克，可以看到<image>是有默认宽高的！默认的宽度为300px、高度为225px 我们肯定是不能用默认的宽高的，因为我们需要的是一个美观的界面，所以… 高度自适应 <image>的高度自适应很简单就可以实现，因为只需要用到它的一个mode属性就可以完成这件事，这个属性有很多的值，而用到最多的就是mode=“widthFix”，这就是高度自适应了，来和上面对比一下吧 wxml代码 [代码]<image src='https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png' mode="widthFix"></image>[代码] 运行结果 [图片] 可以看到高度的明显变化，自适应是很有用的一个东西，其他的一些属性，可以看看文档，文档很详细，文章的上面有个传送门。当然只靠着肯定是不够的，还需要借助WXSS改变image的样式，使你的页面更加美观。 结束语 欢迎评论，也欢迎大佬提出意见。

前言 上一篇文章讲的是view组件，写的很简单我感觉应该还有一些东西没有说到，但是还是得到了一些小伙伴的支持（大神勿喷😝），我觉得很有动力，今天继续更新，聊聊 <text> 和 <image>组件。 <text>组件作用 <text>是一个文本组件，也就是说，我们在小程序里面要展示的一些文字可以用<text>包起来，然后小程序框架就可以渲染出来了，（ps:其实不包也可以渲染出来）包起来之后就可以通过wxss来改变文本的样式，搭配出漂亮的UI啦 使用 <text>组件默认是在一行显示的，如果按照HTML的意思来说的话：<text>其实是一个行内元素，而且<text>的宽高都是由里面的内容来决定的，也就是说里面没有文字的话，你的界面就不会显示<text>，下面代码大家可以更清晰的看到 wxml代码 [代码]<text class='temp'></text> <text class='textOne'>你好哇！</text> <text class='textTwo'>我还可以！</text> <text class='textThree'> 开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭互兼容，并不互斥。 </text> [代码] wxss代码 [代码].temp{ background-color: orange; } .textOne{ background-color: red; } .textTwo{ width: 400rpx; /* 设置宽高进行对比 */ height: 400rpx; background-color: blue; } .textThree{ background-color: orange; } [代码] 运行效果图 [图片] 通过上面可以看到<text>普通情况下指定宽高是没有用的，那要怎么办呢？在这里就需要wxss的display属性来控制它是行内还是块级元素了，在对应的wxss样式里面加上 display: block ; 就可以使<text>变身，现在它既可以设置宽高，也可以加外边距等等，还是通过代码看看 wxml代码 [代码]<text class='textOne'>你好哇！</text> <text class='textTwo'>我还可以！</text> [代码] wxss代码 [代码].textOne{ background-color: red; } .textTwo{ display: block; /*注意这里 */ width: 400rpx; height: 400rpx; background-color: blue; } [代码] 运行效果图 [图片] text属性 微信小程序的官方文档提供了三个属性selectable、space、decode。我个人觉得用的最多的应该就是selectable了，它的值是布尔类型，默认为false,它的作用就是设置这段文字是不是可以长按复制 wxml代码 [代码]<text class='textOne' selectable='true'>你好哇！</text> <text class='textTwo'>我还可以！</text> [代码] 真机运行图 [图片] 结语 🆗！这一篇<text>也就差不多了，小插曲：不知道为什么编辑的时候图片总是显示不出来，然后就截图保存到本地在插入了，但是图片的清晰度很感人，大家将就的看一下吧。。呜呜呜，后期我看能不能改一改。最后还是谢谢大家的支持，希望可以帮到你。期待下一篇<image>组件😍 ps:图片已经改了，但是真机运行图那个没办法了…反正就是可以复制，在模拟器上不好显示，所以。。。

前言 做过web开发的都知道HTML，在HTML中使用最多的就是div标签，它是一个容器，可以装一些东西，然后通过布局可以构建一个很美的界面web界面。而在微信小程序中想要构建一个界面出来使用的是WXML，它给我们提供了功能更加强大的组件如：view，button，text等，微信小程序团队将很多我们平时在HTML中用到的标签集成在了一个组件里，很方便，🆗话不多说，现在就来聊聊view的使用！ 初识View 1.使用方法 上文说到div是HTML中用到最多的标签，view标签也是小程序中用到最多的标签，所以很重要！！！其实<view>标签可以看作是<div>标签来使用，因为它们的作用基本上一致，所以也很好理解了！使用的方法也基本一样，就是使用开始标签<view>和结束标签</view>将内容包起来就行，如下图： wxml代码 [代码]<!--输出hello world--> <view class="container"> <!-- class是样式类--> hello world </view> [代码] 运行结果预览 [图片] 2.直观感受 通过改变样式来更加直观的感受一下view到底是什么样子的 css代码 [代码].container{ height: 500rpx; background-color: red; } .container1{ width: 400rpx; height: 400rpx; background-color: green; } .container2{ background-color: blue; } [代码] wxml代码 [代码]<view class="container"> hello world </view> <view class="container1"> hello world </view> <view class="container2"> hello world </view> [代码] 运行结果预览 [图片] 可以看到当没有设置宽度和高度的时候，view默认的宽度是100%，而高度是根据内容来决定的，也就是说是有内容来撑开的，当设置了宽，高以后，就像我们熟悉的<div> 嵌套使用 wxml代码 [代码]<view class="container"> <view class='Box_son'> <view class='Box_grandson'> </view> </view> </view> [代码] 运行结果预览 [图片] view的嵌套其实也很简单，但是通过嵌套我们可以做很多的事情，小程序每一个界面都是一个一个的view嵌套组成的，当然这里的嵌套不只是view，view标签还可以嵌套很多的其他标签，<text>,<image>等等 结束语 这篇文章只是简单的简绍了一下，view的用法和嵌套，并没有讲布局知识，我的初衷就是想让更多想学习小程序的同学，以最简单的方式入门。所以可能有很多的不足之处，请大家多多在评论区指教。 当然如果觉得我写的还可以，就点个赞呗！！哈哈哈

前言 作者其实也是一名小程序开发的学习者，想着自己也算是开发了几个小程序玩了，回看过去自己刚入门的时候，也是遇到了很多的问题，当时看文档，一时半会也不是看的很懂，网上各种找教程，最终也是不尽人意。所以我想写一个教程，一是为了巩固自己的知识，二是为想入门小程序的同学们提供一个好的经验，三是为微信社区做一点贡献。 创建项目 注：此处跳过了小程序开发者注册和下载编辑器的环节，因为这一部分微信小程序团队已经给了我们非常细的小程序文档，图文并茂，相信一定可以很好的看懂。 ok ！废话有点多，切入正题。当你完成上面的两部后就，打开编辑器开始创建项目。如下图： [图片] [图片] 完成后就可以看到编辑器自动为我们生成了一个小程序，这就是你的第一个小程序，先不要急着写代码，我首先要讲的是，小程序的文件目录的含义和用处，这很重要。 文件结构 [图片] 如上图，你会看到这些文件，pages文件夹是所有页面的文件夹，而注册一个页面，也会生成一个文件夹，里面有四个文件，js,wxss,wxml,json。这些都是每一个页面的主要文件，wxml是页面的结构，wxss是用来修饰整个页面的，js也来实现很多业务逻辑的，json文件是很重要的页面配置文件，（这里给新手多说一点：logs文件可有可无，它是一个日志文件） 现在来讲一下全局页面文件，如上的四个文件，是每一个小程序必须有的四个文件，js可以定义一些全局的方法，wxss呢则是定义的全局的样式，json还是一样主要起配置页面的作用，每当你需要一个界面时，你都要在json里面注册一下。关于页面配置的详情见文档的页面配置。最下面的project.config,json文件是用来配置编辑器的，它可以记住你的编辑的喜好，和做的一些调整。 🆗，第一篇教程就到着结束了，废话写的有点多，会积极改正，也希望有大佬可以指正一些错误，下一篇将会开始写代码了！从最基本的组件开始…请期待