当前位置:主页 > 平面设计 > 微信小程序入门基础教程

微信小程序入门基础教程

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

我们讲到了小程序的安装以及基本的代码的编写,第一次学会了修改小程序的代码,能够将页面上显示出“helloworld”的字样,那么,今天我们学什么呢?学习代码,了解代码。要学好小程序,首先就不能依托于他人的模板,否则什么都学不会。首先,我们需要将代码全部删除。注意:删除的是index.wxml和index.wxss里的代码, 别的地方的代码别动。 删除之后,按一下Ctrl+S,保存一下,系统就会自动保存,我们现在可以看到,页面上已经什么都没有了。 打几个字来测试一下,简答点,打入代码:<div class="box"></div> 用过前端开发的小伙伴们应该知道这个代码的意思,这个代码的意思就是块,也可以理解为区域块,我们现在设置这个代码,将文字放在这个块里,然后我们进行下一步的操作。ps:这个代码其实不是很正规,小程序给了更为规范的代码,但是怎么说,我们是基础,先用这个,以后再改也不迟。 这里的.box是样式命名,下面我们会用到这个设置的样式。

微信小程序入门基础教程:小程序常用组件之块组件
微信小程序入门基础教程:小程序常用组件之块组件

今天,我们来讲讲如何调用小程序的常用组件。首先,我们需要准备的是,把微信开发者工具打开来。可以看到小编的这张图,文字在上方居中对齐,这里的样式代码是:“.box{margin:1px;text-align:center;}” 这边可以解释一下,margin的属性意思是样式和第一行的距离长短,text-align:center是属性意思是居中,当然了,也有居左和居右,改成left和right就好了。参考代码: .box{ margin:1px; text-align:center; }  其实学过html和css的小伙伴们都知道,编程是靠代码实现的,html的代码我们可以去w3cschool里面查到,而这个小程序的编写代码我们则可以去微信小程序的公共开发平台查看到。 这里面有很多的组件,我们将会慢慢来学习。小程序里的这个组件在前一讲已经说了那么一点点,这个组件类似于html里的div标签,却是高于div标签的,可以说是一种意义上的升级。

微信小程序入门基础教程:图像媒体组件的使用方法(图片)
微信小程序入门基础教程:图像媒体组件的使用方法(图片)

今天,我们来学习图像媒体组件的使用方法,希望大家可以在学习后,能掌握图像媒体组件的使用方法。我们打开小程序开发者文档,可以看到媒体组件有下面的这几种:audio、camera、image、live·player、live·pusher和video。这里可以简单的说一下: 不同于html里面的<img>标签,这个组件的功能比<img>更强大,可以选的内容也更多,好的,我们先来打开微信开发者文档看一下这个小程序的属性: 

微信小程序入门基础教程:swiper滑动轮播组件(轮播图)
微信小程序入门基础教程:swiper滑动轮播组件(轮播图)

今天我们来讲小程序里实现轮播图的方法,大家要专心看哦。这个组件叫做滑块组件,嗯,听起来还挺形象的,你看滑动轮播图的时候是不是就像滑动一个个方框的一样?首先,按着老规矩,我们需要先打开微信小程序开发者文档,看一下关于swiper组件的相关内容: 这里要说一下,跟swiper有关的还有这个swiper-item的组件,这个组件和swiper是一块使用的,这个组件可以放一些东西进去。 如上面所述,我们的代码开始编写了,首先,需要把swiper和swiper-item的代码写进去。参考代码: <swiper class="banner"> <swiper-item> </swiper-item></swiper>

微信小程序入门基础教程:小程序常用组件之文本组件
微信小程序入门基础教程:小程序常用组件之文本组件

今天,我们来学习学习其他的小程序组件。小程序里的这个组件也是我们的老朋友了,他主要是类似于行标签的用法,类似于html里面的<span>标签,同样的,他和html里面的<span>标签也不一样,更高级,也有更多的用法。打开微信开发者文档,我们可以看到以下的内容: 这个属性加进<text>组件之后,这个<text>里面的内容就可以被选中了。参考代码: <view> <text selectable>小程序开发</text></view>  这个属性是用来加空格的大家来看这行代码,<view><text>马 蹄 谷</text></view> 我这里面马蹄谷三个字空了很大的空间,但是呢,没什么用,看下图:

微信小程序入门基础教程:初识小程序(从安装到写helloWorld教程)
微信小程序入门基础教程:初识小程序(从安装到写helloWorld教程)

我们从外面先来看一下微信小程序:我们现在用的微信小程序都是别人开发好了的小程序,那么,我们自己能不能开发小程序呢?当然是可以的,那么,就随着小编来进一步的认识一下小程序把。怎么样,看到这个人群划分,是不是觉得自己有能力学好这个小程序呢?没错,小程序本身不难,谁都可以开发简单的小程序,至于你说那些高大上的程序,只要你学的够深入,都是没有问题的。我们在开发前需要准备哪些准备工具呢?首先就是注册:说白了,没有APPID也是可以开发的,属于测试版的开发,不影响学习,但是以后进入企业工作的时候,还是需要进行企业的步骤获取APPID。第一步,这里啊,需要大家来记住一个网址:https://mp.weixin.qq.com//(微信公众平台的位置)  其中,这里面的Windows32是指32位的操作系统,Windows64则是64位的操作系统,大家根据自己的电脑安装具体的版本即可。

微信小程序入门基础教程:可滚动的视图区域组件(滚动条)
微信小程序入门基础教程:可滚动的视图区域组件(滚动条)

我们今天来讲一个可滚动的视图区域组件。简单来说,就是当窗口面积不大的时候,可以通过滚动看到更多的内容。这个就有点类似新闻类小程序的功能了。具体是什么大家也能想得到。老规矩,我们先打开微信小程序开发者文档看一下这个组件的一些属性。 在开始的之前,我们先新建一个项目,同样的,把wxss和wxml的内容清除一下,这些内容对我们现在来说还没什么用处。 第一步,我们先搞点代码上去,输入这个<scroll-view>并给这个一个样式。这里,给scroll-view组件设置的样式名字为out,里面的字符设置的样式名字为box。

微信小程序入门基础教程:小程序常用组件之跳转组件(超链接)
微信小程序入门基础教程:小程序常用组件之跳转组件(超链接)

今天我们来讲讲其他的小程序常用组件,一起来看看吧。在我们做html的时候,常常会用到<a>标签,这个标签是做跳转链接的,那么,小程序编程里面的跳转链接是什么呢?该如何表达呢?小程序里的这个组件就是我们用于小程序跳转的组件,我们平常在使用小程序看到的跳转基本上都是这个组件实现的,那么,这个组件该如何去使用呢?快随小编进一步去了解看看。 这个属性主要是实现了页面中间的跳转,那么这个属性该怎么使用呢?看看下面的吧。这里我们完善一下代码,将路径打出来,代码:<navigator url="/pages/logs/logs">跳转</navigator>注意一下,这里的跳转到logs页面,只需要打logs的名字就可以了,后缀不需要打。  同样的方法,我们也可以在logs.wxml页面里面设置跳转到首页。参考代码: <navigator url="/pages/index/index">跳转到首页</navigator>