微信小程序开发整体过程整理

news2024/9/25 15:25:23

目录

  • 1微信开发相关介绍
    • 1.1微信公众平台
    • 1.2微信开放平台
    • 1.3注意事项
  • 2微信小程序开发整体介绍
    • 2.1微信小程序简介
    • 2.2小程序接入流程
  • 3框架简介
    • 3.1uni-app简介
    • 3.2学习使用uni-app
    • 3.3学习微信小程序开发
  • 4开发规范
  • 5开发示例
    • 5.1开发工具
    • 5.2开发调试
      • 5.2.1导入代码
      • 5.2.2项目运行
      • 5.2.3在微信开发工具中运行
    • 5.3开发示例
  • 6打包发布
  • 7后端部署
    • 7.1需要的材料
    • 7.2域名购买及备案
    • 7.3SSL证书申请
    • 7.4SSL证书配置使用
    • 7.5在小程序管理后台配置服务器域名
  • 8重点问题

1微信开发相关介绍

微信相关开发工作涉及两大微信平台,微信公众平台和微信开放平台。

1.1微信公众平台

简单来说微信公众平台主要用于管理服务号、订阅号和小程序,主要是给后台运营人员使用。网址https://mp.weixin.qq.com/
微信公众平台

1.2微信开放平台

微信开放平台主要面对移动应用/网站应用开发者,为其提供微信登录、分享、支付等相关权限和服务。方便各个应用识别同一微信账号,进行微信第三方登录等。网址https://open.weixin.qq.com/
微信开放平台

1.3注意事项

受法律法规和腾讯网络安全监管的影响,想要充分使用微信公众平台和微信开放平台进行微信小程序和微信公众号相关开发,需要绑定企业主体,微信公众平台需要微信认证(¥300),微信开放平台需要开发者资质认证(¥300)。
微信开放平台账号中心
微信公众平台微信认证
微信开放平台开发者资质认证
而且企业资质不同,账号能够绑定的所属服务类目不同,能够使用的功能也会受限。比如目前长期性订阅消息仅向政务民生、医疗、交通、金融、教育等线下公共服务开放,后期将逐步支持到其他线下公共服务业务。
小程序开放的服务类目信息https://developers.weixin.qq.com/miniprogram/product/material

2微信小程序开发整体介绍

2.1微信小程序简介

小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
小程序开放的注册范围:个人、企业、政府、媒体和其他组织。
小程序开发文档https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/

2.2小程序接入流程

微信小程序接入流程分为四步:

  1. 注册
  2. 小程序信息完善
  3. 开发小程序
  4. 提交审核和发布

具体内容可参考小程序接入指南https://developers.weixin.qq.com/miniprogram/introduction

注意:小程序注册有两种方式,第一种通过已有公众号快速关联注册,第二种通过线上常规流程完成注册。公众号关联注册方便快捷,一次认证可以免去多个小程序账号的认证费用,也方便后期与公众号打通使用;常规注册相对繁琐,对于单个简单小程序来说可以选择对公账户打款认证节省300块微信认证费用

如商家已有现成公众号,我们推荐使用“公众号快速注册小程序”功能,无须重复提交主体材料,无须对公打款并可省去300元认证费用(前提是公众号已认证),该注册方式的要求如下:

  1. 须为已认证的企业、政府、媒体及其他组织公众号
  2. 一个公众号一个月可以复用资质注册5个小程序

具体参考小程序注册指引

小程序注册并认证主体之后,然后才能完善小程序信息,在开发管理的开发设置中获取AppID(小程序ID)和AppSecret(小程序密钥)用于开发,在成员管理中添加项目成员,相应人员才能进行小程序开发调试。

3框架简介

我们使用的小程序开发框架是基于jeecg开源的Uniapp框架修改完善的,可参考其官方文档http://doc.jeecg.com/2044258,我们主要可以从中了解工程的目录结构和开发环境搭建,了解如何打包发布。

3.1uni-app简介

下面引用uni-app官网的简介:

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app(详见),腾讯课堂官方为uni-app录制培训课程(详见),开发者可以放心选择。

uni-app在手,做啥都不愁。即使不跨端,uni-app也是更好的小程序开发框架(详见)、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。

3.2学习使用uni-app

实际上对前端开发人员来说,使用uni-app,基本上和使用Vue写Web端的感受差不多的,只需要针对不同平台做部分适配工作即可。受各个平台的限制,在用户登录授权、用户信息获取等平台api调用时都会有所不同,各个平台能够使用的第三方组件也会受到各种情况的限制,需要使用条件编译来适配不同平台。
学习使用uni-app可以参考官方的学习指南https://uniapp.dcloud.net.cn/resource.html

3.3学习微信小程序开发

由于我们的最终目的是开发微信小程序,因此,还要学习微信小程序开发相关的知识,开发文档https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/

4开发规范

小程序官方设计指南https://developers.weixin.qq.com/miniprogram/design/
小程序官方组件https://developers.weixin.qq.com/miniprogram/dev/component/
使用uni-app的常见问题解答https://uniapp.dcloud.net.cn/faq.html

5开发示例

5.1开发工具

需要的开发工具主要有两个:

  1. HBuilderX
  2. 微信开发者工具

由于使用的uni-app框架开发微信小程序,因此按照其官方推荐,使用HBuilderX作为主要开发工具,HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。
普通调试可以通过浏览器调试,当功能开发完成后,我们需要在微信开发者工具中运行,测试功能是否符合预期,上传代码到微信公众平台,从而实现小程序开发版以及正式版的发布。

5.2开发调试

5.2.1导入代码

将代码导入或直接拖到HBuilderX的项目管理区域即可。可右键选择`在新窗体中打开``,方便单个项目的开发。
在这里插入图片描述
项目工程目录如下
在这里插入图片描述

5.2.2项目运行

修改/common/service/config.service.js文件中的BASE_URL配置,配置后端服务请求前缀。
在这里插入图片描述

在HBuilderX的上方选择运行->运行到浏览器->Chrome,编译完成后,浏览器会自动打开登录页面,如果没打开,也可以自行在浏览器中打开http://localhost:9003/
在这里插入图片描述在这里插入图片描述

新下载的HBuilderX可能比较精简,缺少部分插件,因此第一次运行,需要根据控制台的提示信息安装相应的插件。在HBuilderX顶部选择工具->插件安装,进行相关插件的安装。
在这里插入图片描述

5.2.3在微信开发工具中运行

在HBuilderX顶部选择工具->设置,打开设置页面,选择运行配置,设置微信小程序开发工具路径为自己本地小程序开发工具的安装路径。
在这里插入图片描述
在HBuilderX顶部选择运行->运行到小程序模拟器->微信开发者工具,HBuilderX会将源码编译为微信小程序的对应源码,并自动打开微信开发者工具。第一次运行,可能需要手机扫码登录微信开发者工具,并且设置小程序的AppId。进入后等待编译完成,即可进行小程序调试。
在这里插入图片描述
在这里插入图片描述
微信开发工具界面
微信开发工具界面

5.3开发示例

待补充

6打包发布

当开发工作到一定阶段后,可以上传小程序前端到微信公众平台小程序管理后台,从而进行开发版本的体验或提交审核。
在这里插入图片描述

在小程序管理后台中的管理->版本管理中,可以看到上传的开发版本。设置为体验版,点击体验版的二维码,使用微信扫码即可真机体验小程序。注意只有项目成员和体验成员才可以访问体验版。
在这里插入图片描述
在这里插入图片描述

如果小程序开发完成,需要发布正式版本,选择相应的开发版本,提交审核,根据提示提供审核信息,提交审核。腾讯的审核人员会对小程序进行审核,对不符合规范的地方提出整改方案。整改完成后,重新提交审核。审核通过后,可将想要发布上线的通过审核的版本发布上线。
在这里插入图片描述

微信小程序平台常见拒绝情形https://developers.weixin.qq.com/miniprogram/product/reject.html

7后端部署

由于小程序需要访问后端服务进行业务数据存取,因此需要部署后端服务,并配置微信小程序前端可以访问后端接口。

7.1需要的材料

需要提供下列材料:

  1. 云服务器或者本地服务器有公网IP
  2. 企业备案的域名
  3. 域名对应的SSL证书

7.2域名购买及备案

各个平台可能不同,只要花钱的,都好解决。腾讯云、阿里云平台都可以进行域名购买和备案。

7.3SSL证书申请

参考阿里云ssl免费证书申请教程https://blog.csdn.net/weixin_43128854/article/details/128203659

7.4SSL证书配置使用

本文在Nginx中配置使用SSL证书,因此需要下载适用Nginx服务器的SSL证书文件。解压后,内含*.key*.pem两个文件。
在这里插入图片描述
在修改Nginx的配置文件,配置HTTPS协议的请求代理,需要将上一步解压的*.key*.pem两个文件上传到nginx的相对路径下,配置ssl_certificatessl_certificate_key属性。重启Nginx服务后即可生效。

#证书文件名称
ssl_certificate      cert/*.pem;
ssl_certificate_key  cert/*key;

在这里插入图片描述

7.5在小程序管理后台配置服务器域名

登录微信公众平台,进入小程序管理后台,在开发->开发管理中选择开发设置,在服务器域名中设置域名,默认使用443端口不用配置,如果设置的端口是其他端口,则需要在域名后面加上相应端口号。
在这里插入图片描述

8重点问题

待补充

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/140338.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第三篇 - 对象的单层劫持

一,前言 上篇,介绍了 Vue 使用及数据初始化的流程 回顾一下,主要涉及以下几个核心点: initMixin 方法: 原型方法 Vue.prototype._initvm.$options:使 options 选项在 vm 实例上被共享initState 方法&…

c#入门-匿名函数,多播委托

匿名函数 如果一个函数的参数是一个委托类型。而你此刻没有合适的方法组使用&#xff0c;也不想为他专门声明一个局部函数。 则可以使用匿名函数。匿名函数的创建更为简单&#xff0c;语法为&#xff1a;返回类型 参数列表 > 函数主体 Func<int, string> func str…

人工智能OCR文字识别研究

1 研究背景 人工智能是研究开发能够模拟、延伸和扩展人类智能的理论、方法、技术及应用系统的一门新的技术科学&#xff0c;研究目的是促使智能机器会听&#xff08;语音识别、机器翻译等&#xff09;、会看&#xff08;图像识别、文字识别等&#xff09;、会说&#xff08;语音…

使用Jiralert实现AlertManager告警对接Jira

简介 Alertmanager 处理由客户端应用程序&#xff08;如 Prometheus server&#xff09;发送的警报。它负责去重(deduplicating)&#xff0c;分组(grouping)&#xff0c;并将它们路由(routing)到正确的接收器(receiver)集成&#xff0c;如电子邮件&#xff0c;微信&#xff0c…

MMYOLO 自定义数据集从标注到部署保姆级教程

theme: juejin 来自社区 PeterH0323 投稿 AI 已经被应用到各行各业&#xff0c;现如今任何人都可以轻松基于开源框架快速搭建符合自身需求的 AI 应用。本文将基于 MMYOLO 开源框架&#xff0c;基于生活中收集的猫猫数据集&#xff0c;教你如何从零开始训练一个可部署检测模型…

TiCDC 源码阅读(二)TiKV CDC 模块介绍

内容概要 TiCDC 是一款 TiDB 增量数据同步工具&#xff0c;通过拉取上游 TiKV 的数据变更日志&#xff0c;TiCDC 可以将数据解析为有序的行级变更数据输出到下游。 本文是 TiCDC 源码解读的第二篇&#xff0c;将于大家介绍 TiCDC 的重要组成部分&#xff0c;TiKV 中的 CDC 模…

【C++】命名空间(namespace) 以及理解using namespace std

命名空间1.命名空间使用的背景1.背景2.命名空间的定义&#xff08;namespace&#xff09;2.1正常的定义2.2 命名空间可以嵌套定义2.3允许命名空间相同3.域作用限定符&#xff08;&#xff1a;&#xff1a;&#xff09;和命名空间的使用3.1域作用限定符&#xff08;&#xff1a;…

【nodejs】模块化

一、概念 1、模块化 编程领域中的模块化&#xff0c;就是遵守固定的规则&#xff0c;把一个大文件拆成独立并相互依赖的多个小模块 把代码进行模块化拆分的好处&#xff1a; 1、提高代码的复用性 2、提高代码的可维护性 3、可以实现按需加载 2、模块化规范 对代码进行模块化…

《CSS新世界》读书笔记

前言 本文为《CSS新世界》的读书笔记。推荐去读原著。 《CSS新世界》微信读书APP链接&#xff1a;CSS新世界-张鑫旭-微信读书 (qq.com) 1. 尺寸属性值&#xff1a;fit-content 描述 fit-content 不是一个属性&#xff0c;它是 css 尺寸系列属性的一个新属性值。可用在 wid…

lammps教程:旋转模型的技巧

大家好&#xff0c;我是小马老师。 本文介绍lammps翻转模型的方法。 在进行分子动力学模拟时&#xff0c;可能需要特定的面位于设定的方向。 如Al2O3的力学性能模拟中&#xff0c;需要分别对A、B、C面进行压痕或者摩擦模拟。 按照研究界面垂直z轴&#xff0c;并且面法线沿着z轴…

转转测试环境治理的高效能实践

文章目录1. 背景及需求1.1 系统架构的发展1.2 测试环境的需求2. 传统的测试环境解决方案-物理隔离3. 转转测试环境V1-改进的物理隔离3.1 稳定环境3.2 动态环境3.3 优缺点3.3.1 优点3.3.2 缺点4. 转转测试环境V2-基于自动IP标签的流量路由5. 转转测试环境V3-基于手动标签的流量路…

大数据挖掘-伤寒论和金匮要略(COVID-19用药启示录,1.4万字收藏)

来自Toby老师&#xff0c;大数据挖掘-伤寒论和金匮要略 大家好&#xff0c;我是Toby老师&#xff0c;三年来新冠病毒肆虐全球&#xff0c;带来一些列症状&#xff0c;例如发热&#xff0c;恶寒&#xff0c;咳嗽&#xff0c;咽喉痛&#xff0c;腹泻&#xff0c;心脑血管疾病等…

C语言_动态内存管理

目录 1. 为什么存在动态内存管理 2. 动态内存函数介绍 2.1 开辟内存块函数_malloc 2.2 动态内存释放和回收函数_free 2.3 开辟空间初始化元素为0的函数_calloc 2.4 调整动态内存开辟大小的函数_realloc 3. 常见的动态内存错误 3.1 对NULL进行解引用操作 3.2 对动态开辟…

aloam学习笔记(二)

学习aloam框架中前端对于点云部分的预处理和点面特征提取。 这些功能在scanRegistration.cpp部分实现&#xff0c;所以也是对于这个源码的学习。 一、main函数 从main函数开始分析。 首先整个完整的main函数内容&#xff1a; int main(int argc, char **argv) {ros::init(…

RSA、MD5加密解密算法全套解析安装教程

第一部分介绍加密解密算法&#xff0c; 第二部分介绍我小组成功应用的RSA、MD5两种加密解密算法&#xff0c;以及心得体会。 1、加密解密算法介绍 应用的开发中安全很重要&#xff0c;所以信息加密技术显得尤为重要。我们需要对应用中的多项数据进行加密处理&#xff0c;从而来…

(人工智能的数学基础)第一章特征向量与矩阵分析——第三节:特征向量与特征值

参考 3Blue1Brown系列&#xff1a;特征向量和特征值第十章 线性代数之 特征向量与特征值】3Blue1Brown知乎&#xff1a;线性代数的本质10 特征向量和特征值 文章目录一&#xff1a;特征向量与特征值概念引入二&#xff1a;特征向量与特征值概念求解三&#xff1a;特征向量与特…

谷粒学院——第七章、课程分类管理

EasyExcel 介绍 简介 Excel导入导出的应用场景 1、数据导入:减轻录入工作量 2、数据导出:统计信息归档 3、数据传输:异构系统之间数据传输 EasyExcel的特点 Java 领域解析、生成 Excel 比较有名的框架有 Apache poi、jxl 等。但他们都存在一个严重的问题就是非常的耗内存。…

Python数据分析三剑客之Pandas

写在前面的话&#xff1a; 开始之前请确保已经配置好python环境&#xff0c;并安装好第三方库pandas和numpy。 1. pandas库介绍 什么是pandas&#xff1f;pandas是提供高性能易用数据类型和数据分析工具的第三方库。简单讲&#xff0c;pandas主要作用有两个&#xff1a;提供了…

电子学会2020年6月青少年软件编程(图形化)等级考试试卷(二级)答案解析

目录 一、单选题&#xff08;共25题&#xff0c;每题2分&#xff0c;共50分&#xff09; 二、判断题&#xff08;共10题&#xff0c;每题2分&#xff0c;共20分&#xff09; 三、编程题&#xff08;共3题&#xff0c;共30分&#xff09; 青少年软件编程&#xff08;Scratch&…

谷粒学院——第八章、课程管理

一、课程添加功能 概览 课程添加的步骤 课程相关表的关系 后端实现 1、代码生成器 只修改表名即可&#xff0c;依次填入&#xff1a;“edu_course”, “edu_course_description”, “edu_chapter”, “edu_video” 生成完成后&#xff0c; 删除EduCourseDescriptionContr…