当前位置：微信小程序入门必看
2018/08/10 17:10 分类： 技术交流 浏览：55
大家喜欢听歌吗？知道许嵩吗？作为开发人员，我注意到一个很搞笑的事情，之前他的歌词都是“你灰色头像不会再跳动”，现在却是“打开你的朋友圈”，侧面反映出微信已经悄然崛起。据统计，微信使用人数已突破10亿月活跃人数，所以随之而来的越来越多微信相关的开发，比如微信小程序，而我们今天要讲就是微信小程序，那么什么是微信小程序呢？今天就让我们来一探究竟吧！
1. 微信小程序入门
1.1什么是微信小程序？
微信小程序（weixinxiaochengxu），简称小程序，缩写CX（讲真，这样的缩写也是没谁了），英文名mini program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。
1．2小程序的工作原理
用户打开微信，直接通过微信使用小程序，不需要下载安装，直接通过微信作为入口，就可以进入小程序，而小程序所使用的服务器是企业的服务器。
1.3小程序的未来趋势
小程序真是将“用完即走”体现到了极致，有点像一个暖男，随叫随到，不需要我们负责，而且说扔掉就扔掉。而且随着发展，以后还会更加完美，是不是很想掌握啊？那我们继续往下看吧！
2 搭建小程序的开发环境
我们要自己做一个小程序，给用户提供一个有自己特色，不同功能的暖男，应该怎么做呢？
2.1 获取AppID
首先注册一个微信小程序，在微信小程序的官网注册，填写如下信息。
通过前面的信息填写之后，登录进入微信小程序，在设置里面找到我们的AppID。什么是AppID呢？你可以理解为就是一个标识符，我们上线的项目必须有AppID,当然没有没有AppID也是可以开发的，只是不能上线，通过测试发现，没有AppID，微信小程序里面的有些功能是不可以使用的哦，比如共享单车里面的地图功能就是不可以使用，不可以获取当前的位置的哦。
2.2 下载安装开发工具
下载地址:
直接双击安装完成即可。
2.3 创建项目
A. 添加项目（注意不使用任何代理）
注意:这里的文件路径，在第一次开发的时候必须是一个空文件夹，如果之前是一个完整的微信小程序项目，才可以允许打开这个项目，而不能直接打开一个非空的文件夹哦。
B. 选择无AppID（无AppID不能用手机测试，只能用工具来测试），如果有相应的appid,就填上自己的appid。
C. 填写项目名称
3.小程序的配置与结构讲解
3.1 认识开发工具
窗口1是项目目录文件窗口，窗口2是代码编写窗口，窗口3是调试窗口，也就是控制台。
3.2 文件结构详解
1. pages下面的每一个文件夹对应一个页面，每一个文件夹下面的文件是不是感觉一头雾水？其实就是微信为了独树一帜，故意将我们前端一直在用的html改为了wxml，css改为了wxss，js就还是没有变化。所以大家不要慌，说白了，就是一个名字的变化，css到wxss，没有一点改变。只是html名字改为了wxml,然后修改了一下标签，所以说到这里，大家应该明白了，原来微信小程序尽管那么多人用，但是还是很简单的。而具体这些文件夹以及文件如何而来，我们后面会有说明哦，大家先不要慌。
2. utlis里是公用模块目录。
3. app.js,app.json,app.wxss这三个是必不可少的三个文件，就是负责对程序的整体起约束性作用的。比如一个js文件放在pages文件夹里的一个文件夹，那么这个js文件所起的作用的范围就仅限于所在的那个页面了。而放在pages文件夹外，所管束的范围就是整个文件了。
3.2 如何创建新页面
按照上图操作，添加一行对应代码，保存该文件，就会自动生成对应的页面哦，不需要我们手动操作，是不是很方便呢?
注意：在app.json文件中排在第一个的文件就是我们显示的第一个页面，所以大家要注意一下摆放顺序哦，当然之后的页面排序就没有什么相关性啦。
3.3 如何连接到新页面
在我们知道怎么新建页面之后，大家就会想要说怎么实现页面与页面之间的跳转了，那应该怎么做呢？当然是打开微信小程序的开发文档啦。
到了如上图所在的界面，组件里面其实和我们html里面的标签是一样的，只是标签不一样了而已，使用方式都是一样的。我们通过红框选中的搜索，搜索对应功能的标签，就会出现对应的功能的标签的英文，然后我们就可以使用啦。
根据说明使用标签，然后就可以实现对应功能啦。
比如如下图：
3.4 常用标签（组件）
所以现在大家应该对微信小程序有一个初级的认识了吧？其实他一点也不难，我们就是相当于接触一个使用了很多新技术的电视机，我不知道怎么用它，但是他有使用说明，我要做的操作，直接通过查找使用说明，然后实现我们想要的功能就可以了。
感谢源码时代教学讲师提供此文章！
本文为原创文章，转载请注明出处！
赞 1
