微信小程序调研文档

一时失言乱红尘 2022-07-13 15:16 140阅读 0赞

关于微信小程序之前只是听说，并没有引起我太大的兴趣。周一被小程序刷屏，然后就顺手搜索了解了一下。发现小程序已经火遍了整个程序员圈子。刚好团队内部有个需求需要微信小程序。就紧急对微信小程序进行了调研，阅读过开发者文档后总结了以下的几个开发者比较关心的问题：

1.  微信小程序提供给开发者的能力有哪些；
2.  在微信小程序易忽略的知识点和代码安全问题；
3.  PassFE和PassRD的学习和开发成本；

**注意：这篇文章删除了一些跟我当前业务相关的一些内容。如果有兴趣小程序开发的我们可以一起交流哈。**

## 1.首先看微信小程序提供给开发者的能力有哪些？ ##

*  Request请求
 *  上传，下载
 *  Websocket请求
 *  媒体
    
     *  图片选择（获取图片信息）
     *  录音
     *  音频播放控制
     *  音乐播放控制
     *  文件的相关操作
     *  数据存储（跟h5的一样）
 *  设备
    
     *  获取用户的地理位置信息
     *  获取用户的设备信息（网络，系统，重力感应，罗盘，拨打电话，扫码）
 *  界面  
    
    
     *  交互反馈，设置导航条样式，导航，动画
     *  绘图，下拉刷新
 *  开放的接口  
    
    
     *  登录，获取用户信息，微信支付，模板消息

## 2.微信小程序中页面运行环境和登录可能面临的安全问题。 ##

*  小程序的运行环境是微信客户端提供的类浏览器（WebView）运行环境。小程序相当于运行在一个浏览器环境中。
 *  小程序的请求都必须是https的请求。支持常用的HTTP协议的方法，比如：PUT,GET,POST等；因为所有的请求都是由NA转发的，所以不会存在跨域的问题（微信小程序的设置页面可以设置）。小程序的网络请求的referer是不可以设置，格式是固定的格式。
 *  小程序运行在微信的渲染引擎中是不支持window和document对象。所以无法使用这两个对象操作cookie操作。开发者可以通过 wx.setStorage等方法在客户端存储数据操作；
 *  是否可以收集用户的敏感信息。当前只是可以获取用户的地理位置，头像，昵称信息。其它信息不能够获取。（首先微信的登录接口不提供这样的能力，第二微信有审核机制，如果我们有这样的代码，小程序可能审核不通过）
 *  出现安全问题后，从修复问题到上线的响应时长的问题。暂时没有上线经历，没办法给出这个时间；
 *  微信小程序的代码包大小当前限制是1MB。所以页面引用的图片或者是文件必须以外链的方式；

## 3.微信小程序的学习和开发成本 ##

### 3.1已经有的页面样式是否可以复用到微信小程序中 ###

微信小程序有自己的设计规范，需要UI同学按照微信小程序的设计规范评估我们当前的UI是否符合微信的设计规范，否则会存在审核不通过的可能。

微信小程序的UI规范地址：[https://mp.weixin.qq.com/debug/wxadoc/design/][https_mp.weixin.qq.com_debug_wxadoc_design]?

### 3.2小程序的开发思想 ###

微信小程序借鉴了当前非常流行的前端框架react和vue的开发思想，组件化的开发方式。一个页面就是一个组件，一个组件由以下4个部分组成：

![微信小程序的包含内容][2017-01-13-QQ20170111-105251-2x.png_imageslim]

所以在开发微信小程序的过程中我们需要学习微信小程序的wxml语法。个人认为wxml的语法相对还是比较容易掌握的。而wxss的语法就是我们熟知的css的语法，只是不支持一些高级的css选择器。

### 3.3对后端工程师的影响 ###

通过下图了解小程序的页面的渲染过程

![微信小程序的渲染过程][2017-01-13-QQ20170111-105312-2x.png_imageslim]

由上面的流程可以知道在小程序的渲染引擎渲染页面的时候，页面需要的数据都是通过接口获取的。而我们现在的开发模式基本都是后端php渲染smarty模板，渲染过程中会将某些前端需要的变量或者是参数写到Html页面中。如果以后要在小程序中拓展Pass的能力，后端会有一定的开发成本；

如果你当前的开发模式跟我们的一样，如果想要在小程序中开发自己的页面，也是会有一定的后端开发成本的；

以上就是对支持产品线在微信小程序中登录面临的问题的调研结果和对我们当前服务能力的影响。大家如果对微信小程序有兴趣可以跟我交流哈。

[https_mp.weixin.qq.com_debug_wxadoc_design]: https://mp.weixin.qq.com/debug/wxadoc/design/
[2017-01-13-QQ20170111-105251-2x.png_imageslim]: http://7xs2tr.com1.z0.glb.clouddn.com/2017-01-13-QQ20170111-105251-2x.png?imageslim
[2017-01-13-QQ20170111-105312-2x.png_imageslim]: http://7xs2tr.com1.z0.glb.clouddn.com/2017-01-13-QQ20170111-105312-2x.png?imageslim