小程序调研

一、市面上小程序平台主要分为四种

    1.微信小程序，接口主要以wx开头

    2.支付宝小程序（个人支付宝账号入驻，申请个人公测）接口主要以my开头

    3.字节跳动小程序 （不支持一键转换，不支持wepy,mpvue）接口主要以tt开头

    4.百度小程序（暂不支持个人）接口主要以swan开头

二、用mpvue框架以微信小程序为例

    1.进行小程序注册

    2.安装开发者工具

    用mpvue创建一个小程序项目

    1.全局安装vue-cli

    $ npm install --global vue-cli

    2.创建一个基于mpvue-quickstart 模板的新项目 

    $ vue init mpvue/mpvue-quickstart my-project

    3. 安装依赖 

    $ cd my-project

    $ npm install

    4.启动构建

    $ npm run dev

下载模板过程中有输入小程序的appId的，可以直接回车，或者在微信公众平台中 设置 找到小程序的appId填上

打开微信开发者工具将该项目导入，之前没有输入appId的在此时填入

1.上传头像

调用wx.chooseImage(),wx.upLoadFile()以及药神中上传头像接口

2.登录授权

通过wx.login()接口成功可以获取到返回来的code，然后调用wx.request()向服务器发起请求（登录接口）换取到openid和session_key，然后通过wx.getUserinfo()接口获取用户的基本信息

获取用户信息官方文档中"wx.authorize({scope: "scope.userInfo"})，不会弹出授权窗口，使用<button open-type="getUserInfo"/>"，也就是需要用户手动点击open-type=getUserInfo的<button>组件才可以弹出请求权限的弹窗

3.获取地理位置

通过wx.getLocation()接口获取用户的地理位置

需要在app.json中设置

‘permission’:{

‘scope.userLocation’:{

       ‘desc’:‘获取位置’

}

}

e.authSetting[‘scope.userLocation’]为true时证明已经获取到地理位置，通过wx.chooseLocation()打开地图，选择位置

注意事项：

1.个人类型和海外类型小程序暂不支持使用web-view跳转外链

2.调用接口时需要在服务器域名中添加request合法域名

3.调用上传图像接口时需要添加uoloadFile合法域名

4.报错时将小程序npm run dev 生成的dist目录删除再运行一次

将开发工具中项目设置es6转 es5勾上

5.下载完开发工具之后可能会出现当前系统不是安全代理是否信任的问题，下载fiddler工具，设置本地代理

小程序的优势与劣势

优势：

1、无需下载，通过搜索和扫一扫就可以打开。

2、良好的用户体验：打开速度快。

3、开发成本要比App要低。

4、安卓上可以添加到桌面，与原生App差不多。

5、为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程， 不能通过审查的小程序是无法发布到线上的。

劣势：

1、限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。

2、样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。

3、推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。

4、依托于微信，无法开发后台管理功能。

如何提高小程序应用速度

1、提高页面加载速度

2、用户行为预测

3、减少默认 data 的大小

4、组件化方案