微信小程序开发总结

职业喷子 發表於 2024-12-25 19:37:00

业务需要,最近又搞起了微信小程序,之前从来没有参与过小程序的开发,对于开发中的流程也是知之甚少,正好学习一下,开搞...
前提:
<ul>
<li>使用企业注册小程序</li>
<li>微信认证</li>
<li>小程序备案</li>
</ul>
 
[本地开发]
1.获取appid和secret
管理 > 开发管理获取即可, 需要管理员扫码确认
<img src="https://img2024.cnblogs.com/blog/1128896/202412/1128896-20241225193152921-875286222.png" alt="" width="754" height="320" loading="lazy">
这里获取到的appid在使用开发者工具的时候,需要填写
2.设置服务器域名
管理 > 开发管理 > 设置服务器域名
<img src="https://img2024.cnblogs.com/blog/1128896/202412/1128896-20241225193335976-1978675388.png" alt="" width="753" height="317" loading="lazy">
 这个如果使用微信开发者工具,开启合法域名和证书验证的话,是需要指定对应的域名的, 否则无法正常调用接口, 另外在上线的时候,也是需要进行配置的
 
其他设置:
1.消息推送(因为后面会用到小程序的客服功能, 所有需要接收信息并回复使用)
管理 > 开发管理 > 消息推送
<img src="https://img2024.cnblogs.com/blog/1128896/202412/1128896-20241225193752200-744574816.png" alt="" loading="lazy">
 
2.服务类目设置
账号设置 > 基本设置 > 服务类目
需要进行设置,否则在代码发布流程中还是需要补充对应的服务类目
 
3. 明文scheme拉起此小程序设置
账号设置 > 基本设置 > 明文scheme拉起此小程序
后面的调用流程,是在APP中可以直接调起微信的小程序,所以这里是需要设置下调起的path(需要管理员确认)
 
<div class="cnblogs_code">
<pre>注意点:
1.该路径必须是上线的小程序存在的
2.如果需要添加多个跳转页面，使用分号隔开即可，不用换行</pre>
</div>
 
APP唤起微信小程序
1. 小程序进行明文scheme配置
2. APP端调起
<div class="cnblogs_code">
<pre>基本使用，代码如下（示例）：
window.open('weixin://dl/business/?
appid=此处填写自己小程序项目的appid&path=pages/index/index', '_blank');
携带参数：地址后面通过query%3D参数，微信跳转参数使用=号或者&符号可能导致无法跳转，所以使用encode编码形式写即可
= 的encode 编码为 %3D

// 带参数方式
window.open('weixin://dl/business/?
appid=项目appid&path=pages/index/index&query=isApp%3Dtrue', '_blank');</pre>
</div>
3. 小程序页面接收参数
<div class="cnblogs_code">
<pre>onLoad: function (options) {
console.log(options.isApp)
}</pre>
</div>
其他说明
<div class="cnblogs_code">
<pre>1. 如果需要在调式的时候，小程序方面也需测试，可传递参数env_version
示例：

window.open('weixin://dl/business/?
appid=项目appid&path=pages/index/index
&env_version='trial'
&query=isApp%3Dtrue', '_blank');
跳转到小程序体验版或者开发版，即可在不上传小程序审核的情况下进行测试。

2. 传递多个参数，此处多传递一个token参数
& 符号的encode编码为 %26
=符号的encode编码为 %3D

示例：

let token = localStorage.getItem('token')

let aa = true

window.open('weixin://dl/business/?
appid=项目appid&path=pages/index/index
&env_version='trial'

JS中的话使用encodeURIComponent进行encode编码</pre>
</div>
 
 
 
[开发工具]
1.下载开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2.使用工具
- 保存即编译
- 真机调试
- 清理缓存
3.查看配置信息并进行相应设置, 例如这里的不校验合法域名,就可以调用本地的接口地址进行自测
<img src="https://img2024.cnblogs.com/blog/1128896/202412/1128896-20241225195003260-1882025950.png" alt="" loading="lazy">
 
4. 发布流程
本地开发完成 -> 点击右上角的"上传" -> 登录到小程序的后台(管理 > 版本管理 > 开发版本中就可以看到提交上来的代码), 这里可以设置为体验版,分享别人进行体验测试 -> 提交审核 -> 代码检测(备案检测,认证检测) --> 发布成功,等待审核等等
<img src="https://img2024.cnblogs.com/blog/1128896/202412/1128896-20241225195455246-1489392408.png" alt="" loading="lazy">
 
<img src="https://img2024.cnblogs.com/blog/1128896/202412/1128896-20241225195556567-34357060.png" alt="" loading="lazy">
 
 
[接入小程序客服]
总共分为两种:
<ul>
<li>小程序客服（个人微信扫码登陆客服系统后使用）</li>
<li>微信客服（接入企业微信，有消息直接发送到企业微信）</li>
</ul>
目前使用的是小程序客服方式,并且使用api的方式对接自动回复
 
1. 页面上放置客服按钮(必须用户手动触发)
<div class="cnblogs_code">
<pre><button open-type="contact" bindcontact="handleContact"></button>

Page({
handleContact (e) {
console.log(e.detail.path)
console.log(e.detail.query)
}
})</pre>
</div>
需要将 button 组件 <code>open-type</code> 的值设置为 <code>contact</code>，当用户点击后就会进入客服会话，如果用户在会话中点击了小程序消息，则会返回到小程序，开发者可以通过 <code>bindcontact</code> 事件回调获取到用户所点消息的页面路径 <code>path</code> 和对应的参数 <code>query</code>
2.api方式接入
首先进行设置: 消息推送中设置回调地址,Token,AesKey
1) 点击保存会进行Token的验证(第一次设置会触发), query参数中会多传递一个echostr字符串
消息推送的对接: https://developers.weixin.qq.com/miniprogram/dev/framework/server-ability/message-push.html
我使用的EasyWechat, 较为方便的进行参数验证以及数据解密
2) 签名验证
<div class="cnblogs_code">
<pre>function checkSignature(string $token)
{
$nonce = $_GET["nonce"] ?? '';
$signature = $_GET["signature"] ?? '';
$timestamp = $_GET["timestamp"] ?? '';
$tmpArr = array($token, $timestamp, $nonce);
sort($tmpArr, SORT_STRING);
$tmpStr = implode('', $tmpArr);
$tmpStr = trim(sha1($tmpStr));
if (empty($token)) die('未设置消息推送token令牌');
if (empty($signature) || empty($tmpStr) || empty($nonce)) die('非法请求！！！');
if ($tmpStr != $signature) die('签名验证错误');
isset($_GET['echostr']) ? die($_GET['echostr']) : '';
}</pre>
</div>
 
 
更多说明:
点击按钮进入小程序客服的时候,可以指定session-from, 就可以用来做一些,传递一些参数用于业务处理
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">1.在页面上使用客服消息
<button open-type="contact" bindcontact="handleContact"></button>
必须属性：
open-type="contact"

非必须属性：
session-from - 会话来源(不同按钮，可以设置不同值，表示不同的会话场景)

send-message-title - 会话内消息卡片标题(默认：当前标题)

send-message-path - 会话内消息卡片点击跳转小程序路径(默认：当前分享路径)

send-message-img - 会话内消息卡片图片(默认：截图)

show-message-card - 是否显示会话内消息卡片(默认：false)
设置为 true，用户进行客服会话会在右下角显示 '可能要发送的小程序' 提示，用户点击后可以快速发送小程序消息

bindcontact - 客服消息回调
如果用户在会话中，点击了由 '服务端' 发送的小程序消息，则会返回到小程序，我们可以通过 bindcontact 事件回调，来获取用户所点消息的页面路径 path 和参数 query

// 回调事件
handleContact (e) {
console.log(e.path)
console.log(e.query)
}

/*
注意：
'服务端' 返回的小程序消息，只能是本小程序，但可以指定不同的页面及参数
miniprogrampage - 小程序消息结构
title - 消息标题

pagepath - 小程序页面路径，支持参数，例如：pages/index/index?foo=bar

thumb_media_id - 小程序消息卡片封面，image 类型的 media_id
*/

参考文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html
https://developers.weixin.qq.com/miniprogram/dev/component/button.html
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/customer-message/customerServiceMessage.send.html

2.服务端接收的消息类型：
text - 文本消息
Content -文本内容

image - 图片消息
PicUrl -
MediaId - 图片消息媒体ID
可以调用接口 'getTempMedia - 获取临时素材' 拉取数据

miniprogrampage - 小程序卡片消息
Title - 标题
AppId - 小程序 appid
PagePath - 小程序页面路径
ThumbUrl - 小程序封面图的临时 cdn 链接
ThumbMediaId - 小程序封面图的临时素材id

event - 事件消息
user_enter_tempsession - 进行会话事件
sessionForm - '客服会话按钮' 上设置的 'session-from - 会员来源'，有助于我们分析不同场景

参考文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/receive.html

3.服务端发送的消息类型：
text - 文本消息

image - 图片消息

link - 图文消息(easywechat 使用的还是 news)

miniprogrampage - 小程序卡片消息

参考文档：
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/customer-message/customerServiceMessage.send.html

4.转发客服消息：
可以将用户的消息，转发到网页版的客服工具，接入多客服系统

返回的消息类型为：
transfer_customer_service

参考文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/trans.html

5.关于消息中，涉及到的媒体文件问题：
MediaId 以及 ThumbMediaId，有 2 个接口：
1>uploadTempMedia - 上传临时素材
参数：
acccess_token
type - 文件类型(目前只有：image)
media - form-data 中媒体文件标识，有filename、filelength、content-type等信息(FormData 表单数据)

2>getTempMedia - 下载临时素材
参数：
acccess_token
media_id - 媒体文件ID

参考文档：
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/customer-message/customerServiceMessage.uploadTempMedia.html
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/customer-message/customerServiceMessage.getTempMedia.html

6.下发客服状态：
这个没测试

参考文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/typing.html
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/customer-message/customerServiceMessage.setTyping.html

7.EasyWeChat 开发
小程序的客服消息：$app->customer_service。同公众号的客服消息应该是一致的。

同时，进入消息、接收消息、发送消息的用法，都是参照公众号文档。

客服消息，跟发送普通消息的区别是(以 text 消息为例)：

// 普通消息
return new Text('你好!');

// 客服消息
$message = new Text('你好!');
$app->customer_service->message($message)->to($open_id)->send();

参考文档：
服务端
https://www.easywechat.com/docs/4.1/official-account/server

消息
https://www.easywechat.com/docs/4.1/official-account/messages

多客服消息转发(跟上面的第 4 点一样，转发给客服系统)
https://www.easywechat.com/docs/4.1/official-account/message-transfer

</pre>
</div>
 
开发中使用到的第三方库:
<div class="cnblogs_code">
<pre>composer require "overtrue/wechat:^5.0"</pre>
</div>
 
 
 
[开发调用本地接口]
刚开始开发的时候,一直想让他正常指定线上的访问域名,但是可以访问本地接口进行调试
步骤一：Charles工具下载地址http://www.charlesproxy.com/，下载免费试用版本
<img src="https://www.mpgcw.com/wp-content/uploads/2019/04/7.png" sizes="(max-width: 448px) 100vw, 448px" srcset="https://www.mpgcw.com/wp-content/uploads/2019/04/7.png 448w, https://www.mpgcw.com/wp-content/uploads/2019/04/7-300x229.png 300w" alt="安装Charles工具" width="448" height="342" class="aligncenter wp-image-3262">
步骤二：打开Charles工具，Help-SSL Proxying-Install Charles Root Certificate 安装证书到本地；
<img src="https://www.mpgcw.com/wp-content/uploads/2019/04/8.png" sizes="(max-width: 414px) 100vw, 414px" srcset="https://www.mpgcw.com/wp-content/uploads/2019/04/8.png 702w, https://www.mpgcw.com/wp-content/uploads/2019/04/8-300x221.png 300w" alt="打开Charles工具" width="414" height="305" class="aligncenter wp-image-3263">
<img src="https://www.mpgcw.com/wp-content/uploads/2019/04/9.png" sizes="(max-width: 412px) 100vw, 412px" srcset="https://www.mpgcw.com/wp-content/uploads/2019/04/9.png 920w, https://www.mpgcw.com/wp-content/uploads/2019/04/9-300x108.png 300w, https://www.mpgcw.com/wp-content/uploads/2019/04/9-768x275.png 768w" alt=" 安装证书" width="412" height="147" class="aligncenter wp-image-3264">
步骤三：搜索 Charles 关键字，找到证书，设置为始终信任。如图所示：
<img src="https://www.mpgcw.com/wp-content/uploads/2019/04/10.png" sizes="(max-width: 431px) 100vw, 431px" srcset="https://www.mpgcw.com/wp-content/uploads/2019/04/10.png 877w, https://www.mpgcw.com/wp-content/uploads/2019/04/10-300x190.png 300w, https://www.mpgcw.com/wp-content/uploads/2019/04/10-768x486.png 768w" alt="搜索 Charles 关键字" width="431" height="273" class="aligncenter wp-image-3265" loading="lazy">
<img src="https://www.mpgcw.com/wp-content/uploads/2019/04/20.png" sizes="(max-width: 428px) 100vw, 428px" srcset="https://www.mpgcw.com/wp-content/uploads/2019/04/20.png 1016w, https://www.mpgcw.com/wp-content/uploads/2019/04/20-300x255.png 300w, https://www.mpgcw.com/wp-content/uploads/2019/04/20-768x652.png 768w" alt="始终信任" width="428" height="362" class="aligncenter wp-image-3267" loading="lazy">
步骤四：打开tools-Map Remote ,添加域名到本地服务器中。
<img src="https://www.mpgcw.com/wp-content/uploads/2019/04/12.png" sizes="(max-width: 438px) 100vw, 438px" srcset="https://www.mpgcw.com/wp-content/uploads/2019/04/12.png 490w, https://www.mpgcw.com/wp-content/uploads/2019/04/12-167x300.png 167w" alt="打开tools-Map Remote" width="438" height="787" class="aligncenter wp-image-3266" loading="lazy">
<img src="https://www.mpgcw.com/wp-content/uploads/2019/04/13.png" sizes="(max-width: 433px) 100vw, 433px" srcset="https://www.mpgcw.com/wp-content/uploads/2019/04/13.png 1104w, https://www.mpgcw.com/wp-content/uploads/2019/04/13-300x188.png 300w, https://www.mpgcw.com/wp-content/uploads/2019/04/13-768x480.png 768w, https://www.mpgcw.com/wp-content/uploads/2019/04/13-1024x640.png 1024w" alt="添加域名到本地服务器" width="433" height="271" class="aligncenter wp-image-3268" loading="lazy">
<img src="https://www.mpgcw.com/wp-content/uploads/2019/04/14.png" sizes="(max-width: 426px) 100vw, 426px" srcset="https://www.mpgcw.com/wp-content/uploads/2019/04/14.png 824w, https://www.mpgcw.com/wp-content/uploads/2019/04/14-214x300.png 214w, https://www.mpgcw.com/wp-content/uploads/2019/04/14-768x1076.png 768w, https://www.mpgcw.com/wp-content/uploads/2019/04/14-731x1024.png 731w" alt="tools-Map Remote" width="426" height="597" class="aligncenter wp-image-3270" loading="lazy">
步骤五：打开 Proxy，选Proxy Settings选项，端口值是8888，这个端口号需要记住，后面在微信小程序开发工具会使用到。
<img src="https://www.mpgcw.com/wp-content/uploads/2019/04/15.png" sizes="(max-width: 478px) 100vw, 478px" srcset="https://www.mpgcw.com/wp-content/uploads/2019/04/15.png 1416w, https://www.mpgcw.com/wp-content/uploads/2019/04/15-300x224.png 300w, https://www.mpgcw.com/wp-content/uploads/2019/04/15-768x574.png 768w, https://www.mpgcw.com/wp-content/uploads/2019/04/15-1024x765.png 1024w" alt="端口值是8888" width="478" height="358" class="aligncenter wp-image-3269" loading="lazy">
步骤六：选择Mac OS X选项卡，启用如下两个选项，如图所示
<img src="https://www.mpgcw.com/wp-content/uploads/2019/04/16.png" sizes="(max-width: 500px) 100vw, 500px" srcset="https://www.mpgcw.com/wp-content/uploads/2019/04/16.png 1416w, https://www.mpgcw.com/wp-content/uploads/2019/04/16-300x224.png 300w, https://www.mpgcw.com/wp-content/uploads/2019/04/16-768x574.png 768w, https://www.mpgcw.com/wp-content/uploads/2019/04/16-1024x765.png 1024w" alt="选择Mac OS X选项卡" width="500" height="374" class="aligncenter wp-image-3271" loading="lazy">
步骤七：选用 Proxy-Mac OS X Proxy 启用本地的代理服务
<img src="https://www.mpgcw.com/wp-content/uploads/2019/04/17.png" sizes="(max-width: 490px) 100vw, 490px" srcset="https://www.mpgcw.com/wp-content/uploads/2019/04/17.png 498w, https://www.mpgcw.com/wp-content/uploads/2019/04/17-210x300.png 210w" alt="选用 Proxy-Mac OS X Proxy" width="490" height="702" class="aligncenter wp-image-3272" loading="lazy">
以上基本上完成了本地服务代理服务的步骤，接下来
这时，Charles已经完成了本地服务代理线上服务的步骤，接下来就是微信web开发者工具中的一些设置。
在扫码登录后，点击右上角代理的选项
<img src="https://www.mpgcw.com/wp-content/uploads/2019/04/18.png" sizes="(max-width: 473px) 100vw, 473px" srcset="https://www.mpgcw.com/wp-content/uploads/2019/04/18.png 600w, https://www.mpgcw.com/wp-content/uploads/2019/04/18-300x251.png 300w" alt="代理的选项" width="473" height="396" class="aligncenter wp-image-3273" loading="lazy">
选择手动设置代理，然后填写本地的IP，以及前边在Charles中设置的代理端口号
<img src="https://www.mpgcw.com/wp-content/uploads/2019/04/19.png" sizes="(max-width: 456px) 100vw, 456px" srcset="https://www.mpgcw.com/wp-content/uploads/2019/04/19.png 600w, https://www.mpgcw.com/wp-content/uploads/2019/04/19-300x251.png 300w" alt="代理端口号" width="456" height="382" class="aligncenter wp-image-3274" loading="lazy">
 
 
 
常见问题:
1)easyWeChat报错Failed to cache access token
解决:
overtrue/wechat 默认使用的是 symfony/cache 来进行缓存操作，
symfony/cache会在/tmp目录下建立symfony_cache来储存临时缓存。
所以从/tmp目录下找到symfony_cache目录删除该目录让其重新创建就可以, 若已经存在数据,则设置为项目的权限即可,例如项目是www:
<div class="cnblogs_code">
<pre>chown -R www:www /tmp/symfony-cache/</pre>
</div>
 
 
 
 
 
 
参考文档:
- 小程序客服:https://blog.csdn.net/abccba9978/article/details/124980716
- 回调验证: https://www.itqaq.com/index/224.html
- 接收的消息与事件: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/receive.html
- 小程序发布流程: https://blog.csdn.net/2301_79985012/article/details/138001540
- 小程序半屏支持： https://blog.csdn.net/XYX8958/article/details/141027742
  
来源：https://www.cnblogs.com/xingxia/p/18631299/wechat_mini

頁: [1]

琼殿技术论坛's Archiver

微信小程序开发总结