小程序微信小程序开发流程(代码片段)

技术栈 技术栈     2023-04-09     285

关键词:

一、概述

微信小程序是一种基于微信平台的应用程序,用户可以在微信中直接使用这些小程序,无需下载和安装,具有轻便、快速、实用等特点。

  • 微信小程序通常可以提供各种服务和功能,例如购物、预定、社交、游戏等等。开发者可以使用微信小程序开发工具进行开发,并上传至微信平台发布。用户可以通过微信内置的小程序搜索或扫描二维码进入小程序,也可以通过分享链接进入。

  • 微信小程序可以在微信中使用,无需打开其他应用程序,也无需下载和安装,因此具有便捷、快速、节省手机存储空间等优势。另外,微信小程序也支持各种应用场景,如公共交通、旅游景区、餐饮服务等等。

总之,微信小程序是一个非常有用的工具,它提供了各种方便的服务和功能,同时也为开发者提供了一个便捷的开发平台。

要做微信小程序开发需要几个前提条件:

  1. 注册一个微信小程序账号,如果觉得太麻烦,可以去某宝找人帮你注册一个。
  2. 安装开发工具

官方地址:https://mp.weixin.qq.com/
官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/framework/

二、整体开发架构

主要分为两块:一部分就是微信小程序端也就是前端,但是也提供了云端开发;一部分就是后端,后端会连着各种外部资源。其实跟其它非小程序开发流程是一样的。

三、注册账号和安装开发工具

1)注册账号

开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。

1、注册方法

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

2、选择注册的帐号类型

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

3、填写邮箱和密码

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

【温馨提示】在填写小程序注册信息之前,需要先注册一个邮箱,其中每个邮箱只能申请一个小程序。并且,已经绑定了其他的公众号、小程序、个人号的邮箱,不能重新注册新的小程序。

4、激活邮箱

点击“注册”之后,跳转到邮箱激活页,激活账号,继续注册流程。

5、填写主体信息

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

选择主体类型,这里选择个人,当然也可以选择企业:

主体类型说明如下:

1个身份证号码和一个手机号码只能注册5个小程序。注意主体信息提交后不可更改。

如果选择的是企业类型帐号,这种账号可选择两种主体验证方式(如果是选择个人账号类型。以下内容就可以忽略了)。

  • 方式一:支付验证

需要用公司的对公账户向腾讯公司打款来验证主体身份,打款信息在提交主体信息后可以查看到。
请根据页面提示,向指定的收款帐号汇入指定金额。

温馨提示:请在10天内完成汇款,否则将注册失败。

  • 方式二:微信认证

通过微信认证验证主体身份,需支付300元认证费。认证通过前,小程序部分功能暂无法使用。


填写管理员信息

确认主体信息不可变更

6、登录后台补充信息

在小程序管理后台中,补充小程序的基本信息,如名称、图标、描述等。

【温馨提示】如果你的公众号是服务号且已经认证,可以使用“快速注册认证小程序流程”,无需重新提交主体材料、无需对公打款、无需支付300元认证费用。

2)安装开发工具

下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

3)快速开始

在开始之前说一下几个知识点。

1、云开发和传统开发的区别

  • 云开发就是一套解决小程序前后端开发的一种云端能力
  • 它提供了一整套云服务及简单、易用的 API 和管理界面,以尽可能降低后端开发成本,让开发者能够专注于核心业务逻辑的开发、尽可能轻松的完成后端的操作和管理
  • 云开发包含了小程序前端和小程序后端。

传统开发:

云开发:

  • 可能刚入门的小程序制作开发人员对这样的官方介绍有点摸不着头脑。直白点说,所谓的云端能力实际上就是服务器端(后端),开发者自己不需要本地配置服务器和数据库、存储、云函数等基础能力,直接在微信官方提供的服务器端操作就行了。

  • 而普通的开发,是需要自己准备服务器而且以上提到的基础能力。所以小程序云开发相对普通的开发,最大的优势就是更方便、更高效,节省开发成本。

使用传统开发的优缺点:

  • 优点 : 我们不用管后台逻辑, 直接发送请求即可获取想要的数据
  • 缺点 : 开发成本太大, 不能个人开发,需要域名、服务器和学习新编程语言

使用云开发的优缺点:

  • 优点 : 完全可以个人开发前后端, 直接上线, 不需要依赖后端, 更重要的是简单易学
  • 缺点 : 前后端都是我们自己写 , 得学习云开发之类的API

云开发和传统开发的其它区别:

对比项 云开发 传统服务器
难易程度 简单 复杂
部署难易 基本上不用部署 部署费时费力
是否需要域名 不需要 需要
是否需要备案 不需要 需要
是否支持https 不需要 需要
适合公司 中小型公司、个人 大公司
学习难易 容易上手 学习起来比较难
费用 免费版基本够用 200-2000/年

2、云开发 API 分类

1)云函数

  • 云函数是一段运行在云端的代码,无需管理服务器,在开发工具内编写、一键上传部署即可运行后端代码。
  • 小程序内提供了专门用于云函数调用的 API。开发者可以在云函数内使用 wx-server- sdk 提供的 getWXContext 方法获取到每次调用的上下文(appidopenid 等),无需维护复杂的鉴权机制,即可获取天然可信任的用户登录态(openid

2)云数据库

  • 一个既可在小程序前端操作, 也能在云函数中读写的 MongoDB 数据库
  • 一个数据库可以有多个集合(相当于关系型数据中的表),集合可看做一个 JSON 数组,数组中的每个对象就是一条记录,记录的格式是 JSON 对象

3)云存储

  • 云开发提供了一块存储空间,在小程序前端直接上传/下载云端文件能力,在云开发控制台可视化管理
  • 在小程序端可以分别调用 wx.cloud.uploadFilewx.cloud.downloadFile 完成上传和下载云文件操作

3、AppID 获取

注册了账号就可以直接登录后台获取AppID了。

4、快速开始

创建小程序,AppID就是上面获取的。

传统开发:

四、小程序登录流程

1)登录流程时序流程图

先来看一下微信小程序登录流程图吧,官方地址:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

说明

  • 调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。
  • 调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识UnionID(若当前小程序已绑定到微信开放平台帐号) 和 会话密钥 session_key

之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份。

【注意事项】

  • 会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥。
  • 临时登录凭证 code 只能使用一次

2)认识openid,unionid 和code

  • openid:openid是用来唯一标识用户的一个字符串。在微信小程序中,每个用户的openid都是唯一的。通过openid,小程序可以获取用户的基本信息,如头像、昵称等。

【注意】同一个用户在不同的小程序中拥有不同的openid。因此,在开发小程序时,不能使用openid来进行用户的唯一性判断。

  • unionidunionid 是在用户绑定同一微信开放平台账号下的多个应用时,用来唯一标识用户的一个字符串。如果用户在多个小程序中使用同一个微信号进行登录授权,那么这些小程序中的 unionid 都是相同的。

【注意】用户的unionid只有在用户将多个应用绑定到同一个微信开放平台账号下时才会生成。因此,如果用户没有绑定多个应用,那么小程序将无法获取用户的unionid。

  • codecode 是用户登录凭证,由微信服务器颁发给小程序。在用户授权登录后,小程序可以通过调用微信登录接口获取用户的 code。然后,通过code向微信服务器请求用户的 openidsession_key 等信息。

【注意】每个code只能使用一次,且有效期为5分钟。因此,在使用code进行登录时,需要及时将其转换成用户的 openidsession_key 等信息,以免出现code过期的情况。

openidunionidcode 是微信小程序登录授权中非常重要的三个参数,了解这些参数的作用和用法,有助于开发者更好地设计和开发小程序登录授权功能。

  1. 通过wx.login()获取code。

  2. 将这个code发送给后端,后端会返回一个token,这个token将作为你身份的唯一标识。

  3. 将token通过wx.setStorageSync()保存在本地存储。

  4. 用户下次进入⻚面时,会先通过wx.getStorageSync() 方法判断token是否有值,如果有值,则可以请求其它数据,如果没有值,则进行登录操作。

微信小程序开发流程介绍就先到这里了,有任何疑问欢迎给我留言,后续会持续更新相关教程,请小伙伴耐心等待,也可关注我的公众号【大数据与云原生技术分享】加群交流或私信交流技术~

微信小程序开发——打开另一个小程序(代码片段)

微信小程序打开另一个小程序,有两种方法:1.超链接;2.点击按钮。全局配置:跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下:App.json..."navigateToMiniProgramAppIdList":["wxe5f52902cf4de896"]否则会... 查看详情

微信小程序开发上线注意事项(代码片段)

微信小程序开发上线注意事项记录微信小程序开发及上线过程中需要注意的一些事项。一、准备工作1.抢注小程序名称只要想好要开发小程序后,就应该立刻进行小程序账号和名称的注册。及时验证小程序名称是否符合要求&#... 查看详情

微信小程序开发创建一个小程序页面(代码片段)

为了方便讲解,我们将上篇博客创建的小程序除了project.config.json和sitemap.json两个文件保留,其他全部删除(这两个文件存的是小程序的创建信息,删掉会有报错提示)。接下来我们创建如下文件,先不写内容。写入如下代码://... 查看详情

企业微信小程序开发流程数理

参考技术A1、微信公众平台小程序账号2、企业微信管理平台1、只在企业微信里使用,不能在普通小程序使用2、只有授权的用户可以使用该小程序3、控制搜索4、控制分享1、小程序基础功能开发,提交审核2、小程序关联到企业微... 查看详情

微信小程序开发流程(代码片段)

开发小程序一般流程:申请小程序帐号安装小程序开发者工具开发小程序提交审核和发布注册企业账号这是方法注册路径注册企业账号,分企业认证和微信认证企业认证:需企业打钱到腾讯账户(注册时会提供... 查看详情

微信小程序开发基础「配置」与「逻辑层」(代码片段)

微信小程序作为微信生态重要的一环,在实际生活、工作、商业中的应用越来越广泛。想学习微信小程序开发的朋友也越来越多,本文将在小程序框架的基础上就微信小程序项目开发所必需的基础知识及语法特点进行了详细总结... 查看详情

《微信小程序开发》页面导航最强详解|如何对小程序页面进行跳转?(代码片段)

《微信小程序开发》页面导航最强详解|如何对小程序页面进行跳转?文章目录《微信小程序开发》页面导航最强详解|如何对小程序页面进行跳转?一、微信小程序导航二、命名式导航与编程式导航对应表三、命名式导航... 查看详情

微信小程序开发(笔记)(代码片段)

微信小程序开发笔记一、微信小程序的结构1、初识小程序2、快捷键二、常用组件1.input组件2.button组件三、小程序中的函数1.函数的两种定义方法1.函数在本页面的调用2.带参函数2.js中的默认函数四、点击事件五、获取用户输入六... 查看详情

微信小程序开发笔记进阶篇④——getphonenumber获取用户手机号码(小程序云)(代码片段)

...一、前言二、前端代码wxml三、前端代码js四、云函数五、程序流程一、前言微信小程序开发笔记——导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码。但是,因为小程序用户的手机号码属于... 查看详情

微信小程序开发(代码片段)

1、微信小程序简介1.1、什么是微信小程序​  百度百科给出的定义:微信小程序,英文名WechatMiniProgram,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开... 查看详情

微信小程序开发(代码片段)

1、微信小程序简介1.1、什么是微信小程序​  百度百科给出的定义:微信小程序,英文名WechatMiniProgram,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开... 查看详情

来客推:微信小程序开发制作流程简单4步搞清楚丨小程序开发

参考技术A很多想做小程序的商家一看到“开发制作”,就望而生畏,认为制作小程序是一个复杂的流程,也会担心自身没有“专业”人士配合,没办法很好地保证小程序正常上线。其实,这种担心是多虑的。现在,市面上大多... 查看详情

微信小程序开发开启(代码片段)

小程序和普通网页开发的区别1.运行环境不同小程序是运行在微信环境中,而网页是运行在浏览器环境中。2.API不同由于运行环境不同,所以小程序中,无法调用DOM和BOM的API。但是,小程序中可以调用微信环境提供... 查看详情

微信小程序开发——微信小程序下拉刷新真机无法弹回(代码片段)

开发工具中下拉之后页面回弹有一定的延迟,这个时间也有点久。真机测试,下拉后连回弹都没有,这个问题要解决,就得在下拉函数里加上停止下拉刷新的API,如下:/***下拉刷新*/onPullDownRefresh:function(e)this.getList()wx.stopPullDownRe... 查看详情

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。(代码片段)

小程序简介小程序是一种不需要下载安装即可使用的快速应用,它实现了应用“触手可及”的操作;用户扫一扫或搜一下即可打开应用,完全不需要安装,因此小程序不仅可提高的用户的应用体验,也方便应用的传扩散。... 查看详情

飞书小程序开发经验(代码片段)

飞书小程序开发经验总结前序最近一段时间,由于工作需要,我先在微信小程序开发平台上开发了一套程序,但是由于微信小程序不能保证整体的数据流都封闭在内网里,因而决定转战飞书小程序,将整体的... 查看详情

微信小程序开发入门(代码片段)

目录1.简介微信小程序,英文名WechatMiniProgram是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。优点开发成本低、门槛低、开发周期短用完就关闭,不... 查看详情

大佬教你微信小程序分包(附微信小程序开发学习手册)(代码片段)

...址:https://blog.csdn.net/atu1111/article/details/120487943微信小程序分包1.为什么要分包在微信小程序上线时,要求整个小程序所有分包大小不超过16M(主包+所有分包࿰ 查看详情