01. Ego微商小程序

• 参考链接

  • https://mp.weixin.qq.com/
  • https://developers.weixin.qq.com/miniprogram/design/
  • https://developers.weixin.qq.com/miniprogram/dev/framework/

• 学习路径

  • 为学习小程序项目测试做前置准备工作

  • 体现小程序项目中和APP项目不同点测试

1. 微信小程序基础

1. 微信小程序背景介绍

image-20230307102257406

• 时间：2017年1月份 （简历中如果写微信小程序的项目建议写2018年之后)

• 定位：取代一切不常用APP，释放手机资源

2. 微信小程序定义

• 微信小程序定义简称小程序，英文名称MiniProgram，是依附于微信而无需再次下载安装的应用程序
• 实现了应用 “触手可及” 的梦想， 用户扫一扫或搜一下即可打开应用，良好的用户体验性

3. 微信小程序特点及应用领域

• 特点
  • 无需下载，即用即走
    • 功能丰富，清爽体验
    • 流量大、易裂变
• 应用领域
  • 常见成熟领域
    • 零售、出行、医疗
  • 使用角度覆盖
    • 衣、食、住、行、用

2. 微信小程序设计

1. 微信小程序优点

基于微信小程序轻快的特点， 旨在微信生态体系内，建立友好、高效、一致的用户体验。

• 导航明确、来去自如
  • 每个页面的导航指向清晰，有路可退
• 流程明确、避免干扰
  • 集中精力聚焦当前任务，保持顺畅使用
• 重点突出、主次清晰
  • 简明扼要，重点突出，无过多干扰
• 符合预期、降低难度
  • 根据用户使用习惯，降低学习使用成本
• 减少等待、明确反馈
  • 需要等待过程保持动态效果，反馈形式多样
• 异常处理、和谐统一
  • 异常提醒清楚，保持页面风格统一

更多参见微信官方链接: https://developers.weixin.qq.com/miniprogram/design/

2. 微信小程序优点案例图

https://developers.weixin.qq.com/miniprogram/design/

\

image-20230307103644861

3. 微信小程序设计“不足”

• 页面数量
  • 每个应用最多能同时打开5个页面 (包含页面跳转) 一般设计不超过三级页面
• 文件大小
  • 小程序源码文件有大小限制( 目前：总包大小不超过20M ，单个分包不超过2M)
• 业务逻辑
  • 微信小程序不适用于复杂的业务处理

测试场景应用 : 验证小程序的优点, 避免出现小程序的不足

3. 微信开发者工具

方便开发测试人员直接使用工具进行开发和测试工作

支持： windows/mac

1. 微信开发者工具版本

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

• 开发版
  • 内部最新版本稳定性欠佳。
• 预发布版
  • 已通过微信内部测试，稳定性一般。
• 稳定版
  • 开发者工具稳定版使用多，基本稳定 (第三方开发和测试使用的首选) 。

2. 微信开发者工具界面布局

• 初始化界面

  

  image-20230307171343495

• 项目主界面

  

  image-20230307171413531

3. 微信开发者工具常见操作

• 模拟器：开发者工具模拟手机显示当前项目运行后状态显示。
• 编辑器：编辑代码的区域，提供快捷显示/关闭项目代码区域。
• 调试器：调试代码的区域，提供快捷显示/关闭调试区域。
• 编译：将源代码转换为计算机可识别的机器码过程 (配合清缓存一起使用) 。

4. 微信开发者工具介绍操作练习

要求：先下载安装后微信开发者工具，使用默认项目练习常用几个按钮操作 
    1.编辑器 (打开/关闭)                                                 
    2.模拟器 (打开/关闭)                                                 
    3.调试器 (打开/关闭)                                                 
    4.编译                                                                
    5.清除缓存记录
备注：细节可参考官方文档对于工具本身的说明

4. 微信小程序项目结构

1. 微信小程序项目文件识别

开发给你的项目文件包你打开能识别么？

2. 微信小程序项目文件对比

image-20230307110904638

作用：开发给项目文件包之后，能区分出什么类型的项目文件即可

注意：wxml + wxss + js 一般不用前端复杂的框架

• wxml：微信小程序的页面模板文件
• wxss：微信小程序的页面的样式文件
• js：微信小程序的页面的逻辑处理文件
• json：微信小程序项目配置文件

3. 微信小程序项目文件分类

image-20230307110932521

4. 微信小程序通讯模型

微信小程序是如何和后台进行通讯的呢？

image-20230307111015730

• 应用场景

  • 微信小程序如何和后台进行通讯（做接口测试）

• 注意事项

  • 微信小程序无法直接和后台服务器进行通讯
  • 微信小程序必须依附于微信（客户端/微信接口服务器）进行和后台正常通讯

5. 小程序和APP的对比

1. 微信小程序

• 简单，无需安装
• 无需注册，只需授权
• 兼容各种手机 (与微信有关)
• 开发成本费用低
• 超10亿+的流量入口

2. APP

• 复杂，需要安装
• 需要注册登录
• 不同移动操作系统分别开发
• 开发成本费用高
• 自行推广引流

3. 微信小程序和APP的区别汇总

• 入口

  • 下载、搜索、扫码
    • 小程序：进入小程序测试（扫码、搜索、下拉进入、分享、卡包等进行授权即可)
    • APP：通过网站进行下载（下载注册登录)

• 部署

  • 安装、卸载、升级
    • 小程序：无需下载安装即可使用
    • APP ：需要安装、卸载、升级

• 兼容

  • 操作系统、屏幕尺寸
    • 小程序：微信的版本和手机的分辨率
    • APP ：不同的操作系统，同一操作系统的不同版本，屏幕分辨率

• 成本

  • 开发成本、维护成本

• 营销

  • 人工营销、平台流量

测试总结重点关注：入口、部署、兼容测试点

4. 微信小程序和APP的联系

image-20230307111412013

• 联系
  • 点对点服务
  • 都是移动端应用