文档章节

微信小程序教程入门篇 (1):10分钟从0开始写一个hello world,极其详细

@安肖雄
 @安肖雄
发布于 2016/12/29 10:44
字数 2466
阅读 209
收藏 6

熊熊不懂得打情骂俏直接开门见山开始开发之旅。


这个教程适用对象:这篇文章适合所有的想学习微信小程序的新手们,需要你们有一点的html和css的基础。如果你只是想了解下小程序的开发流程这篇文章也特别适合你。大神们可以直接跳过这篇文章了。

微信专门为小程序开发了一个ide叫做微信开发者工具。最新一版的微信开发者工具,把微信公众号的调试开发工作也集成了进去,可见微信对小程序多么的充满信心。对于初学者来说,微信小程序的所有开发工作以后最好都在这个【微信开发者工具】上完成,编辑完了就可以调试真的很方便。微信给这个ide开发了window64、 window32 、max三个版本,连window都开发了两个版本,真的很佩服微信的用户体验。ide大家可以去这里下载:http://doc.pietian.com/?id=177

下载安装完【微信开发者工具】 打开ide看到的第一个画面

图1:

1.jpg

上面的按钮是小程序调试,下面的按钮是公众号调试,今天就只讲小程序了,公众号以后再讲或者直接略过了。

选择“本地小程序项目”进入第二个画面,在这个画面里填写小程序的appid和项目名称以及项目所在目录。因为熊熊没有内测资格,所以我没有appid,这里就点击第一个框的右下方绿颜色字“没有appid”就行。然后填写项目名称,自己爱写什么就写什么好了,不过我建议大家不要随意,最好按照标准的流程来,写的正式一点,这是一个开发者的态度,我们应该重视每一个项目即使是一个小的学习demo。最后选择项目所在目录,这里也一样你可以选择任何一个目录,不过我还是希望大家能够为这个项目专门做一个目录。好了所有的都填完点击右下角“添加项目”就可以了。
图2:

2.jpg

接下来就进入了项目的正式开发的界面了,现在来说下这个界面:
左边是小程序的页面效果展示界面,小程序的页面结构样式等效果会在左边显示出来。

中间是项目的源文件结构目录。

最右边是编码窗口可以在这里编辑代码。

我们新建的项目进入以后什么都没有是空的,需要我们一点一点的手动编写代码。
图3:

3.jpg

好了接下来就带大家一步一步写一个hello world。
编码之前讲一下小程序的开发规矩(担心有些初学者理解不了姑且叫规矩吧)接下来的内容很重要,仔细看哦!

小程序开发需要三个描述整体程序的 app文件 和 一个描述多个页面的 pages文件夹。

(1)三个app文件分别是app.js,app.json,app.wxss。

            app.js文件是脚本文件处理一些公共的或者全局的逻辑。比如在这里定义全局变量处理登录逻辑指定首页等。

            app.json文件是小程序的整体配置文件。我们必须要在这个文件中配置小程序是由哪些页面组成的,我们还可以在这个文件中配置整个小程序的统一的窗口 背景色,导航条  样式,默认标题。但是必须注意该文件不可添加任何注释。

            app.wxss文件是整个小程序的公共样式表。我们可以在小程序子页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。也就是说在这个文件里定义的样式在其他任何的子页面中都可以使用。这个也是为了代码的简洁和整体风格的统一。


(2)接下来说pages文件夹:

小程序的所有显示的页面都必须以子文件夹的形式存放在pages文件夹里面,包括首页。项目展示多少个页面,在pages文件夹下就要新建多少个子文件夹。每个页面的子文件夹,必须包括这四个文件:*.js   ,  *.wxml   ,  *.wxss  和 *.json(* 表示文件名)。这四个文件的文件名必须和子文件夹的名字一样。
*.js文件是当前页面脚本文件,也是业务逻辑的处理文件,当前页面的所有和后端服务器接口的交互,请求数据的逻辑都在这个文件完成,是核心文件,必须创建。

*.wxml文件是搭建当前页面元素的文件。负责搭建当前页面的结构和布局,相当于网页开发中的*.html文件,这个文件中存放一些类似于div  span  form  input  sectiond等布局代码,必须创建。

*.wxss文件是当前页面的样式文件。负责调整当前页面的样式,元素之间的间距,字体的大小,字体颜色,背景图等,相当于网页开发中的css文件,需要时创建。

*.json文件是当前页面的配置文件。配置当前页面的窗口背景色,导航条样式,默认标题等,需要时创建不需要千万不要创建,这里我发现一个bug,就是如果创建了这个配置文件,但是配置文件中没有任何内容,那么页面渲染的时候什么也显示不出来,所以如果创建了这个文件,那么就必须在这个文件里写点什么即使写“{}”也行,要不然就不要创建。(个人猜测:是如果json文件为空,小程序在加载的时候就认为这个json配置是错的,页面渲染终止。我已经把这个bug提交给微信官方了!!!)


以上这四个文件只作用于当前的页面,不作用于整体和其他页面。

(详细内容可以去看手册:http://doc.pietian.com/?id=163

手册截图,图4:

4.jpg说了这么多,现在要正式开发啦:


1、点击 目录窗口 右上角的 + 号,创建一个pages文件夹和app.js,app.json,app.wxss文件。创建完成以后就是下面这个样子:


图5

5.jpg2、此时pages文件夹下还没有任何的页面,现在我们的项目需要一个首页,那么就需要在pages目录下新建首页的子文件夹,点击 pages那行的最右边的 +号创建index子文件夹,然后点击index那行的最右边的+号,在这个子文件夹里把那3个文件创建完(鉴于上文发现的bug,这里就先不创建index.json文件,需要时再创建)。这里要注意,3个文件必须和目录同名。完成以后,就是下面这样


图6:

6.jpg3、页面结构现在已经完成了,该有的页面也有了。但是,此时此刻页面上居然什么也没有显示,当然了,因为我们还没写代码呢!

好吧,接下来,开始 敲~~~代~~~码~~~~
上面已经说了,wxml是搭建页面元素的文件。我从子页面的wxml文件开始,来一点一点的编写。写下第一行代码:

<text>hello world!</text>


写完了,crtl+s保存就行。今天子页面的代码编写工作已经完成了,是不是很惊悚,很难以置信。今天,子页面就写这一行代码。

如图7:

7.jpg4、首页页面虽然我们写好了,但是现在小程序的页面上还是什么都没有显示。

别着急!这是因为我们还没有配置。如果想要页面显示出来,就必须在app.json中配置小程序的页面,参数为pages。pages是一个数组,其中的每个元素都是每个页面的相对根目录的路径+文件名,文件名不需要写后缀,小程序运行的时候会自动去寻找.json  .wxml .wxss .js四个文件。数组的第一项表示小程序的初始页面,也就是首页,小程序的每个页面都需要在数组中配置,并且以后小程序页面增加或者减少都需要修改pages数组。(详细配置信息可以去看:http://doc.pietian.com/?id=109


现在我们在app.json中写下我们的配置信息,我们把index做为小程序的初始页面,代码如下:

{
    "pages": [
      "pages/index/index"
    ]
}


图8:

8.jpg

注意:配置文件的编写遵循json的格式,参数需要用双引号""括起来,配置文件的开始和末尾需要用大括号"{""}"包含。

好了今天这个hello world的初级项目就讲到这,下次给大家讲下页面渲染。最后给大家一个彩蛋,微信小程序离线开发手册下载地址:http://pan.baidu.com/s/1eSoNA4E

最新的文章我会首先发表在我个人的微信订阅号(搜索:pietian)上。可以扫码关注我的订阅号,或者搜索pietian关注我哦。

 

© 著作权归作者所有

@安肖雄
粉丝 1
博文 1
码字总数 2466
作品 0
私信 提问
编程微刊第四期文章汇总(2018.4)

编程微刊创立也有一段时间了,在此感谢一直关注我的小伙伴们,你们的关注和支持,是我每天不断更新的动力,我每个月会总结一期微刊,方便大家的阅读。 1. 推荐文章 这个时代,抛弃你的时候,...

祈澈姑娘
2018/05/04
0
0
如何不写代码上线自己的微信小程序

录了一段视频,教你如何在不写代码的情况下,免费发布一款自己微信小程序。 微信小程序门槛已经下降到个人了,很多不会写代码的人也想免费上线一款自己的小程序,该如何做到? 比如你有这些要...

2018/01/31
0
0
前端资源系列(3)-微信小程序开发资源汇总

微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者工具 - 官方 Egret Wing 3.2.x 支持微信...

xzavier
2018/08/27
0
0
IoT小能手的微信小程序快速入门教程

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 https://blog.csdn.net/iotisan/article/details/99782346 小能手的技能栈终于要拓展到微信小...

iotisan
08/20
0
0
微信小程序开发初体验--教你开发小程序

微信小程序 微信小程序面世以来受到的关注颇多,直到最近我才动手尝试进行了小程序的开发,总体上感觉还是不错的,有一点不适应的就是要摆脱Web APP开发对DOM的操作。在这里我就把我是如何利...

请天点
2016/12/01
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

CQRS与AXON

CQRS 看了蛮多文章,只会CRUD,却不懂CQRS,CQRS是遵循DDD思想而产生的一种模式,Command and Query Responsibility Segregation 命令与查询隔离。查询就直接通过正常的模式service调dao层。...

无极之岚
17分钟前
2
0
OSChina 周三乱弹 —— 欢迎你来做产品经理

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :10多次劲歌金曲获奖,更多叱咤歌坛排名,黎明才应该是四大天王之首,只可惜拍的电影太少。单曲循环一个多月的歌,力荐 《无名份的...

小小编辑
32分钟前
37
2
500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。 帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!...

上海小胖
今天
8
0
关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
7
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部