全营销数字服务平台丨榕媒圈

标签： 微信小程序开发文档

  • 小程序代开发 || 全流程操作超详细版本（含小程序申请、授权、发布、配置等）

    小程序代开发 || 全流程操作超详细版本（含小程序申请、授权、发布、配置等）

    点击蓝字，关注我们


    微信小程序开发模式有2种，一种是直接开发，一种是代开发


    直接开发指的是企业或个人自行组建技术团队，使用微信或其他平台提供的小程序开发工具、框架和API，进行小程序的设计、编码、测试和发布。


    代开发指的是企业将小程序的开发需求委托给专业的第三方开发团队。


    最近公司新开了一个项目，在这个项目中，每个商家都会有各自的小程序，所以我们需要帮商家开发小程序，即作为第三方开发团队帮用户代开发小程序。


    微信提供的文档特别多，对于小白来说，梳理小程序发版的业务流程确实有点难度，这篇文章将对小程序代开发业务流程进行总结梳理并结合实际应用例子展开进行描述，希望帮助和我一样的小白快速掌握


    需要注意的是，本文主要阐述的是代开发小程序的流程，即帮商家开发小程序，涉及的接口文档主要为：代商家管理小程序相关的接口：


    链接：https://developers.weixin.qq.com/doc/oplatform/openApi/OpenApiDoc/miniprogram-management/login/thirdpartyCode2Session.html


    关于代开发小程序发布，其业务流程可分为以下步骤


    1、  申请小程序

    2、  将小程序授权给第三方平台

    3、  获取小程序token

    4、  配置用户隐私协议指引

    5、  服务器域名设置

    6、  申请小程序权限

    7、  发布小程序


    1

    申请小程序


    链接：https://developers.weixin.qq.com/miniprogram/introduction/#%E6%B3%A8%E5%86%8C%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%B4%A6%E5%8F%B7


    申请2个小程序，小程序A用于开发功能、发布代码，小程序B用于测试授权，供用户使用；


    在微信公众平台官网首页（https://mp.weixin.qq.com/）点击右上角的“立即注册”按钮。



    ● 选择注册的账号类型


    选择“小程序”，点击“查看类型区别”可查看不同类型账号的区别和优势。


    ● 填写邮箱和密码


    请填写未注册过公众平台、开放平台、企业号、未绑定个人号的邮箱。


    ● 激活邮箱

    登录邮箱，查收激活邮件，点击激活链接。


    ● 填写主体信息


    点击激活链接后，继续下一步的注册流程。请选择主体类型选择，完善主体信息和管理员信息。


    ● 填写管理员信息



    ● 确认主体信息不可变更



    ● 点击确认完成注册流程


    选择对公打款的用户，请根据页面提示，向指定的收款账号汇入指定金额。


    ● 完成注册后，需要完善微信小程序信息并进行小程序备案


    选择对公打款的用户，完成汇款验证后，可以补充小程序名称信息，上传小程序头像，填写小程序介绍并选择服务范围



    2

    将小程序授权给第三方平台



    这个步骤主要是用来将小程序和管理后台进行关联，商家将小程序授权给第三方平台，在这一步需要填写的基础信息包括：小程序APPID、小程序原始ID、小程序AppSecret


    （1）如何获取小程序APPID、小程序原始ID


    前往微信小程序管理后台，点击账号个人信息找到【账号设置】，进入账号设置页面并找到账号信息，即可查看到小程序APPID和小程序原始ID，复制输入至输入框即可。



    （2）如何获取小程序AppSecret


    找到下方【管理-开发管理】并在界面选择【开发设置】tab，即可查看到小程序AppSecret，出于安全考虑，小程序密钥（AppSecret）不被明文保存，如果生成后忘记密钥需要点击重置。



    拿到用户小程序APPID、小程序原始ID、小程序AppSecret之后，便可以进行微信授权操作，微信授权的构建方式有2种，分别是自建授权链接、使用官方云服务生产授权链接



    1、  自建授权链接的步骤


    自建授权链接完成授权是最常用的微信授权方式，其步骤如下：



    （1）构建授权链接


    商家扫码访问授权链接，拿auth_code


    链接：https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/Before_Develop/Authorization_Process_Technical_Description.html



    （2）使用授权码获取授权信息


    拿auth_code获取authorizer_refresh_token


    链接：https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/ThirdParty/token/authorization_info.html



    （3）获取授权账号调用令牌/刷新


    authorizer_refresh_token换authorizer_access_token，

    authorizer_access_token 调用代商家管理小程序接口必传字段


    链接：https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/ThirdParty/token/api_authorizer_token.html




    2、  通过 “一键部署官方提供的第三方平台云服务” 的方式获得系统自动生成的授权链接与授权码。



    3、  相关说明


    ● 解除授权：如果商家需要解除授权，则需要登录微信公众号平台（https://mp.weixin.qq.com/）进行操作；当前不支持第三方服务商主动解除授权。


    ● 修改权限：如果小程序/公众号管理员只想取消对服务商的个别权限集的授权，则可以重新扫码进入授权页面，然后自定义权限集，重新授权即可。（如果是小程序商家，则可以前往微信公众号平台（https://mp.weixin.qq.com/） – 设置-第三方设置-管理授权，进入更新授权页面后取消部分授权即可）


    ● 新增权限：当官方开放新的权限集，服务商可前往第三方平台增加新的权限，以满足新的业务需求。修改后新授权的公众号/小程序授权时会增加新权限的申请；已授权的老用户，旧有权限不影响，但新权限集需要商家重新扫描授权升级后才可获得


    3

    获取小程序token


    这个步骤主要作用是生成Token，token是调用接口时的必传字段，在完成了商家授权给第三方平台之后，第三方平台则可以获得authorizer_access_token进行调用相关api，获取token的流程如下，其中3、4、5与微信授权流程对应：


    链接：https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/Before_Develop/creat_token.html




    1、  消息推送


    是开放平台推出的一种主动推送服务，基于该推送服务，开发者及时获取开放平台相关信息，无需调用API。


    获取component_verify_ticket


    链接：https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/ThirdParty/token/component_verify_ticket.html


    2、  获取授权账号调用令牌


    根据authorizer_refresh_token获取component_access_token ，

    是第三方平台接口的调用凭据


    链接：https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/ThirdParty/token/component_access_token.html


    3、  获取预授权码


    链接：https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/ThirdParty/token/pre_auth_code.html



    4、  构建授权链接，引导用户完成微信授权


    链接：https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/Before_Develop/Authorization_Process_Technical_Description.html


    5、  使用授权码获取授权信息


    链接：https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/ThirdParty/token/authorization_info.html


    6、  获取/刷新接口调用令牌


    根据 authorizer_refresh_token 获得 authorizer_access_token


    链接：https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/ThirdParty/token/api_authorizer_token.html


    4

    配置用户隐私协议指引


    每一个小程序都需要配置用户隐私协议指引才能进行发布，因此在提交代码版本前，均需补充相应用户隐私保护指引。


    （1）如何配置


    根据不同的开发模式，配置用户隐私协议指引的方式不同


    • 非代开发模式：即自己开发小程序


      可通过登陆微信公众平台在【小程序管理后台-设置-功能设置-用户隐私保护指引】进行配置




    • 代开发模式：即开发商开发小程序


      只能通过接口进行配置，通过接口进行配置时，一般来说有以下2种方式


    ① 统一配置


    所有小程序使用同一个用户隐私协议指引模版，直接由开发商写死，通过配置小程序用户隐私保护指引添加、修改、删除


    链接：https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/privacy_config/set_privacy_setting.html


    使用方法：用户完成微信授权收到回调后，自动调取该接口进行模版配置


    ② 自定义用户隐私保护指引


    每一个小程序使用不同的用户隐私协议模版，用户通过第三方管理后台对用户隐私协议进行配置，这个流程需要用到的接口包括：


    ● 上传：通过接口上传，获得ext_file_media_id


    链接：https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/privacy_config/upload_privacy_exfile.html


    ● 配置：然后再调用接口进行配置。


    链接：https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/privacy_config/set_privacy_setting.html


    使用方法：第三方管理后台设计一个页面供用户进行配置，示例如下：



    （2）协议内容怎么写？


    协议内容一般包括：引导语、开发者处理的信息、第三方插件信息、第三方服务商信息、用户权益、开发者对信息的存储、信息的使用规则、信息对外提供、联系方式、补充文档、日期等，可根据实际情况选择相应的内容进行填写，不一定要包括每一个方面


    链接介绍：https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/miniprogram-intro.html


    举例

    本指引是xxx小程序开发者“深圳智百威科技发展有限公司”为处理你的个人信息而制定。


    1、开发者处理的信息

    根据法律规定，开发者仅处理实现小程序功能所必要的信息。

    • 为了获取最近门店以及提供门店导航服务，开发者将在获取你的明示同意后，收集你的位置信息。

    • 为了保障订单有限以及售后及时与您联系，开发者将在获取你的明示同意后，收集你的手机号。

    • 为了快速识别您的身份，开发者将在获取你的明示同意后，收集你的微信昵称、头像。

    • 为了保存你生成的推荐码，开发者将在获取你的明示同意后，使用你的相册（仅写入）权限

    • 开发者收集你选中的照片或视频信息，访问你的摄像头，用于上传备注和个人头像。

    • 开发者读取你的剪切板，方便你复制电话号码和门店wifi密码


    2、你的权益

    2.1 关于收集你的位置信息，你可以通过以下路径：小程序主页右上角“…”—“设置”—点击特定信息—点击“不允许”，撤回对开发者的授权。


    2.2 关于收集你的手机号、收集你选中的照片或视频信息、读取你的剪切板，你可以通过以下路径：小程序主页右上角“…” — “设置” — “小程序已获取的信息” — 点击特定信息 — 点击“通知开发者删除”，开发者承诺收到通知后将删除信息。法律法规另有规定的，开发者承诺将停止除存储和采取必要的安全保护措施之外的处理。


    2.3 关于你的个人信息，你可以通过以下方式与开发者联系，行使查阅、复制、更正、删除等法定权利。


    2.4 若你在小程序中注册了账号，你可以通过以下方式与开发者联系，申请注销你在小程序中使用的账号。在受理你的申请后，开发者承诺在十五个工作日内完成核查和处理，并按照法律法规要求处理你的相关信息。


    – 电话: 400-613-8848


    3、开发者对信息的存储

    开发者承诺，除法律法规另有规定外，开发者对你的信息的保存期限应当为实现处理目的所必要的最短时间。


    4、信息的使用规则

    4.1 开发者将会在本指引所明示的用途内使用收集的信息


    4.2 如开发者使用你的信息超出本指引目的或合理范围，开发者必须在变更使用目的或范围前，再次以弹窗方式告知并征得你的明示同意。


    5、信息对外提供

    5.1 开发者承诺，不会主动共享或转让你的信息至任何第三方，如存在确需共享或转让时，开发者应当直接征得或确认第三方征得你的单独同意。


    5.2 开发者承诺，不会对外公开披露你的信息，如必须公开披露时，开发者应当向你告知公开披露的目的、披露信息的类型及可能涉及的信息，并征得你的单独同意。


    若你认为开发者未遵守上述约定，或有其他的投诉建议、或未成年人个人信息保护相关问题，可通过以下方式与开发者联系；或者向微信进行投诉。

    – 电话: 400-613-8848


    更新日期：2024年11月18日

    生效日期：2024年11月18日


    （3）协议配置成功后，在哪里展示？


    协议配置成功后，用户可在小程序进行查看


    ①通过授权弹窗的形式展示给用户，用户可点击进行查看



    ②在注册登录的时候进行展示


    ③ 在设置进行展示



    ④ 在小程序介绍处进行展示



    5

    服务器域名设置


    第三方平台在代替小程序发布代码之前，需要调用接口为小程序添加第三方平台自身的域名。需要注意的是，需要先将域名登记到第三方平台的小程序服务器域名中，才可以调用接口为商家小程序进行配置。


    链接：https://developers.weixin.qq.com/doc/oplatform/openApi/OpenApiDoc/miniprogram-management/domain-management/modifyServerDomain.html




    6

    申请小程序权限



    部分小程序前端api需申请后，方可使用，根据需要，在小程序后台申请相关的权限，或者通过调接口申请小程序权限


    链接：https://developers.weixin.qq.com/doc/oplatform/openApi/OpenApiDoc/miniprogram-management/privacy-api-management/applyPrivacyInterface.html



    7

    发布小程序



    链接：https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/product/how_to_dev.html




    第三方平台帮助旗下已授权的小程序进行开发小程序时，需先开发完成小程序模板，再将小程序模板部署到旗下小程序账号中，部署流程主要包含：构建小程序版本、小程序提交审核、发布小程序。


    下面将对代开发小程序发布的具体流程展开进行描述：



    1、  绑定开发小程序


    （1）第三方平台的开发人员需先到微信公众平台（mp.weixin.qq.com）申请一个普通的小程序并完善小程序的头像、昵称、简介、服务类目等信息。


    （2）进入微信开放平台，在第三方平台详情中，将该小程序添加为开发小程序，这个小程序将用于后续的开发，绑定开发小程序的步骤可参考：

    https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/operation/thirdparty/dev.html


    ● 登录开放平台，进入管理中心-第三方平台-详情-代开发小程序，一个第三方平台账号可绑定30个开发小程序

    ● 点击添加开发小程序，按照要求填写账号和密码、进行安全认证、最后绑定成功



    ● 绑定成功后也可以解除绑定


    2、  小程序代码编写


    在上个步骤中申请的开发小程序中进行代码编写


    3、  代码提交到草稿箱


    前往开发者工具，将编写好的代码提交到草稿箱中


    4、  草稿箱的代码提交到模版库


    将草稿箱中的代码提交到模板库中，供后续发布使用，提交到模版库的方式有2种，一般来说，直接在微信开放平台进行提交就可以了，2种方式如下：


    （1）前往微信开放平台完成提交


    （2）通过接口进行提交


    ● 获取代码草稿列表 :

    https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/ThirdParty/code_template/gettemplatedraftlist.html


    ● 将草稿添加到代码模板库：

    https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/ThirdParty/code_template/addtotemplate.html


    5、  发布模板库的代码


    这个步骤主要用来构建小程序版本


    （1）获取代码模板列表 ，拿到要发布的模版id


    https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/ThirdParty/code_template/gettemplatelist.html


    （2）根据模版id，将模版进行上传发布，为已授权的小程序上传代码 ，在这个步骤中，需要自定义小程序的版本号


    https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/code/commit.html



    为了方便第三方平台的开发者引入 extAppid 的开发调试工作，引入概念，该参数则是用于控制ext.json配置文件的内容，构建版本的时候，需要这个扩展参数


    6、  提交代码审核


    完成以上步骤后，便可以提交代码进行审核，但是在审核之前，需要再检查一下提交代码审核前的前置检查项


    ● 商家小程序名称、简介、类目和头像：前往小程序后台进行检查


    ● 商家用户隐私保护指引是否已经配置好


    ● 如果小程序还涉及申请地理位置等相关隐私接口，还需对相关api进行权限申请、在代码中进行声明


    前置项配置完成后，便可对代码进行提交，步骤如下：


    （1）获取已上传的代码页面列表，找到要提交审核的代码

    https://developers.weixin.qq.com/doc/oplatform/openApi/OpenApiDoc/miniprogram-management/code-management/getCodePage.html


    （2）提交代码审核：将要审核的代码提交进行审核

    https://developers.weixin.qq.com/doc/oplatform/openApi/OpenApiDoc/miniprogram-management/code-management/submitAudit.html


    当小程序有审核结果后，微信服务器会向第三方平台方的消息与事件接收 URL（创建第三方平台时填写）以 POST 的方式推送相关通知

    https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/ThirdParty/token/component_verify_ticket.html


    （3）除了等小程序回调审核结果外，还能通过接口查询指定版本的审核状态、查询最新一次提交的审核状态


    查询审核单状态：查询指定发布审核单的审核状态

    https://developers.weixin.qq.com/doc/oplatform/openApi/OpenApiDoc/miniprogram-management/code-management/getAuditStatus.html


    查询最新一次提审单的审核状态

    https://developers.weixin.qq.com/doc/oplatform/openApi/OpenApiDoc/miniprogram-management/code-management/getLatestAuditStatus.html


    7

    发布上线


    提交的代码审核通过即可发布使用


    发布已通过审核的小程序：发布最后一个审核通过的小程序代码版本

    https://developers.weixin.qq.com/doc/oplatform/openApi/OpenApiDoc/miniprogram-management/code-management/release.html



    代开发小程序发布设计实例




    1、  第三方管理后台小程序配置页面，用于微信授权，将小程序授权给第三方平台，必须字段：小程序appid、小程序原始id、小程序appsecret



    2、  配置用户隐私协议指引


    对于代开发小程序，无法在微信小程序后台进行配置，需要通过接口完成配置


    ① 统一配置


    所有小程序使用同一个用户隐私协议指引模版，直接由开发商写死，通过配置小程序用户隐私保护指引添加、修改、删除


    https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/privacy_config/set_privacy_setting.html


    使用方法：用户完成微信授权收到回调后，自动调取该接口进行模版配置



    ② 自定义用户隐私保护指引


    每一个小程序使用不同的用户隐私协议模版，用户通过第三方管理后台对用户隐私协议进行配置，这个流程需要用到的接口包括：


    ● 上传：通过接口上传，获得ext_file_media_id

    https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/privacy_config/upload_privacy_exfile.html


    ● 配置：然后再调用接口进行配置

    https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/api/privacy_config/set_privacy_setting.html


    使用方法：第三方管理后台设计一个页面供用户进行配置，示例如下：



    3、  授权成功后配置服务器域名、申请小程序相关权限


    4、  发布小程序





    — END —


    关注公众号【诺儿笔记本】，后台可获取【产品大礼包】，包含产品书籍、常用软件、常用文档模板等等


    交流学习，可添加微信up5499


    你“在看”我吗？

  • 详解小程序、h5、web、app的区别与联系

    详解小程序、h5、web、app的区别与联系


    我们在规划开发系统软件时，选择正确的开发方式和平台是至关重要，APP、小程序、H5和Web等不同的应用形态在人们的日常生活中扮演着越来越重要的角色，它们各有特点和适用场景。


    下面我们将从他们的优缺点、区别与联系，以及如何选择合适的应用形态等方面来详细探讨一下它们之间的区别。


    一、介绍


    1、  H5


    即HTML5，是一种用于构建网页和网页应用的标准技术，简单点说，就是我们平时在点开一些链接时，会跳转到的一个网页。


    H5页面可以在微信、QQ及所有浏览器中使用，没有平台的限制，修改内容后可直接发布，不需要第三方审核，能快速迭代。


    （1）H5页面的主要特点包括：


    ● 跨平台性：H5页面可以在任何支持HTML5标准的浏览器上运行，无需针对不同的操作系统进行开发。


    ● 易于传播：H5页面可以通过链接分享，方便用户在社交媒体等平台上进行传播。


    ● 开发成本低：相较于App和小程序，H5页面的开发成本较低，因为可以使用一套代码实现跨平台访问。


    （2）H5页面的缺点：


    ● 性能受限：H5页面依赖于浏览器渲染，可能导致加载速度和渲染性能不如原生应用。


    ● 功能限制：H5页面可能无法直接访问设备硬件资源，且安全性和稳定性可能不如原生应用。


    ● 流畅性和响应速度不足：复杂的动画和交互效果在H5页面中可能显得不够流畅，且用户交互可能存在一定的延迟。


    ● 用户体验相对较差：H5页面需要在不同浏览器和设备上进行适配，可能导致兼容性问题，同时页面设计不当也可能降低用户体验。


    2、  小程序


    小程序是一种轻量级的应用，由特定平台（如微信、支付宝、抖音、快手等）提供，用户无需下载安装即可使用，且可以在平台内实现多种功能，用户扫一扫或者搜一下即可打开。


    （1）小程序的主要特点包括：


    ● 轻量级：小程序体积小，不需要安装，直接使用，节省手机存储空间，同时加载速度快，用户无需等待即可使用。


    ● 开发门槛低：小程序的开发语言基于HTML5、JavaScript、CSS3等前端技术，开发门槛相对较低，非专业人士也能够轻松上手。


    ● 互联互通：小程序与其他微信可见的服务完全整合，可以进行联合登陆、消息推送等功能，与其他应用实现互联互通。


    ● 用户体验好：小程序提供了丰富的组件和API，开发者可以快速地构建出美观、易用的界面和功能，提升用户体验。


    （2）小程序的缺点


    ● 入口依赖性强：小程序通常依赖于特定的平台（如微信、支付宝等），用户需要通过这些平台的入口才能访问小程序，这限制了小程序的传播范围和使用场景。


    ● 用户粘度不高：由于小程序无需安装即可使用，用户可能更容易流失，导致小程序的用户粘度相对较低。


    3、  app


    全称为Application，意为“应用程序”，通常是指安装在智能手机、平板电脑等移动设备上的软件程序。


    这些软件程序旨在完善原始系统的不足与个性化，具有独立的运行环境，可以提供丰富的功能和个性化的用户体验。


    （1）特点


    ● 移动性：APP专为移动设备设计，可随时随地使用，打破了传统计算机使用的地域和时间限制。


    ● 品牌忠诚度和用户粘性：APP作为品牌的直接延伸，能够增强用户对品牌的认知和忠诚度。通过APP，品牌可以与用户建立更加紧密的联系，提供更加个性化的服务和体验。


    ● 用户体验优化：APP通过深度整合移动设备的功能和特性，能够提供比网页更流畅、更直观的用户体验。例如，利用设备的触控屏、摄像头、麦克风等硬件，APP可以实现更加丰富的交互方式。


    ● 功能丰富性和深度：相较于网页或小程序，APP通常具有更强大的功能和更深入的集成能力。它们可以访问设备的更多资源，实现更复杂、更精细的操作。APP可以支持离线使用，这意味着用户即使在没有网络连接的情况下也能使用部分或全部功能，提高了使用的便利性和可靠性。


    （2）缺点


    ● 系统资源占用：APP在运行时需要占用一定的系统资源，如内存、处理器和存储空间等。如果APP设计不当或存在漏洞，可能会导致系统资源过度占用，影响设备的性能和稳定性。


    ● 兼容性问题：由于移动设备的操作系统、屏幕尺寸和分辨率等存在差异，部分APP可能无法在所有设备上正常运行或显示。这要求开发者在设计和开发过程中进行充分的测试和优化，以确保APP的兼容性。


    ● 开发成本高：APP需要投入大量的人力、物力和财力进行开发和维护。


    ● 用户获取难度大：需要通过应用商店、市场推广等方式吸引用户下载和使用。



    4、  web


    全称为World Wide Web，即全球广域网，也被称为万维网。它是一种基于Web浏览器的应用程序，实际上就是我们常说的网页，通过Internet访问，无需下载安装，“Web”一词特指由网页、网站、浏览器等构成的全球性的信息网络。


    （1）特点


    ● 跨平台兼容性好：Web应用可以在各种操作系统和设备上通过浏览器访问。


    ● 开发成本低：Web应用的开发成本相对较低，可以快速迭代和上线新功能。


    ● 易于推广分享：Web应用可以通过链接形式进行分享和推广，便于用户传播。


    （2）缺点


    ● 性能问题：由于Web应用程序需要在服务器端进行处理，并将结果传输到客户端进行展示，因此会受到网络延迟、服务器性能等因素的影响，导致应用程序加载缓慢或响应不及时。当用户量过大时，服务器可能会响应缓慢，甚至连接断开，从而影响用户体验。


    ● 安全性问题：Web应用程序面临着多种安全威胁，如黑客攻击、数据泄露等。这些威胁可能导致用户信息被盗取或篡改，给用户带来损失。


    ● 依赖性问题：Web应用程序通常依赖于特定的浏览器和操作系统来运行。如果用户的设备或浏览器版本不兼容，可能会导致应用程序无法正常运行或展示效果不佳。


    二、区别与联系




    1、  平台依赖


    ● 小程序：运行在特定平台（如微信）的客户端内，依赖于平台提供的解析器和渲染引擎，小程序开发依赖于平台提供的API和组件库，以及开发者工具进行调试和预览。


    ● Web：Web应用运行在浏览器中，依赖于浏览器内核进行解析和渲染。Web开发依赖于浏览器提供的API和DOM操作，以及网络请求等功能。


    ● H5：运行环境和依赖与Web相似，但更强调对HTML5新特性的支持和优化。


    ● App：App直接运行在移动设备操作系统上，如iOS或Android，App开发依赖于操作系统提供的API和工具，以及第三方库和框架（如网络请求库、UI组件库等）。


    2、  开发语言与实现技术


    ● 小程序：通常使用JavaScript、WXML（类似于HTML的标记语言）、WXSS（类似于CSS的样式表语言）等开发语言，以及平台提供的技术框架，如微信小程序的技术框架包括视图层、逻辑层、系统层等，开发者需遵循框架规范进行开发。


    ● Web：主要使用HTML、CSS、JavaScript等Web标准技术，Web开发有众多的前端框架可供选择，如React、Vue、Angular等，这些框架提供了丰富的组件和工具，帮助开发者构建复杂的Web应用。


    ● H5：其开发语言和技术框架与Web相似，不同的是，H5更强调对多媒体、图形和动画的支持，以及响应式设计和离线存储等特性。


    ● App：原生App开发通常使用Java（Android）或Swift/Objective-C（iOS）等原生开发语言。原生App开发有各自平台提供的技术框架和工具，如Android Studio、Xcode等。此外，也可以使用跨平台开发框架（如React Native、Flutter）进行开发，这些框架允许开发者使用一套代码在不同平台上构建App。


    3、  性能与优化


    ● 小程序：小程序通常具有较好的性能和响应速度，因为它们在平台内运行，可以充分利用平台的优化和缓存机制。小程序开发者需要关注代码性能、资源加载和页面渲染等方面的优化。


    ● Web性能：Web应用的性能受浏览器内核和设备性能的影响，可能存在一定的性能差异Web开发者需要关注浏览器兼容性、代码压缩、图片优化、缓存策略等方面的优化。


    ● H5：H5在性能上相对于传统的Web应用有所提升，但仍然受限于浏览器和设备性能。优化方面，H5开发者需要关注HTML5新特性的使用和性能优化，如Canvas绘图、Web Workers等。


    ● App：App可以充分利用设备的硬件资源和操作系统功能，提供最佳的性能和用户体验。App开发者需要关注内存管理、CPU占用、网络请求等方面的优化，以及针对不同设备和屏幕尺寸的适配和测试。


    4、  系统权限


    ● 小程序：小程序的系统权限相对有限，它依赖于平台（如微信、支付宝等）提供的API来实现功能。因此，小程序无法直接访问设备的所有硬件资源。通过平台提供的权限管理机制来控制用户对其功能和资源的访问。开发者需要在小程序管理后台进行权限设置，用户在使用小程序时也需要进行授权。由于小程序运行在平台内置的解析器或Webview中，因此其安全性得到了平台的保障。同时，平台也会对小程序进行严格的审核和监管，以确保其不会滥用权限或危害用户隐私。


    ● Web：Web应用主要运行在浏览器中，因此其系统权限受到浏览器的限制。Web应用可以通过JavaScript等前端技术访问浏览器的API，但无法直接访问设备的硬件资源。Web应用的权限管理主要通过浏览器的安全机制和用户的授权来实现。例如，浏览器会提示用户是否允许网站访问其位置信息、摄像头等硬件资源。Web应用的安全性主要依赖于浏览器的安全机制、HTTPS协议以及开发者对安全性的重视。同时，用户也需要保持警惕，避免访问不安全的网站或下载恶意软件。


    ● H5：H5页面通常也是通过浏览器访问的，因此其系统权限与Web应用类似，都受到浏览器的限制。H5页面可以访问浏览器的API，但无法直接访问设备的硬件资源。H5页面的权限管理也主要依赖于浏览器的安全机制和用户的授权。用户可以通过浏览器的设置来控制H5页面对其硬件资源的访问。虽然H5页面可以跨平台运行，但在不同浏览器上的兼容性问题可能会影响其权限的实现。因此，开发者需要针对不同浏览器进行测试和优化。


    ● App：App具有最多的系统权限和功能，因为它可以直接调用设备的硬件资源和操作系统提供的API。例如，App可以访问设备的摄像头、麦克风、GPS等硬件资源，以及文件系统、网络连接等系统资源。App的权限管理主要通过操作系统的安全机制和用户的授权来实现。在安装App时，操作系统会提示用户该App需要哪些权限，用户可以根据自己的需求进行授权或拒绝。App的安全性主要依赖于操作系统的安全机制、开发者的安全措施以及用户对安全性的重视。同时，App也需要遵守操作系统的规定和限制，以确保其不会滥用权限或危害用户隐私。


    5、  系统更新维护


    ● 小程序：小程序由平台统一管理，开发者提交更新后由平台进行审核和发布。小程序开发者需要关注平台的更新和政策变化，以及用户反馈和错误报告的处理。


    ● Web：Web应用可以通过发布新版本或更新网页内容来实现更新。Web开发者需要关注网站的安全性和稳定性，以及内容的更新和维护。


    ● H5：H5的更新和维护与Web相似，但更强调对HTML5新特性的支持和兼容性测试。


    ● App：App需要用户手动下载和安装更新包，或者通过应用商店自动更新。App开发者需要关注应用商店的政策变化、用户反馈和错误报告的处理，以及针对不同设备和操作系统的适配和测试。


    6、  用户体验


    ● 小程序：用户体验较好，接近于原生App，加载速度快，流畅度高，因为运行在平台内置的解析器或Webview中。


    ● Web：用户体验取决于浏览器的性能和网络状况，可能有所差异，流畅度相对一般，可能受到浏览器兼容性和性能的影响。


    ● H5：用户体验相对较差，因为需要在浏览器内核中渲染页面，可能导致加载速度较慢和交互效果不够流畅，流畅度较低，受到浏览器和网络环境的限制。


    ● App：用户体验最佳，因为可以直接调用设备的硬件资源和操作系统提供的API，流畅度高，因为直接运行在操作系统中。


    三、如何选择


    1、根据使用场景选择


    ● 小程序：小程序适用于即用即走的场景，如购物、点餐、预订服务等。这些场景通常不需要用户长时间停留在应用中，而是需要快速完成某项任务。如果应用需要在微信、支付宝等社交平台上运行，并希望利用这些平台的流量和用户基础，那么小程序是一个很好的选择。


    ● Web：如果应用需要支持多种设备和操作系统，并且希望用户能够通过浏览器直接访问，那么Web是一个合适的选择。对于涉及复杂业务逻辑和大量数据展示的应用，Web可以提供更丰富的交互方式和展示效果。


    ● H5：H5适用于简单的应用场景，如领取优惠券、展示活动信息等。这些场景通常不需要复杂的功能和交互。如果希望快速开发和迭代应用，并且不需要考虑太多的兼容性问题，那么H5是一个不错的选择。


    ● App：如果应用需要实现复杂的功能和深度交互，并且希望提供最佳的用户体验，那么App是一个理想的选择。App还可以作为品牌展示和用户粘性的工具，通过提供独特的功能和用户体验来吸引和留住用户。


    2、根据目标用户选择


    ● 年轻用户群体：对于年轻用户群体，他们通常更倾向于使用小程序和App，因为这些应用形态可以提供更丰富的交互方式和更好的用户体验。


    ● 中老年用户群体：对于中老年用户群体，他们可能更倾向于使用Web和H5，因为这些应用形态可以通过浏览器直接访问，无需下载安装额外的应用。


    3、根据开发成本选择


    ● 小程序和H5：小程序和H5的开发成本相对较低，因为它们可以基于现有的技术和框架进行快速开发。此外，小程序还可以利用平台提供的API和组件来加速开发进程。


    ● Web：Web的开发成本也相对较低，但需要考虑不同浏览器的兼容性问题。不过，随着现代浏览器的发展和标准化进程的推进，这个问题已经得到了很大的改善。


    ● App：App的开发成本相对较高，因为需要针对不同的操作系统和设备进行开发和测试。此外，还需要考虑应用商店的审核和上架费用等问题。


    4、根据用户体验选择


    ● 加载速度和流畅度：App通常具有最佳的加载速度和流畅度，因为它们可以直接调用设备的硬件资源和操作系统提供的API。小程序次之，而Web和H5则可能受到浏览器和网络环境的影响。


    ● 交互方式和效果：App可以提供最丰富的交互方式和效果，包括触摸、滑动、动画等。小程序也可以实现类似的交互效果，但可能受到平台规定的限制。Web和H5的交互方式则相对简单一些，主要通过链接和按钮来实现。


    总结来看，H5、小程序、APP和Web页各自都有其独特的功能特点及适用场景。


    H5轻便快速，适合简单的业务场景；小程序灵活便捷，适合即时使用；APP功能丰富，适合深度交互；Web页则偏向于企业级应用，适合后台管理和服务。


    根据具体业务需求，合理选择开发形式，势必将直接影响用户体验和产品成功与否。


    随着技术的不断进步，这四种产品形态也在不断迭代。


    小程序的快速发展让许多企业看到了轻量化应用的巨大潜力，而App仍将发挥其在复杂交互和用户忠诚度培养方面的独特优势。H5和Web页则在微网站和快速宣传方面依然有着不容小觑的作用。


    企业在选择开发产品形式时，需要深究其业务性质与用户需求。



    关注公众号【诺儿笔记本】，后台可获取【产品大礼包】，包含产品书籍、常用软件、常用文档模板等等



    — END —


    我专门建立了学习交流群，方便大家一起交流学习，可添加微信进群：up5499



    以下是我的经典文章，99%关注我的人都会阅读，建议你一定要好好看一看


    吐血整理！产品常用工具清单

    12种产品盈利模式（超详细介绍）

    商业模式≠盈利模式！一文理清商业模式

    一文搞懂需求分析（超全收藏版）

    超详细的项目复盘！附7种常用方法

    终于有人把竞品分析讲清楚了！好详细！

    你“在看”我吗？

  • 这几个开源微信小程序，太有想法了（附源码）

    这几个开源微信小程序，太有想法了（附源码）

    本文来分享 6 个很有意思的开源微信小程序！

    跑腿

    叮点跑腿是一套跑腿下单接单系统，其主要功能包括帮送服务、帮买服务、骑手注册、骑手接单、用户下单、提现、订单分配系统、优惠券、物品重量计算、距离计算等。项目后端采用 Midway，小程序采用 uniapp ，后台采用 Nuxt。源码：https://gitee.com/landalfyao/ddrun

    点餐

    意象点餐是一个在线点餐小程序，支持多门店模式，SaaS 多租户模式。使用到的技术栈包括：SpringBoot3、OAuth2、Vue 3、uniapp、Redis 等。源码：https://gitee.com/guchengwuyue/yshop-drink

    考试

    一个多功能的在线考试和培训小程序，适用于职业培训、考试刷题及企业内部考核等场景。项目支持会员体系，会员可以按折扣购买题库，支持题库在线支付购买；支持学员体系，学员可以无偿使用特定内部题库，支持题库激活码解锁。源码：https://gitee.com/wulivicor/exam

    物业

    一整套开源智慧物业解决方案，基于Node.js、TypeScript、Koa、Vue 开发，包含Web中台、业主小程序、员工小程序、公众号、物联网应用等，涵盖业主服务、物业运营、智能物联、数据统计等主要业务。源码：https://gitee.com/chowa/ejyy

    铺子

    一个常用小程序功能的集合，基于 Vue 实现，使用 colorUi 与 uView，完美支持微信小程序，包含功能：聊天室、金融量化、抽奖、地图轨迹回放、电子签名、图片/海报编辑器、自定义相机/键盘、拍照图片水印、智能抠图、照片墙、在线答题、证件识别、周边定位查询、文档预览、各种图表、行政区域、海报生成器、视频播放、主题切换、时间轴、瀑布流、排行榜、课程表、简历、商城、登录页、加载动画、请求封装等。源码：https://gitee.com/kevin_chou/qdpz

    论坛

    一个基于SpringBoot，MybatisPlus，Shiro，Quartz，jwt，Websocket，Redis，Vue，Uniapp 的前后端分离的社交论坛问答发帖/BBS，SNS项目。其功能包括：图文帖，长文贴，短视频，圈子，私聊，微信支付（小程序/H5/app），付费贴，积分签到，钱包充值，积分余额兑换，话题标签，抽奖大转盘，手机号邮箱登录，虚拟用户发帖，举报，第三方广告，会员模块，即时通讯IM ，好友模块，投票，打赏，用户经验等级等。源码：https://gitee.com/virus010101/linfeng-community