新手尝试编写微信小程序（1）——我的第一个微信小程序

微信小程序风靡全国已经好多年了，首先是微信小程序，后面百度等多个平台都发布了自己的小程序了，可我还从未尝试过开发一个玩玩，其实对于一个程序员而言，开发一个小程序实在不是什么难事情，所以今天就要聊此心愿，因为在后面的教学中需要用到小程序发布一些作业。废话不多说，下面正式开始我们的微信小程序开发。

一、准备工作
1、拥有一个微信公众号
开发一个微信小程序必须首先拥有一个微信公众号，如果么有公众号，那就去申请吧（不过现在的微信公众号申请貌似比较繁琐，需要耐心）！

2、进入公众号申请一个小程序
然后进入微信公众号，在左边的菜单中选择“小程序”即可进入小程序的注册界面，在注册的最后有一个小程序的服务类型选择，如果您是开发着玩，千万别选择医疗、教育等需要上传资质和证件的类型，你知道的很麻烦，如下图

建议选择工具类型，小的类型随便选

3、下载开发工作（IDE）
在上面菜单中选择工具，下载工具（根据自己的操作系统来选择）

4、安装开发工具
下载完，我们来安装，安装完成后我们就可以进入我们的程序编写了

二、在IDE中创建小程序获取AppID
1、创建小程序
点击完成运行程序，选择左边的小程序，然后在右边点击“+”号进入小程序项目设置，这我么选择默认的设置，先测试一个玩玩。当然，如果你一开始就要来“正经”的，那么锯需要把你以前申请小程序的APPID填写在这里了。

2、获取AppID
这个微信的AppID号在哪里找呢？还是在微信公众平台的小程序管理页面中，找到开发，进入到开发设置，如下图：

3、运行第一个小程序
填写好APPID，或者选择测试号直接进入，我们看到额界面不同，需要有云服务支持的app开发，我们后面讲，这里我们还是着重来看看一般的简单小程序怎么开发。

这个时候，我们可以看到编辑器分为左右两部分，左边的就是效果预览，右边的是代码编辑区。这就算是我们第一个微信小程序了。

要在这个基础上实现更多的功能帮我们需要了解代码编辑部分以及微信小程序的结构。在右边我们可以发现，有pages和utils两个文件夹，而每个文件夹及子文件夹中都有四类文件，js,json,wxml,wxss。这是为什么呢？
其实有过网页开发经验的童鞋就容易理解，js是脚本，xml是一种扩展标记语言（和HTML类似），xss就是样式文件定义页面格式和配色的。最后需要解释的就是json文件了，这个我们可以看成是一个轻量级数据库文件，本质上就是带有一定格式的数据存储文件。

这么一说，大家就应该都明白了，腾讯公司为了给微信做扩展应用，为了照顾面子没有直接使用xml和xss，而是在前面加了个微信的首字母W，当然，也还为其自身的需要做了些扩展，但最核心的东西没有改变，最无法改变的东西js和json没有改变。

三、代码修改，实现自己的需求
1、修改hello world
了解了这些，我们就可以来看看代码了，这里我们只看几个显而易见的代码行（其实能够清楚的将微信小程序默认的小实例的所有代码看懂，那么我们就可以放手开始正式编写自己的代码了），修改并验证一下这些代码的作用今天这个入门课就算完成任务了。

首先我们找到hello world的代码，如下图：

我们将其修改为“你好我的第一个微信小程序”

然后点击工具栏中的“编译”，立即可以在预览中看到效果：

2、修改页面获取用户信息
下面，我们来修改一下获取头像信息的函数，我们改为获取昵称及区域的函数，当我们点击的时候显示微信昵称和地区信息，首先我们将index.wxml中的提示信息修改一下，如图

然后，我们增加为信息部分增加一个用户区域：

编译预览效果：

3、增加自定义函数以及变量
最后，我们来修改程序文件，为我们的小程序添加一个自定义函数，然后显示在页面中。
在index.js中增加一个自定义函数myfun，代码如下：
事先，我们要在page的data中增加一个变量welcomeInfo，

接下来，我们定义并实现这个myfun函数：

4、函数及变量的调用
然后，不要忘记在page的onload中调用，否则在页面中就无法访问这个welcomeInof变量，调用后welcomeInfo就被赋值了。（我这里放在onload的最后调用的，调用函数的位置可以根据自己的喜好随便放置）

我们在页面中就可以显示出来了：

运行效果如下：

到此为止，我想已经是初步了解了微信小程序的变量定义、函数定义及调用以及最简单的页面显示方法。有关第一个程序中涉及的到setdata以及页面调用自定义函数等内容我们放到《新手尝试编写微信小程序（2）》中来探索。有需求的小伙伴请关注更新！