微信小程序开发总结

业务需要,最近又搞起了微信小程序,之前从来没有参与过小程序的开发,对于开发中的流程也是知之甚少,正好学习一下,开搞...

前提:

  • 使用企业注册小程序
  • 微信认证
  • 小程序备案

 

[本地开发]

1.获取appid和secret

管理 > 开发管理 获取即可, 需要管理员扫码确认

这里获取到的appid在使用开发者工具的时候,需要填写

2.设置服务器域名

管理 > 开发管理 > 设置服务器域名

 这个如果使用微信开发者工具,开启合法域名和证书验证的话,是需要指定对应的域名的, 否则无法正常调用接口, 另外在上线的时候,也是需要进行配置的

 

其他设置:

1.消息推送(因为后面会用到小程序的客服功能, 所有需要接收信息并回复使用)

管理 > 开发管理 > 消息推送

 

2.服务类目设置

账号设置 > 基本设置 > 服务类目

需要进行设置,否则在代码发布流程中还是需要补充对应的服务类目

 

3. 明文scheme拉起此小程序设置

账号设置 > 基本设置 > 明文scheme拉起此小程序

后面的调用流程,是在APP中可以直接调起微信的小程序,所以这里是需要设置下调起的path(需要管理员确认)

 

注意点:
1.该路径必须是上线的小程序存在的
2.如果需要添加多个跳转页面,使用分号隔开即可,不用换行

 

APP唤起微信小程序

1. 小程序进行明文scheme配置

2. APP端调起

基本使用,代码如下(示例):
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');

3. 小程序页面接收参数

onLoad: function (options) {
    console.log(options.isApp)
}

其他说明

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编码

 

 

 

[开发工具]

1.下载开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.使用工具

- 保存即编译

- 真机调试

- 清理缓存

3.查看配置信息并进行相应设置, 例如这里的不校验合法域名,就可以调用本地的接口地址进行自测

 

4. 发布流程

本地开发完成 -> 点击右上角的"上传" -> 登录到小程序的后台(管理 > 版本管理 > 开发版本中就可以看到提交上来的代码), 这里可以设置为体验版,分享别人进行体验测试 -> 提交审核 -> 代码检测(备案检测,认证检测) --> 发布成功,等待审核等等

 

 

 

[接入小程序客服]

总共分为两种:

  • 小程序客服(个人微信扫码登陆客服系统后使用)
  • 微信客服(接入企业微信,有消息直接发送到企业微信)

目前使用的是小程序客服方式,并且使用api的方式对接自动回复

 

1. 页面上放置客服按钮(必须用户手动触发)

<button open-type="contact" bindcontact="handleContact"></button>

Page({
    handleContact (e) {
        console.log(e.detail.path)
        console.log(e.detail.query)
    }
})

需要将 button 组件 open-type 的值设置为 contact,当用户点击后就会进入客服会话,如果用户在会话中点击了小程序消息,则会返回到小程序,开发者可以通过 bindcontact 事件回调获取到用户所点消息的页面路径 path 和对应的参数 query

2.api方式接入

首先进行设置: 消息推送中设置回调地址,Token,AesKey

1) 点击保存会进行Token的验证(第一次设置会触发), query参数中会多传递一个echostr字符串

消息推送的对接: https://developers.weixin.qq.com/miniprogram/dev/framework/server-ability/message-push.html

我使用的EasyWechat, 较为方便的进行参数验证以及数据解密

2) 签名验证

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']) : '';
}

 

 

更多说明:

点击按钮进入小程序客服的时候,可以指定session-from, 就可以用来做一些,传递一些参数用于业务处理

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
 
 
 

 

开发中使用到的第三方库:

composer require "overtrue/wechat:^5.0"

 

 

 

[开发调用本地接口]

刚开始开发的时候,一直想让他正常指定线上的访问域名,但是可以访问本地接口进行调试

步骤一:Charles工具下载地址http://www.charlesproxy.com/,下载免费试用版本

安装Charles工具

步骤二:打开Charles工具,Help-SSL Proxying-Install Charles Root Certificate 安装证书到本地;

打开Charles工具

 安装证书

步骤三:搜索 Charles 关键字,找到证书,设置为始终信任。如图所示:

搜索 Charles 关键字

始终信任

步骤四:打开tools-Map Remote ,添加域名到本地服务器中。

打开tools-Map Remote

添加域名到本地服务器

tools-Map Remote

步骤五:打开 Proxy,选Proxy Settings选项,端口值是8888,这个端口号需要记住,后面在微信小程序开发工具会使用到。

端口值是8888

步骤六:选择Mac OS X选项卡,启用如下两个选项,如图所示

选择Mac OS X选项卡

步骤七:选用 Proxy-Mac OS X Proxy 启用本地的代理服务

选用 Proxy-Mac OS X Proxy

以上基本上完成了本地服务代理服务的步骤,接下来

这时,Charles已经完成了本地服务代理线上服务的步骤,接下来就是微信web开发者工具中的一些设置。

在扫码登录后,点击右上角代理的选项

代理的选项

选择手动设置代理,然后填写本地的IP,以及前边在Charles中设置的代理端口号

代理端口号

 

 

 

常见问题:

1)easyWeChat报错Failed to cache access token

解决:

overtrue/wechat 默认使用的是 symfony/cache 来进行缓存操作,

symfony/cache会在/tmp目录下建立symfony_cache来储存临时缓存。

所以从/tmp目录下找到symfony_cache目录删除该目录让其重新创建就可以, 若已经存在数据,则设置为项目的权限即可,例如项目是www:

chown -R www:www /tmp/symfony-cache/

 

 

 

 

 

 

参考文档:

- 小程序客服: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

 

posted @ 2024-12-25 19:37  X-Wolf  阅读(211)  评论(0)    收藏  举报