微信小程序简介、设计规范、运营规范等基础知识

红太狼 2022-09-07 12:24 266阅读 0赞

# 微信小程序开发须知 #

微信小程序开发前的需要了解的基础知识。  
下文为阅读[微信官方文档·小程序][Link 1]后的总结和提炼。

## 一、小程序介绍 ##

[微信官方介绍文档 - 点击跳转][Link 1]  
微信小程序类似流应用，用户使用时无需安装，直接基于微信应用中就可以直接使用。  
非常时候做一些用户粘性不高或非入口类型的轻应用，如：车来了、社保查询等公共服务。

### 1. 注册账号 ###

小程序是通过单个账号来进行管理的，我们第一步需要先在微信公众平台官网首页进行账号的注册及认证等工作。

*  认证  
    小程序主体为组织的，需要进行验证。认证通过前，小程序部分功能暂无法使用。
    
     *  已认证帐号可使用微信支付权限。
     *  个人类型帐号暂不支持微信认证。
 *  管理员  
    进行小程序管理员信息登记。
 *  完善信息  
    包括名称、头像、介绍等。
 *  服务类目  
    选择应用所属类目。

### 2. 开发准备 ###

*  绑定开发者
 *  绑定体验者
 *  获取AppID  
    进入“设置-开发设置”，获取AppID信息。
 *  申请需要用到的接口，如支付、直播等

### 3. 代码审核与发布 ###

*  上传代码
 *  提交审核
 *  审核信息填写
 *  审核通过时发版

### 4. 开放平台 ###

小程序绑定微信开放平台帐号后，可与帐号下的其他移动应用、网站应用及公众号打通。  
**UnionID**机制满足在多个应用和公众号之间统一用户帐号的需求，比如在支付的时候都是一个收款人。

*  公众号关联小程序  
    公众号关联小程序后，将可在自定义菜单、模板消息、客服消息等功能中使用小程序。  
    相当于多了一个小程序的入口，可做引流操作。
 *  移动应用关联小程序  
    APP关联小程序后，将可从APP跳转到微信，打开关联的小程序。  
    在同一开放平台账号下的移动应用及小程序无需关联即可完成跳转。
 *  在企业微信中使用小程序  
    企业微信移动客户端有内置小程序基础库，微信小程序可在企业微信上运行，同时开发者也可以针对企业微信提供的特殊接口开发出更适应于企业内部场景的小程序。需注意，企业微信只支持运行已在微信侧上架的小程序。  
    企业微信类似钉钉，可提供工作台。
 *  硬件设备关联小程序  
    为手机、笔记本、手表等智能设备扩展应用资源，使其不用打开微信就能使用小程序功能。

### 5、客服功能 ###

因为微信本身就是一个聊天软件，理所当然的把这种能力扩展到的小程序中。  
开发者在小程序内添加[客服消息按钮组件][Link 2]，用户可在小程序内唤起客服会话页面，给小程序发消息。

客服人员需要通过调用发送客服消息接口或使用公众平台网页版客服工具进行回复，无法直接在手机微信端回复。

### 6. 扫码打开小程序 ###

为了方便小程序开发者更便捷地推广小程序，兼容线下已有的二维码，微信公众平台开放扫描普通链接二维码跳转小程序能力。

*  二维码地址可以指定参数，根据不同的参数可跳转到指定的小程序页面。

### 7. 小程序插件功能 ###

插件，是可被添加到小程序内直接使用的功能组件。开发者可以像开发小程序一样开发一个插件，供其他小程序使用。同时，小程序开发者可直接在小程序内使用插件，无需重复开发。

*  最典型的就是一个企业，开发一个支付插件，然后企业的所用小程序都可以使用。

### 8. 官方搜索广告 ###

就是微信官方提供的流量广告，可在搜索和朋友圈中进行展示。

## 二、设计指南 ##

[微信小程序设计指南 – 官方说明][Link 3]  
首先是小程序的整体设计风格和交互思路。  
这是开发一款小程序说需要了解的第一步，建议大家跳转官方文档详细阅读。  
虽然一些优秀的小程序并未完全遵循“微信小程序设计指南”中的建议，那是因为他们本身在设计上足够优秀。  
对于大多数的开发者来说，按照“微信小程序设计指南”中的建议来进行开发仍是最优的选择。

就我目前使用的小程序中，我觉得“ETCP”这小程序很是垃圾，完全违背了设计指南，但是这个也不怪开发者，主要是企业要赚这这些广告费。但是因为停车缴费要使用，不然早就…

### 1. 友好礼貌 ###

核心思想就是让用户不反馈。

#### 重点突出 ####

每个页面上的重点内容都应该和次要内容有所区分，视觉引导至重要内容上。  
比如：  
在“确认”和“取消”按键上，应该使用不同的样式风格；并针对当前业务突出显示其一。

#### 流程明确 ####

在用户进行某一项操作时，应避免操作之外的内容打断该操作。  
比如：  
在搜索过程中，不要加入广告来打断搜索流程。

### 2. 清晰明确 ###

核心思想就是让用户一看就知道怎么用。

#### 导航栏 ####

页面导航栏需要让用户知道当前在哪儿，以及有明确的返回按键。  
做到：导航明确，来去自如。

*  小程序菜单  
    每个页面右上角都是固定的小程序菜单，设计是需要留出相应位置。
 *  小程序菜单配色方案  
    小程序菜单有深浅两种配色方案，根据导航栏背景颜色合理选择。
 *  页面内导航  
    保持应用内导航栏风格一致，整体上尽量简洁。
 *  标签分页导航
    
     *  一个页面页面上不能出现一组以上的标签分页栏。
     *  一组标签分页栏标签数量不得少于2个，最多不得超过5个。
     *  首页建议使用微信提供的原生部标签分页导航，已获得更好的性能体验（仅供首页使用）。

#### 加载和反馈 ####

加载数据是不可避免的，那么在加载时应该有简洁的动画反馈到用户。  
做到：减少等待，反馈及时

*  启动页加载  
    由微信统一管理，开发者无需上心。
 *  页面下拉刷新加载  
    微信提供标准的页面下拉刷新加载能力和样式，开发者无需自行开发。
 *  页面内加载反馈  
    开发者可自定义页面内容的加载样式，整体要简洁明了。
 *  模态加载  
    模态的加载样式将覆盖整个页面，除了在某些全局性操作下不建议使用模态的加载。
 *  局部加载反馈  
    在局部出发加载反馈，这种机制更有针对性，是推荐的反馈方式。  
    常常用在提交按键或富文本内容加载上。
 *  全局加载反馈  
    使用标题栏提示加载小程序页面内容的过程，以在某些情况下替代模态加载。

**注意事项**

*  若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。
 *  载入过程中,应保持动画效果 ; 无动画效果的加载很容易让人产生该界面已经卡死的错觉。
 *  不要在同一个页面同时使用超过1个加载动画。

**结果反馈**  
除了在用户等待的过程中需予以及时反馈外，对操作的结果也需要予以明确反馈。  
反馈方式包括但不限于：

*  操作区域予以直接反馈（如：选中、开关）
 *  弹出式提示（如：操作成功、切换成功）
 *  模态对话框（如：询问是否删除）
 *  结果页面展示（如：花呗还账成功页面）

#### 异常状态 ####

核心思想事出必有因，给用户以描述。  
做到：异常可控，有路可退

*  表单出错  
    在表单顶部告知错误原因，并标识出错误字段提示用户修改。
 *  网络出错  
    全局提醒，告知用户查看网络情况。
 *  服务端出错  
    幽默提醒，并告知稍后再试。
 *  参数丢失  
    幽默提醒，并告重新操作。

### 3. 便捷优雅 ###

核心思想减少用户使用键盘输入的内容，通过接口提高使用便捷性。

*  减少输入
    
     *  用选着代替输入，能直接做成字典项选着的就别让用户输入，如用户性别等。
     *  用接口代替输入，能通过接口读取的就通过接口获取，如位置、银行卡识别等。
     *  用记忆代替输入，合理记录以前的录入信息，如上一次的搜索关键字等。
 *  避免误操作  
    手指在不大的屏幕上的点击精确度不如鼠标，合理布局；设计时考虑到误触。
 *  利用接口提升性能  
    合理利用微信官方提供的组件和接口，它们都充分考虑了移动端的特点，可以保证可用性和操作性能。

### 4. 统一稳定 ###

除以上原则外，还应该注意应用整体的统一性和延续性。  
包括且不限于页面的布局和样式以及交互方式等。

### 5. 视觉规范 ###

为了视觉上的统一，微信官方针对以下内置指定了相关规范：  
字体(字号和颜色)、列表、单输入、按钮、图标、小程序菜单。

## 三、运营规范 ##

[微信官方运营规范 - 点击跳转][-]  
不能搞违法违规的事情。

### 1. 不允许的行为 ###

*  滥用分享
 *  刷量
 *  网赚
 *  外挂
 *  侵犯名誉/商誉/隐私/肖像
 *  侵犯知识产权
 *  类目不符
 *  游戏测试
 *  多级分销
 *  互推
 *  欺诈
 *  收集用户隐私
 *  虚拟支付
 *  混淆
 *  滥用接口
 *  过度营销
 *  红包类
 *  内容违法
 *  绕开、规避或对抗平台审核监管
 *  诱导下载
 *  滥用订阅消息
 *  交易争议
 *  有偿投屏

### 2. 不允许的内容 ###

*  违反国家法律法规禁止的内容
 *  色情低俗
 *  垃圾广告

### 3. 技术实现规范 ###

*  遵守微信小程序开发文档和开发规范中的规则和约定。
 *  微信小程序开发者允许并授权微信团队对提交的代码进行漏洞安全测试。
 *  系统安全要求
    
     *  严禁利用手机系统、微信或其他软件或硬件的技术漏洞，一旦发现将回收微信小程序主体的帐号资格。
     *  不得安装或运行其他可执行代码的程序。
     *  不得利用微信小程序传播病毒。
 *  API 的使用
    
     *  不得使用非公开的API的程序。
     *  使用内测中的API的程序，微信团队有权保留回收接口的权利。
     *  禁止违规（跨主体）使用其他第三方应用的API。
     *  未经腾讯允许，不得将我们的代码、API或工具出售、转让或转授给他人。
     *  不得对任何SDK或组件进行修改、转译或进行逆向工程，也不得将其用之于制作衍生产品。
 *  其它要求
    
     *  执行多任务时，使用后台服务仅限于几种目的：VoIP、音频播放、地理位置、完成任务以及本地提醒等。
     *  不得改变原生用户界面元素和行为（如音量增减和静音开关或其他）。
     *  禁止视频、音乐、语音等多媒体的自动播放。
     *  不得在用户不知情的情况下，使用录音功能。
 *  授权登录
    
     *  微信小程序内存在帐号体系时，必须提供微信授权登录。
     *  如果用户选择拒绝授权，你可以在用户表现出向你授予权限的意向后再次提醒他们。
     *  应提供功能正常且易于发现的“退出”选项。
     *  用户拒绝授权后，开发者有义务清除并不再继续使用该用户的微信头像、昵称等数据。
 *  文件下载
    
     *  需显式提示用户，使用uploadFile接口上传文件，不得重复多次上传相同文件。
     *  在移动网络下，不得在用户不知情的情况下，使用downloadFile接口下载过多文件。
 *  模板消息
    
     *  模板消息的使用，必须遵守微信小程序模板消息规范。
     *  不得恶意诱导用户进行触发操作，以达到可向用户下发模板目的。
     *  不得恶意骚扰，下发对用户造成骚扰的模板。
     *  不得恶意营销，下发营销目的的模板。

### 4. 投诉与处罚 ###

投诉过多且拒不悔改的，将被关闭申诉渠道。  
多次违法违规后，将决绝主体服务。

### 5. 微信小店 ###

微信小商店是小程序团队提供的一项新能力，无需开发、免费开店，帮助商家快速生成卖货小程序。

## 四、数据分析 ##

小程序数据分析，是面向小程序开发者、运营者的数据分析工具，提供关键指标统计、实时访问监控、自定义分析等，帮助小程序产品迭代优化和运营。主要功能包括每日例行统计的标准分析，以及满足用户个性化需求的自定义分析。

### 1. 常规分析 ###

主要包括行为分析、来源分析、留存分析、页面分析、实时统计、用户画像。

### 2. 自定义分析 ###

除开以上的常规分析，开发者还可以在代码中植入上报事件，对程序内部进行精细化跟踪。

### 3. 实验工具 ###

在两个策略被产品团队举棋不定时，使用A/B实验的方法，已数据的形式那辅助决策。

### 4. 小程序数数据助手 ###

“小程序数据助手”是微信公众平台发布的官方小程序，支持相关的开发和运营人员查看自身小程序的运营数据。

### 5. We分析 ###

We分析-洞察分析，是微信官方提供的中立辅助数据分析技术服务。  
开通后，你可以在小程序调用基础库接口进行数据接入，并进行数据事件管理。  
完成接入后，你可以对小程序进行深入的数据分析，了解经营现状，寻找业务增长。

## 五、名词解释 ##

*  [微信公众平台][Link 4]  
    微信公众平台是微信公众账号申请入口和管理后台。商户可以在公众平台提交基本资料、业务资料、财务资料申请开通微信支付功能。
 *  [微信开放平台][Link 5]  
    微信开放平台是商户APP接入微信支付开放接口的申请入口，通过此平台可申请微信APP支付。
 *  [微信商户平台][Link 6]  
    微信商户平台是微信支付相关的商户功能集合，包括参数配置、支付数据查询与统计、在线退款、代金券或立减优惠运营等功能。
 *  [微信企业号][Link 7]  
    微信企业号是企业号的申请入口和管理后台，商户可以在企业号提交基本资料、业务资料、财务资料申请开通微信支付功能。  
    企业号入口：。
 *  微信支付系统  
    微信支付系统是指完成微信支付流程中涉及的API接口、后台业务处理系统、账务系统、回调通知等系统的总称。
 *  [微信小程序][Link 8]  
    微信小程序是微信提供给商户实现APP的一种轻应用，开发起来简单，易用。
 *  商户后台系统  
    商户后台系统是商户后台处理业务系统的总称，例如：商户网站、收银系统、进销存系统、发货系统、客服系统等。
 *  商户证书  
    商户证书是微信提供的二进制文件，商户系统发起与微信支付后台服务器通信请求的时候，作为微信支付后台识别商户真实身份的凭据。
 *  签名  
    商户后台和微信支付后台根据相同的密钥和算法生成一个结果，用于校验双方身份合法性。签名的算法由微信支付制定并公开，常用的签名方式有：MD5、SHA1、SHA256、HMAC等。
 *  JSAPI网页支付  
    JSAPI网页支付即前文说的公众号支付，可在微信公众号、朋友圈、聊天会话中点击页面链接，或者用微信“扫一扫”扫描页面地址二维码在微信中打开商户HTML5页面，在页面内下单完成支付。
 *  支付密码  
    支付密码是用户开通微信支付时单独设置的密码，用于确认支付完成交易授权。该密码与微信登录密码不同。
 *  Openid  
    用户在小程序内的身份标识，不同小程序拥有不同的openid。商户后台系统通过登录授权、支付通知、查询订单等API可获取到用户的openid。主要用途是判断是否为同一个用户。可调用接口获取openid。

[Link 1]: https://developers.weixin.qq.com/miniprogram/introduction/
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/component/button.html
[Link 3]: https://developers.weixin.qq.com/miniprogram/design/
[-]: https://developers.weixin.qq.com/miniprogram/product/
[Link 4]: https://mp.weixin.qq.com
[Link 5]: https://open.weixin.qq.com
[Link 6]: https://pay.weixin.qq.com
[Link 7]: https://qy.weixin.qq.com
[Link 8]: https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN