微信小程序经验分享

一. 小程序是什么

来自百度百科：
微信小程序，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

来自微信小程序首页：
小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

简单来说，就是一个很轻量的App，不需要下载、安装，只需要微信扫一扫或者搜一搜就可以使用。相信大家都已经体验过了。

它的运行原理是怎样的呢？
先看两张开发者模式下的图：

由图可以看出，顶部的导航栏(NavigationBar)和底部的标签栏(TabBar)是原生组件，在开发中，这两部分是由配置文件进行配置的，并不能够自行编写；

而中间的主要部分则都是WebView，这是开发者可以自行编写的部分。

所以小程序并不完全是基于WebView的Hybrid的HTML5开发，也不是像React Native和Weex一样的js直接调用原生组件，它是两者的混合体。

下图是微信官方的描述：

细节点，小程序

实际测试过程中，发现在低端的Android手机上也会出现卡顿现象。

二. 机遇？挑战？

先上一张图

2.1 小程序的优点：

1. 轻量，使用方便。
   在国内，只要是智能手机几乎都安装了微信，而小程序只要扫一扫就能使用，无需安装，简单快捷
2. 自带微信API。
   微信登录、支付、扫码、地图，各种微信相关的API随时调用，不需要集成各种SDK，各种验证
3. 开发、适配成本低，易维护。
   开发使用微信提供的MINA框架，语法跟Angular/Vue类似，上手简单。Android/iOS适配微信已经帮忙做好了，不需要各种分辨率各种机型手动适配。

2.2 小程序的缺点：

1. 太轻，压缩后代码不能超过1M。
   如果业务逻辑及其复杂，则用小程序实现较为困难。
2. 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/

遇到的坑

1. 错误提示信息不准确，明明是
   在方法里出现两个相同变量时会报错，如图
   
   这个方法里形参是id，然后定义了一个局部变量也叫id，在结果就在控制台里报了很奇怪的错误，提示模块没有被定义