小程序-webview-h5

小程序设计

1.小程序优点

• 自带推广

  附件小程序

• 触手可及，用完即走

  占用手机内存空间少：

  1.首次加载小程序时，微信从服务器上下载的小程序本体。

  2.小程序在运行过程中，存放至本地的数据。

  小程序所占用的存储空间会被计算在微信中。

• 微信搜索

• 微信小程序码

  提供三种方式生成微信二维码，包括扫描二维码可以进入指定的页面

  ​
  wxewm.png

• 成本更低

  大众创业者：启动资金低，相对于APP运营维护以及推广成本更低

  零售商家：不需要交给平台固定的套餐费用

• 更流畅的使用体验

  流畅度几乎可以媲美 App，功能和体验上秒杀H5页面，小程序是一个应用程序，而 H5 仅仅是一个网页页面

• 提供很多强大的API

  如图片的上传下载、录音、播放视频、实时音视频、数据缓存、获取地理位置

2.小程序缺点

• 打包大小受到限制，最新上限为10M

• 技术框架还不稳定，开发方法时常有修改

• 没有直接分享到朋友圈的接口，但是可以通过生成小程序码等方式进行分享

  ​

3.小程序与H5关联

解决方案：

使用小程序的 web-view组件

小程序

使用 web-view 组件进行跳转，在跳转的地址中传递用户id，产品id等参数和值

H5页面

在链接的 h5 页面使用正则表达式解析出跳转地址所带的参数和值

功能点：

1.小程序与h5页面的相互跳转

2.h5页面特色功能：

• 微信卡劵

• 微信扫一扫

跳转的H5页面需要在小程序官方后台进行设置

把你的域名添加到业务域名里，只有业务域名中的网站页面，才能在小程序里显示。

4.mpvue

mpvue 是一个使用 vue.js开发小程序的前端框架

使得用vue.js编写的前端代码能够运行在小程序中

mpvue.png

优势

1. 可以和H5做适应，简单的H5可能可以一套代码跑多端。

2. 用Vue语法上手更容易。

3. 配合webpack定制更灵活

   劣势

4. 不支持纯HTML，BOM/DOM都不能用

5. 生态还不够完善，没有完善的组件库

6. 暂不支持mintUI和elementUI