首页 › 公众号/小程序论坛 › 【小程序】微信小程序开发流程

色彩斑斓 發表於 2023-4-9 17:51:00

【小程序】微信小程序开发流程

<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>一、概述</li><li>二、整体开发架构</li><li>三、注册账号和安装开发工具<ul><li>1）注册账号<ul><li>1、注册方法</li><li>2、选择注册的帐号类型</li><li>3、填写邮箱和密码</li><li>4、激活邮箱</li><li>5、填写主体信息</li><li>6、登录后台补充信息</li></ul></li><li>2）安装开发工具</li><li>3）快速开始<ul><li>1、云开发和传统开发的区别</li><li>2、云开发 API 分类</li><li>3、AppID 获取</li><li>4、快速开始</li></ul></li></ul></li><li>四、小程序登录流程<ul><li>1）登录流程时序流程图</li><li>2）认识openid，unionid 和code</li></ul></li></ul></div><p></p>
<h2 id="一概述">一、概述</h2>
<p>微信小程序是一种基于微信平台的应用程序，用户可以在微信中直接使用这些小程序，无需下载和安装，具有轻便、快速、实用等特点。</p>
<ul>
<li>
<p>微信小程序通常可以提供各种服务和功能，例如购物、预定、社交、游戏等等。开发者可以使用微信小程序开发工具进行开发，并上传至微信平台发布。用户可以通过微信内置的小程序搜索或扫描二维码进入小程序，也可以通过分享链接进入。</p>
</li>
<li>
<p>微信小程序可以在微信中使用，无需打开其他应用程序，也无需下载和安装，因此具有便捷、快速、节省手机存储空间等优势。另外，微信小程序也支持各种应用场景，如公共交通、旅游景区、餐饮服务等等。</p>
</li>
</ul>
<p>总之，微信小程序是一个非常有用的工具，它提供了各种方便的服务和功能，同时也为开发者提供了一个便捷的开发平台。<br>
<img src="https://img-blog.csdnimg.cn/9ea904ea6d0042858922f51e2b64895c.png"></p>
<p>要做微信小程序开发需要几个前提条件：</p>
<ol>
<li>注册一个微信小程序账号，如果觉得太麻烦，可以去某宝找人帮你注册一个。</li>
<li>安装开发工具</li>
</ol>
<p>官方地址：https://mp.weixin.qq.com/<br>
官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/</p>
<h2 id="二整体开发架构">二、整体开发架构</h2>
<p>主要分为两块：一部分就是微信小程序端也就是<strong>前端</strong>，但是也提供了云端开发；一部分就是后端，后端会连着各种外部资源。其实跟其它非小程序开发流程是一样的。<br>
<img src="https://img-blog.csdnimg.cn/d912c539f5874a2da16fa554559d35be.png"></p>
<h2 id="三注册账号和安装开发工具">三、注册账号和安装开发工具</h2>
<h3 id="1注册账号">1）注册账号</h3>
<p>开发小程序的第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序。</p>
<h4 id="1注册方法">1、注册方法</h4>
<p>在微信公众平台官网首页（https://mp.weixin.qq.com/）点击右上角的“<strong>立即注册</strong>”按钮。<br>
<img src="https://img-blog.csdnimg.cn/23a57bfb3fb749b89a62c62fff9c429b.png"></p>
<h4 id="2选择注册的帐号类型">2、选择注册的帐号类型</h4>
<p>选择“<strong>小程序</strong>”，点击“<strong>查看类型区别</strong>”可查看不同类型帐号的区别和优势。<br>
<img src="https://img-blog.csdnimg.cn/0cdcc39e7b534bcc9d15ea4516215b85.png"></p>
<h4 id="3填写邮箱和密码">3、填写邮箱和密码</h4>
<p>请填写未注册过公众平台、开放平台、企业号、未绑定个人号的邮箱。<br>
<img src="https://img-blog.csdnimg.cn/fda2de2174bc43debe6f27646eeeb00c.png"></p>
<blockquote>
<p>【温馨提示】在填写小程序注册信息之前，需要先注册一个邮箱，其中<strong>每个邮箱只能申请一个小程序</strong>。并且，已经绑定了其他的公众号、小程序、个人号的邮箱，不能重新注册新的小程序。</p>
</blockquote>
<h4 id="4激活邮箱">4、激活邮箱</h4>
<p>点击“注册”之后，跳转到邮箱激活页，激活账号，继续注册流程。<br>
<img src="https://img-blog.csdnimg.cn/d0e1fee4c6f44895860c95a510c3b917.png"></p>
<h4 id="5填写主体信息">5、填写主体信息</h4>
<p>点击激活链接后，继续下一步的注册流程。请选择主体类型选择，完善主体信息和管理员信息。</p>
<p>选择主体类型，这里选择个人，当然也可以选择企业：<br>
<img src="https://img-blog.csdnimg.cn/32c8b38477f64fe1aea09b30ec7c2c76.png"></p>
<p>主体类型说明如下：<br>
<img src="https://img-blog.csdnimg.cn/b6691f0e3322436e9b8ff7950abaaa74.png"></p>
<p>1个身份证号码和一个手机号码只能注册5个小程序。注意主体信息提交后不可更改。<br>
<img src="https://img-blog.csdnimg.cn/6a19c8269af24f65aa41033f2bf7d5e6.png"></p>
<p>如果选择的是<strong>企业类型帐号</strong>，这种账号可选择两种主体验证方式（如果是选择个人账号类型。以下内容就可以忽略了）。</p>
<ul>
<li>方式一：<strong>支付验证</strong></li>
</ul>
<p>需要用公司的对公账户向腾讯公司打款来验证主体身份，打款信息在提交主体信息后可以查看到。<br>
请根据页面提示，向指定的收款帐号汇入指定金额。</p>
<blockquote>
<p>温馨提示：请在<code>10</code>天内完成汇款，否则将注册失败。</p>
</blockquote>
<ul>
<li>方式二：<strong>微信认证</strong></li>
</ul>
<p>通过微信认证验证主体身份，需支付300元认证费。认证通过前，小程序部分功能暂无法使用。</p>
<p><img src="https://img-blog.csdnimg.cn/c83d313381b94637898301c7d1dd8caa.png"><br>
填写管理员信息<br>
<img src="https://img-blog.csdnimg.cn/3aaa2e89c8264e00994fc0bb2fa44b9e.png"><br>
确认主体信息不可变更<br>
<img src="https://img-blog.csdnimg.cn/a6302108a19c470fa9aae994063183a3.png"></p>
<h4 id="6登录后台补充信息">6、登录后台补充信息</h4>
<p>在小程序管理后台中，补充小程序的基本信息，如名称、图标、描述等。</p>
<p><img src="https://img-blog.csdnimg.cn/621104844fed4fc792ece8b081237d21.png"></p>
<blockquote>
<p>【温馨提示】如果你的公众号是服务号且已经认证，可以使用“快速注册认证小程序流程”，无需重新提交主体材料、无需对公打款、无需支付<code>300</code>元认证费用。</p>
</blockquote>
<h3 id="2安装开发工具">2）安装开发工具</h3>
<p>下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html<br>
<img src="https://img-blog.csdnimg.cn/0cf24749212a4b22aa520094c69d16d9.png"></p>
<h3 id="3快速开始">3）快速开始</h3>
<p>在开始之前说一下几个知识点。</p>
<h4 id="1云开发和传统开发的区别">1、云开发和传统开发的区别</h4>
<ul>
<li>云开发就是一套解决小程序前后端开发的一种云端能力</li>
<li>它提供了一整套云服务及简单、易用的 API 和管理界面，以尽可能降低后端开发成本，让开发者能够专注于核心业务逻辑的开发、尽可能轻松的完成后端的操作和管理</li>
<li>云开发包含了小程序前端和小程序后端。</li>
</ul>
<p>传统开发：<br>
<img src="https://img-blog.csdnimg.cn/d92fc3c8cccd4d90a36b45a88db25b25.png"><br>
云开发：<br>
<img src="https://img-blog.csdnimg.cn/375e9ec979d049d2987cf541724b3feb.png"></p>
<ul>
<li>
<p>可能刚入门的小程序制作开发人员对这样的官方介绍有点摸不着头脑。直白点说，所谓的<strong>云端能力</strong>实际上就是<strong>服务器端（后端）</strong>，开发者自己不需要本地配置服务器和数据库、存储、云函数等基础能力，直接在微信官方提供的服务器端操作就行了。</p>
</li>
<li>
<p>而普通的开发，是需要自己准备服务器而且以上提到的基础能力。所以小程序云开发相对普通的开发，最大的优势就是更方便、更高效，节省开发成本。</p>
</li>
</ul>
<p>使用传统开发的优缺点：</p>
<ul>
<li>优点 : 我们不用管后台逻辑, 直接发送请求即可获取想要的数据</li>
<li>缺点 : 开发成本太大, 不能个人开发，需要域名、服务器和学习新编程语言</li>
</ul>
<p>使用云开发的优缺点：</p>
<ul>
<li>优点 : 完全可以个人开发前后端, 直接上线, 不需要依赖后端, 更重要的是简单易学</li>
<li>缺点 : 前后端都是我们自己写 , 得学习云开发之类的API</li>
</ul>
<p>云开发和传统开发的其它区别：</p>
<table>
<thead>
<tr>
<th>对比项</th>
<th>云开发</th>
<th>传统服务器</th>
</tr>
</thead>
<tbody>
<tr>
<td>难易程度</td>
<td>简单</td>
<td>复杂</td>
</tr>
<tr>
<td>部署难易</td>
<td>基本上不用部署</td>
<td>部署费时费力</td>
</tr>
<tr>
<td>是否需要域名</td>
<td>不需要</td>
<td>需要</td>
</tr>
<tr>
<td>是否需要备案</td>
<td>不需要</td>
<td>需要</td>
</tr>
<tr>
<td>是否支持https</td>
<td>不需要</td>
<td>需要</td>
</tr>
<tr>
<td>适合公司</td>
<td>中小型公司、个人</td>
<td>大公司</td>
</tr>
<tr>
<td>学习难易</td>
<td>容易上手</td>
<td>学习起来比较难</td>
</tr>
<tr>
<td>费用</td>
<td>免费版基本够用</td>
<td>200-2000/年</td>
</tr>
</tbody>
</table>
<h4 id="2云开发-api-分类">2、云开发 API 分类</h4>
<p><strong>1）云函数</strong></p>
<ul>
<li>云函数是一段运行在云端的代码，无需管理服务器，在开发工具内编写、一键上传部署即可运行后端代码。</li>
<li>小程序内提供了专门用于云函数调用的 <code>API</code>。开发者可以在云函数内使用 <code>wx-server-        sdk</code> 提供的 <code>getWXContext</code> 方法获取到每次调用的上下文（<code>appid</code>、<code>openid</code> 等），无需维护复杂的鉴权机制，即可获取天然可信任的用户登录态（<code>openid</code>）</li>
</ul>
<p><strong>2）云数据库</strong></p>
<ul>
<li>一个既可在小程序前端操作, 也能在云函数中读写的 <code>MongoDB</code> 数据库</li>
<li>一个数据库可以有多个集合（相当于关系型数据中的表），集合可看做一个 <code>JSON</code> 数组，数组中的每个对象就是一条记录，记录的格式是 <code>JSON</code> 对象</li>
</ul>
<p><strong>3）云存储</strong></p>
<ul>
<li>云开发提供了一块存储空间，在小程序前端直接上传/下载云端文件能力，在云开发控制台可视化管理</li>
<li>在小程序端可以分别调用 <code>wx.cloud.uploadFile</code> 和 <code>wx.cloud.downloadFile</code> 完成上传和下载云文件操作</li>
</ul>
<h4 id="3appid-获取">3、AppID 获取</h4>
<p>注册了账号就可以直接登录后台获取AppID了。<br>
<img src="https://img-blog.csdnimg.cn/7fdfb19585814c418266c3c1c17cf60a.png"></p>
<h4 id="4快速开始">4、快速开始</h4>
<p>创建小程序，AppID就是上面获取的。</p>
<p>传统开发：<br>
<img src="https://img-blog.csdnimg.cn/d20e75fda0c7464f956c1029435c2933.png"></p>
<h2 id="四小程序登录流程">四、小程序登录流程</h2>
<h3 id="1登录流程时序流程图">1）登录流程时序流程图</h3>
<p>先来看一下微信小程序登录流程图吧，官方地址：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html<br>
<img src="https://img-blog.csdnimg.cn/00ce7848737f45c69da7e41ebf3a64dd.png"><br>
说明</p>
<ul>
<li>调用 <code>wx.login()</code> 获取 临时登录凭证<code>code</code> ，并回传到开发者服务器。</li>
<li>调用 <code>auth.code2Session</code> 接口，换取 用户唯一标识 <code>OpenID</code> 、 用户在微信开放平台帐号下的唯一标识<code>UnionID</code>（若当前小程序已绑定到微信开放平台帐号） 和 会话密钥 <code>session_key</code>。</li>
</ul>
<p>之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。</p>
<p>【注意事项】</p>
<ul>
<li>会话密钥 <code>session_key</code> 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥。</li>
<li>临时登录凭证 <code>code</code> 只能使用一次</li>
</ul>
<h3 id="2认识openidunionid-和code">2）认识openid，unionid 和code</h3>
<ul>
<li>openid：openid是用来唯一标识用户的一个字符串。在微信小程序中，每个用户的openid都是唯一的。通过openid，小程序可以获取用户的基本信息，如头像、昵称等。</li>
</ul>
<blockquote>
<p>【注意】同一个用户在不同的小程序中拥有不同的openid。因此，在开发小程序时，不能使用openid来进行用户的唯一性判断。</p>
</blockquote>
<ul>
<li><code>unionid</code>：<code>unionid</code> 是在用户绑定同一微信开放平台账号下的多个应用时，用来唯一标识用户的一个字符串。如果用户在多个小程序中使用同一个微信号进行登录授权，那么这些小程序中的 <code>unionid</code> 都是相同的。</li>
</ul>
<blockquote>
<p>【注意】用户的unionid只有在用户将多个应用绑定到同一个微信开放平台账号下时才会生成。因此，如果用户没有绑定多个应用，那么小程序将无法获取用户的unionid。</p>
</blockquote>
<ul>
<li><code>code</code>：<code>code</code> 是用户登录凭证，由微信服务器颁发给小程序。在用户授权登录后，小程序可以通过调用微信登录接口获取用户的 <code>code</code>。然后，通过<code>code</code>向微信服务器请求用户的 <code>openid</code> 和 <code>session_key</code> 等信息。</li>
</ul>
<blockquote>
<p>【注意】每个code只能使用一次，且有效期为<code>5</code>分钟。因此，在使用code进行登录时，需要及时将其转换成用户的 <code>openid</code> 和 <code>session_key</code> 等信息，以免出现code过期的情况。</p>
</blockquote>
<p><code>openid</code>、<code>unionid</code> 和 <code>code</code> 是微信小程序登录授权中非常重要的三个参数，了解这些参数的作用和用法，有助于开发者更好地设计和开发小程序登录授权功能。</p>
<p><img src="https://img-blog.csdnimg.cn/6ef9745129ec42d69509e8f3ec87c785.png"></p>
<ol>
<li>
<p>通过wx.login()获取code。</p>
</li>
<li>
<p>将这个code发送给后端，后端会返回一个token，这个token将作为你身份的唯一标识。</p>
</li>
<li>
<p>将token通过wx.setStorageSync()保存在本地存储。</p>
</li>
<li>
<p>用户下次进入⻚面时，会先通过wx.getStorageSync() 方法判断token是否有值，如果有值，则可以请求其它数据，如果没有值，则进行登录操作。</p>
</li>
</ol>
<p>微信小程序开发流程介绍就先到这里了，有任何疑问欢迎给我留言，后续会持续更新相关教程，请小伙伴耐心等待，也可关注我的公众号【大数据与云原生技术分享】加群交流或私信交流技术~</p>
<p><img src="https://img2023.cnblogs.com/blog/1601821/202304/1601821-20230409175051029-404258354.png"></p><br><br>
来源：https://www.cnblogs.com/liugp/p/17300695.html

查看完整版本: 【小程序】微信小程序开发流程