微信小程序开发过程整理

news2024/11/16 12:07:24

目录

  • 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/140545.html

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

相关文章

java常见题3

11.二分查找的次数 奇数取 中间那一个作为中值 偶数个取 中间靠左 然后不断模拟这个算法 查找的最多次数:n个元素里最多查找log二N 个元素Log2 128 7 12.equals和hashCode java.lang.Object类中有两个非常重要的方法: public boolean equals(Obje…

YOLOV5模型训练

之前在博文中讲到了YOLOV5的运行,以及转tensorrt. 但是, 一个模型通常需要结合数据训练,才能得到更好的结果. 因此,我们有必要熟悉yolov5的训练过程. 执行训练的过程 Yolov5的github提供了官方的训练脚本. 第一次运行,会自动下载数据集,然后会检测到你的gpu配置,如果不对,…

【数据结构】树

树(Tree) 知识框架 树的定义 树和图一样都是非线性结构,树是n个结点的有限集合,当n0时,称这棵树为空树。 非空树有以下特征: 有且仅有一个称为根的结点。如果n>1, 除根结点以外其它结点可以分为m(m>0)个不相交的集合T1,T…

E4445A频谱分析仪

18320918653 E4445A 名称:E4445A 频谱分析仪, 3 Hz - 13.2 GHz 详细:主要技术指标 性能 /-0.24 dB幅度精度 -155 dBm/Hz显示的平均噪声电平(DNAL) 10 kHz偏置时的相噪:-118 dBc/Hz 81 dB W-CDMA AC…

春节倒计时,让我来秀一手:用Python制作一个对联生成器

前言 跨年跨完了,马上就要迎来春节了,这不得秀一手? 那就直接开始春节的表演呗 勉勉强强来用python制作对联生成器吧 效果展示 这里的话,你自己想要啥春联主题是可以搜索滴,有些地方也是可以看着改的,…

FPGA知识汇集-FPGA的低功耗设计方法总结

精确的热分析在很多电子产品设计中都有着举足轻重的作用,在高端的PCB设计中尤为突出。热分析的结果常常会影响PCB的机械层设计和产品的外壳设计:是否需要安装散热片、散热风扇等。如果安装散热风扇,往往需要降低其噪音,这将使得机械层设计变得…

【OpenAI】What Is ChatGPT

文章目录介绍注册介绍 OpenAI发布了一个全新的聊天机器人模型—— ChatGPT,同时这也是继GPT-3.5 系列的主力模型之一 ChatGPT 测试地址: https://chat.openai.com/auth/login https://gpt.chatapi.art/ ChatGPT官方说明: Optimizing Langua…

【自学Java】Java语言数组遍历

Java语言数组遍历 Java语言数组遍历教程 Java 语言 中如果我们定义好了数组,并且给数组设置了值,那么怎么样访问数组呢?怎么样获取数组里面的数据值呢?我们可以使用 for 来遍历数组,获取每个位置上的值。 Java语言数…

谷粒学院——第十四章、微信扫码登录

准备工作 注册开发者资质 官网:https://open.weixin.qq.com/ 尚硅谷分享 wx:open:# 微信开放平台 appidappid: wxed9954c01bb89b47# 微信开放平台 appsecretappsecret: a7482517235173ddb4083788de60b90e# 微信开放平台 重定向url(guli.shop需要在微…

腾讯云存储

文章目录一、开通腾讯云存储1.注册腾讯云账号,开通对象服务2. 创建存储桶3.获取SecretId 和 SecretKey提示:以下是本篇文章正文内容,下面案例可供参考 一、开通腾讯云存储 在项目钟的图片以及文件需要归档存储。如果归档文件只保存到服务器…

WebRTC学习总结

WebRTC (Web Real-Time Communications) 是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和(或)音频流…

二十五、Docker (1)

🌻🌻 目录一、Docker的概述1.1 为什么要去学习Docker1.2 Docker 概述1.3 Docker的历史1.4 Docker 官网1.5 Docker能做什么1.6 DevOps(开发、运维)二、Docker安装启动(官网)2.1 Docker 架构2.1.1 镜像(image)2.1.2 容器…

DICOM 图像传输:使用 LeadTools 实现 C-Store SCP 服务

文章目录开发环境创建 Qt Widgets 程序设计界面配置 LeadTools 路径编写代码使用 LDicomNet 实现 SCP 的步骤日志输出编写 SCP Server 类编写 SCP Client 类启动 LDicomNet 及启动监听编译程序运行程序发布与部署测试程序界面美化参考开发环境 LeadTools 17Qt 5.15.2 MSVC2019…

【Linux】进程间通信(万字详解) —— 上篇

🎇Linux: 博客主页:一起去看日落吗分享博主的在Linux中学习到的知识和遇到的问题博主的能力有限,出现错误希望大家不吝赐教分享给大家一句我很喜欢的话: 看似不起波澜的日复一日,一定会在某一天让你看见坚持…

谷粒学院——第九章、阿里云视频点播

阿里云视频点播 开通 地址: 上传测试 开通以后,点击控制台,然后选择音/视频: 注意:先点击启用存储地址再上传。 添加转码模版: 开发文档 官方地址:https://help.aliyun.com/p…

批量统计不同块的数量

CAD收集块的数量一般采用FI等命令,或者使用天正等软件,这些方法或多或少都存在某些问题。这时就可以编写插件满足不同场景的使用。已应用到实际工作中。 一、界面及其功能 采用c#制作cad插件,框选待统计范围,直接输出到表格中&…

数据库连接超时的处理

报错信息:Caused by: java.sql.SQLTransientConnectionException: HikariPool-1 - Connection is not available, request timed out after 30000ms.at com.zaxxer.hikari.pool.HikariPool.createTimeoutException(HikariPool.java:695)at com.zaxxer.hikari.pool.H…

Java高手速成 | 数据库实训:图书馆管理系统建模

图书馆管理系统是常见的管理信息系统,考虑到系统的推广性,本系统采用SQL SERVER2000作为数据库。并且采用PowerDesigner进行数据建模,从而自动生成sql脚本。 01、数据库概念设计 1. 数据库表设计 管理员表admin:管理员编号&am…

[JavaEE] volatile与wait和notify

专栏简介: JavaEE从入门到进阶 题目来源: leetcode,牛客,剑指offer. 创作目标: 记录学习JavaEE学习历程 希望在提升自己的同时,帮助他人,,与大家一起共同进步,互相成长. 学历代表过去,能力代表现在,学习能力代表未来! 目录 一.volatile 关键字. 1.volatile 能保证内存可见性…

12个爆款 Java 开源项目

1JavaGuidehttps://github.com/Snailclimb/JavaGuide Star 10503【Java学习面试指南】 一份涵盖大部分Java程序员所需要掌握的核心知识。2symphonyhttps://github.com/b3log/symphony Star 6664一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台…