Bootstrap

微信小程序从零开始(零)-Hello World

微信小程序从零开始(零)-Hello World

2017年1月9号,微信小程序如约而至。按照张小龙刚推的朋友圈,1月9号并不是随机选择,而是向10年前苹果发布IPhone致敬。朋友圈一大波“微型小程序对APP市场的冲击”,行业的未来固然很重要,但作为一位技术人员,更关注技术本身,昨天就自己体验了一把微信小程序的魅力,萌生了写一个微信小程序的系列教程。话不多说,今天我们就开始微信小程序的第一个Demo,Hello World(程序员你懂的)。

由于本人也是刚开始接触微信小程序,可能有许多东西讲不明白,大家如有不懂之处,请参照微信官方的开发文档 简易教程 小程序

本篇博客的大致内容

1、小程序体验

说到小程序,用户怎么才能在微信中找到这个入口。偶尔自诩为当代乔布斯的张小龙曾经说过,小程序没有入口。对于一个普通用户来说,打开微信找了几遍都找不到微信小程序的入口。那么,我们怎么才能在微信上使用小程序了???

根据微信官方给出的五种方法可以找到小程序:线下扫码微信搜索公众号关联好友推荐历史记录。博主自己就是通过朋友的推荐链接,点击一下就发现微信的发现界面多了个小程序这个按钮。

由于小程序不能在电脑端进行分享,此处我就不具体说明怎么让小程序这个入口暴露出来了,相信对大家来说也是小case,此外大家的微信版本必须是最新版本的…

点击进去,进入如下界面

由于本人之前添加了一些应用,如果你要添加一些小程序。这里有个搜索栏,但它不支持模糊搜索。举个例子:你发现小程序很有意思,想看看有没有能替代日历的小程序,就搜索“日历”,却发现搜不到任何结果。除非知道某个特定的小程序的准确全名,否则是绝对搜不到的,至少在今天不行。从这一点上,微信的确没有给小程序以“入口”。

选择一个程序,点击进入

发现就是一个简化版的京东,功能好像还比较少。也许此时你会说,这就是小程序!!!!好像也就这样吧,JUST SO SO!!!至少目前是这样的,博主自己也是这样认为的,似乎并没有朋友圈说的各种革新互联网模式。最大的功能就是我们不需要再去安装各种APP,直接在微信中搜索一下,打开就可以使用了。

2、微信开发工具的安装

啰嗦一大堆,是时候来点干货了。对于我们开发者来说,学习一门新技术,必须有个工具吧。下面我们就来介绍一下微信开发工具的安装,微信开发工具官方下载地址

下载之后,直接安装,so easy。没有我们以前遇到的那些开发集成工具那么繁琐,不需要配置什么环境变量啊,什么都不用,一键安装,万事OK。

打开微信开发工具,扫码登录一下:

这里写图片描述

选择本地小程序项目,再点击添加项目

这里写图片描述

此处要我们填写AppID,这是个什么玩意???感觉有点像Android开发中集成第三方库时需要申请的AppID,问了一下度娘,原来如此。获取微信小程序的 AppID的链接

简单了解了一下获取流程:

AppID获取流程

大致就是需要以公司名义登记信息,需要什么组织代码的,并且一年300块,腾讯还是一如既往的。。。。。。这样这对于我们这些想体验一下小程序的来说,坑爹啊。。。。。不过,办法还是有的,一般这样注册成功之后,有一个管理员账号,管理员可以分发多个开发权限给程序员,程序员在微信界面确认之后,可以得到一个APPID,这样万事OK。

不过,有些可能会问了,哪来的管理员,博主你这不坑爹么。这时候,我想到了万能的淘宝,花点小钱去淘宝上买了账户,绑定自己的微信号就OK。
这里写图片描述

其实,这里不用纠结什么,没有appId也是可以开发一些demo的,只不过部分功能受限(就在没有登录功能,并且不能通过手机扫二维码调式小程序)

这里写图片描述

添加项目之后就创建了我们的第一个Demo了
这里写图片描述

3、小程序的目录结构

微信开发工具的简单介绍

  1. 左边的工具栏,编辑调式编译后台
  2. 小程序运行之后的界面,类似于Android Studio的模拟器
  3. 文件目录
  4. 右侧的代码编辑区
    界面很简单,做过程序的开发的人都会感觉界面好简洁,赞一个,中文赞一个

先来试试Demo程序的功能,点击Hello World界面,发现跳转到了日志log界面

跳转到的日志界面:

其他的很简单,这里重点和大家说一下小程序的文件目录结构。点开里面的文件夹:

这里写图片描述

小程序包含一个描述整体程序的 app 和多个描述各自页面的 pages。

1. 我们先来看看描述整体程序的app(底部红色方框的三个文件)

这里写图片描述

学过JS的应该很容易理解

  • app.js :控制整个程序的逻辑,相当于小程序的入口
  • app.json :程序的布局页面的一些公共设置
  • app.wxss : 样式表,给控件设置各种属性,宽高等

2. 页面文件pages(底部的pages文件夹)
此处发现pages文件夹下有两个文件夹index和logs,这就对应上了我们之前点击页面后从Hello World页面跳转到日志页面。

一个小程序页面就是一个文件夹,由四个文件组成,分别是:

这里写图片描述

发现跟底部的三个文件一样,并且多了一个page.wxml 页面结构的文件,这里我们暂时不做介绍。

3. utils
里面存放着各种js的方法,方便调用

最后我们打开小程序所在路径,发现和显示的文件目录一模一样,所见及所得。
这里写图片描述

小结

  1. 本节对小程序的文件目录结构了解即可,pages、utils、app.js、app.json、app.wxss、
  2. 至于每个文件的具体作用下节再做介绍
;