微信小程序开发总结

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

前提:

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

 

[本地开发]

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
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

 

posted @   X-Wolf  阅读(51)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
历史上的今天:
2018-12-25 Mac之lnmp环境搭建
2018-12-25 PHP之pear包总结
 
点击右上角即可分享
微信分享提示
杭州
18:04发布
杭州
18:04发布
4°
西南风
2级
空气质量
相对湿度
87%
今天
多云 / 小雨
4°/13°
周三
多云 / 晴
8°/19°
周四
多云
11°/24°