一. 小程序是什么
来自百度百科：
微信小程序，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
来自微信小程序首页：
小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
简单来说，就是一个很轻量的App，不需要下载、安装，只需要微信扫一扫或者搜一搜就可以使用。相信大家都已经体验过了。
它的运行原理是怎样的呢？
先看两张开发者模式下的图：
Android
iOS
由图可以看出，顶部的导航栏(NavigationBar)和底部的标签栏(TabBar)是原生组件，在开发中，这两部分是由配置文件进行配置的，并不能够自行编写；
而中间的主要部分则都是WebView，这是开发者可以自行编写的部分。
所以小程序并不完全是基于WebView的Hybrid的HTML5开发，也不是像React Native和Weex一样的js直接调用原生组件，它是两者的混合体。
下图是微信官方的描述：
实际测试过程中，发现在低端的Android手机上也会出现卡顿现象。
二. 机遇？挑战？
先上一张图
2.1 小程序的优点：
- 轻量，使用方便。
在国内，只要是智能手机几乎都安装了微信，而小程序只要扫一扫就能使用，无需安装，简单快捷 - 自带微信API。
微信登录、支付、扫码、地图，各种微信相关的API随时调用，不需要集成各种SDK，各种验证 - 开发、适配成本低，易维护。
开发使用微信提供的MINA框架，语法跟Angular/Vue类似，上手简单。Android/iOS适配微信已经帮忙做好了，不需要各种分辨率各种机型手动适配。
2.2 小程序的缺点：
- 太轻，压缩后代码不能超过1M。
如果业务逻辑及其复杂，则用小程序实现较为困难。 - API依赖微信
如果要实现一些特殊的功能，比如Android的红外和NFC，小程序目前还没有办法。
三. 微信小程序开发、发布完整流程
整个流程基于自己的实际体验，更多详细可以查看官方文档
参考文章：
微信小程序接入指南
下图为微信官方接入流程：
接入流程
3.1 注册
注：小程序只对一下用户开放注册企业、政府、媒体、其他组织，如果是个人开发者的话，是没办法注册的
① 在微信公众平台(注意是公众平台不是开放平台)找到小程序注册入口
② 在最下角点击前往注册
③ 首先需要注册一个微信平台账号
④ 登记主体信息
⑤ 登记管理员信息
⑥ 注册成功后登录，提示用管理员账号扫码
⑦ 扫码后登录成功即可进入小程序管理界面
至此注册步骤完成。
3.2 小程序信息完善
因为这已经是填写好的信息了，所以只能给大家简介一下需要填写的信息
需要填写一下几项：
- 小程序名称。必须是没有被注册过的名称，开发版本可以修改三次，发布后不可修改。如果是注册商标名需要提供营业执照、商标注册证等信息
- 小程序头像
- 小程序介绍
- 服务类目
填写提交后需审核，审核周期实测为一个工作日。
等待审核的过程中就可以进行开发了。
3.3 开发小程序
① 小程序管理员设置开发者和体验者。管理员在 用户身份 页可以设置管理员、开发者和体验者。
- 管理员也是可以更换的，因为微信小程序的开发中很多时候都需要管理员扫二维码，所以推荐把管理员设置成经常开发的人员
- 开发者最多可以设置10个，设置好开发者后，开发者具有开发、体验、上传代码的权限
- 体验者最多可以设置20个，体验者只有扫码体验的权限
② 下载安装开发者工具
微信开发者工具官方下载地址: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715
支持windows和mac
安装完成后需要扫码，进入后页面是这样
之后导入Demo工程或者自己新建一个工程就可以开发了
注：小程序开发需要AppID，没有AppID微信登录等功能则调不通
AppID可以在管理员中心 首页->小程序信息详情->开发设置里找到，
开发过程中还需要AppSecret（小程序密钥），也可以在这里找到
私密信息，不得不打马赛克
之后进入IDE后，界面是这样的，就可以愉快的写代码了。
关于前端开发方面，后续会专门讲解。先讲一遍整个流程。
3.4 提交审核和发布
① 代码上传
点击IDE的 项目->上传
会提示管理员扫码，管理员扫码后，会让输入版本信息和备注
输入完成后点击上传，上传成功后即可在微信公众平台的小程序管理界面->开发管理 看到上传后的代码
点击提交审核，填写相关信息后即可进入审核阶段，等待审核完成即可发布小程序。
因为小程序正在审核中，所以没办法给大家展示发布后的运营和管理，十分抱歉。
至此，整个流程结束。
四. 微信小程序前端开发，技术分享
参考官方文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=201718
4.1 微信官方UI库 weui
GitHub地址：https://github.com/weui/weui-wxss/
遇到的坑
-
错误提示信息不准确，明明是
在方法里出现两个相同变量时会报错，如图
这个方法里形参是id，然后定义了一个局部变量也叫id，在结果就在控制台里报了很奇怪的错误，提示模块没有被定义
网友评论