小记一笔 －微信小程序开发随笔

　

序言：

　　今年的01月09号备受关注的微信小程序正式上线了， 众多的互联网企业也相继发布了自家的小程序。趁着最近上班不是特别忙，本身闲来无事也跟着捣鼓了一款我的记帐用的小程序：小记一笔。用户能够方便、快捷的将本身平时的开销与收入记录下来，还有各类类型的统计，以便实时的准确掌握本身的财务情况。目前此程序已正式上线，你们能够在微信中搜索“小记一笔”点击使用，下面是其中几张效果截图：

      

准备工做：

　　一、要开发微信小程序，首先得有工具，能够先去微信公众平台官网（https://mp.weixin.qq.com/）注册账号，登陆到后台后，在最右上方点击“文档”切换到开发文档页面，里面有开发小程序的各类教程。再点击“开发”－“工具”－“开发者工具”连接，能够选择下载相应的小程序开发工具，目前官方提供了"windows64","windows32","mac"三种平台的开发工具，你们能够根据本身的实际状况选择相对应的工具便可。

　　二、AppID: 官方规定没有AppID, 能进行微信小程序的开发，也能在真机上进行调试预览，但不能正式上线发布。因此若是只是本身开发着玩，能够不用申请appid,但若是想正式上线发布本身的小程序以便你们使用，则须要申请AppID。在前几天(03-27)微信小程序又有了重大更新, 为加强小程序能力，扩大小程序使用场景，对我的开发者开放注册了。在这以前只有企业用户才能申请appid, 申请时须要提供企业相关资料，须要用对公账号给腾讯指定的银行账号打几分钱进行认证。而如今则不须要了，我的也能够申请了。小程序开放我的开发者申请注册后，我的用户可访问微信公众平台，扫码验证我的身份后便可完成小程序账号申请并进行代码开发。

                                                        

开发环境介绍：

　　安装好开发工具后，双击启动会要求管理员微信扫描，赞成便可进入。跟大多数开发工具同样，在启动界面会列出之前的历史项目，点击项目名称可进入以前的项目，点击“+”能够建立新的项目。

                                                       

若是填写了appid则开发完了后能够发布上线，填写完项目名称，选择了相应的目录后，注意下面的复选框。此复选框的意思是官方为你们提供了一个默认的小程序目录结构，里面有小程序正常运行所须要的配置文件与主要页面。建议你们练习的时候勾选上，这样项目建立完成后便可运行，不然须要手动建立所需的各类文件。我最开始练习时由于没有勾选，也不知道要建立相应的配置文件，致使项目一运行各类报错，折腾了半天。

　　小程序默认包含pages、 utils 、app.js、 app.json、 app.wxss五个部分。

1)：其中pages文件夹主要存放小程序的页面文件，每一个文件夹为一个页面，每一个页面中包含.js, .wxml,.wxss,.json四个文件： .js文件是小程序的脚本文件，用于处理界面的脚本事件，如获取数据，点击事件等，使用咱们熟悉的JS脚本编写。.wxml是页面结构文件，用于组织页面上的元素，与Html很是相似。.json文件是配置文件，只能配置本页面，如配置本页面的导航栏的文字，背景色等。.wxss是样式表文件，相似于css，主要是让界面显示的更加漂亮。

2)：utils文件夹主要用于存放全局的一些.js文件, 如封装的经常使用JS网络请求方法，日期处理方法等。

3)：app.js文件是系统方法处理的全局文件，也就是说文件中声明的函数和数据，在整个小程序中均可以使用，如存储后台接口API地址。

4)：app.json文件是系统全局配置文件，是必须包含的。在这里面声明整个小程序有哪些页面，也能够声明小程序是否带有tabbar选项卡及选项卡里面的页面地址与文字等。此配置文件是全局的，若是子页面的.json文件也配置了相同的内容，则子页面中的配置优先级更高。

5)：app.wxss文件是全局的样式美化文件，其优先级一样没有子页面中的wxss文件配置的样式优先级高。

 

　　下面结合我在开发"小记一笔"过程当中碰到的几个问题说一下若是你们在开发本身的微信小程序时须要注意的几点：

1)：小程序开发工具的保存加编译的快捷键是"ctrl+s", 也就是编写完代码后，直接按这两个键就能保存并从新生成了。须要注意的是编写了多个页面中的代码，按这两个键只会保存当前页面的代码，不会保存全部页面的代码。因此若是有时没有达到本身想要的效果时，记得看看是否有其余页面的代码没有保存，我刚开始编写小记一笔时，常常发现有页面代码没保存，致使效果出不来，这一点须要你们细心一点。

2)：小程序的缓存在开发工具中能够手动清除，可是在真机上无法手动清除，因此要想在真机中手动清除，得写一个清除事件，点击按钮啥的，手动调用清除方法进行清除，这点有点坑。

3)：官方规定若是小程序要获取后台接口数据必须走https协议，若是后台服务器暂时不支持https协议而又想在模拟器中获取数据，则只须要在开发工具中设置一下便可。点击开发工具左侧的“项目”按钮，而后勾选上右侧的“开发环境不校验请求域名以及TLS版本”复选框，这样后台服务器不配置https协议也能返回数据了。可是若是小程序要正式上线发布且须要后台服务器提供数据，则必须配置https协议。

4): 我在开发练习过程当中是调用豆瓣提供的测试接口，此接口地址支持https协议，你们在练习调用后台数据时，也能够用此接口作测试。现将此接口地址提供给你们以便参考：

     正在上映的电影：https://api.douban.com/v2/movie/in_theaters

     即将上映的电影：https://api.douban.com/v2/movie/coming_soon

　  排行榜top250的电影：https://api.douban.com/v2/movie/top250

 

真机调试&上线&体验：

　　真机调试：开发完代码想要在真机上预览怎么弄？很简单，只须要轻轻两步便可搞定。开发完代码后，仍是点击开发工具左侧的“项目”按钮，而后在右侧再点击“预览”按钮就会生成一个二维码，用注册时填写的微信号扫描此二维码便可真机查看效果了。须要注意的是，以上面查看豆瓣电影数据为例，在真机上会出现数据不显示的问题，这时只用在手机右上角打开调试模式便可。

　　上线：开发完了代码也测试好了，这时候你们确定想正式发布上线以便更多的人使用，这时候怎么操做呢？首先点击开发工具左侧的“项目”按钮，而后在右侧再点击“上传”按钮点击肯定，扫描二维码赞成上传，此时会要求填写这次上传的版本号与备注，填写完后点击上传按钮就上传到微信公众平台后台了，以下图所示：

       
     上传到后台后，能够设置为体验版本，也能够直接提交审核，填写相应的审核信息提交审核后，会出现一个审核版本，审核经过了，在右侧会出现一个发布按钮，只有点击了此发布按钮了，你的小程序才算正式发布上线了，这时你们才能够在微信中搜索到。目前小记一笔总共提交了6个版本，通常腾讯审核工做人员周末不审核，工做日才审核，正常状况下一到两个工做日就能审核经过。

     体验：在正式提交审核以前能够将上传的版本设置为体验版，这样非管理员也能够体验小程序以便发现小程序存在的问题好及时改正。在微信公众平台后台的“用户身份”－“体验者”页面能够绑定体验者微信号，只有被绑定了体验者的微信号才能体验，并且必须将上传的小程序版本设置为体验版才能体验，你们须要记住要同时知足这两个条件才行。我作小记一笔时最开始只绑定了体验者微信号，没有设置体验版本，致使别人扫描二维码时总提示没有体验权限，这点你们须要清楚。

 

后台服务器：

　　要提供后台接口，则必须有服务器。如今可供你们选择的云服务器比较出名的有腾讯云，阿里云，小记一笔选择的是阿里云，稳定、高效。通常供我的用的云服务器一年的费用也没多少。有了云服务器，要给小程序提供接口则必须配置https协议和TLS版本。若是购买的是阿里云服务器，能够直接采用其官方提供的免费证书，官方有安装教程，你们参照其教程安装便可。下面提供一个网站，能够检测你的接口是否支持https协议，地址是：https://www.ssllabs.com/ssltest/index.html

 

结束语：

    小程序自上线以来，各类声音都有，有看好的，有各类唱衰的。我的认为小程序就像几年前的微信公众号，刚出来时也不被你们看好，但通过几年的发展，如今微信公众号也是渗透到各行各业中了。我相信通过腾讯的大力推广，小程序会被愈来愈多的人所接受。

　 最后，欢迎你们使用个人小程序，在微信中搜索“小记一笔”，或扫描下方的二维码进行使用，使用过程有什么好的建议也记得反馈给我哦，欢迎你们拍砖。