====== C2接入到小程序 ======
===== 前期准备 =====
- 微信公众号(必须是企业认证)
- 申请注册一个小程序,本文默认你已经知道小程序申请和注册流程,并且具备相应的资质和权限,申请过程中注意,对小程序的信息进行设置时,小程序类型不要选“游戏”,而是选择类似于“文娱”、“教育”等,并且不需要提供额外资质证明的选项,另外每个身份证、每个手机号、每个微信号、均只允许绑定最多5个小程序
- 接下来,在申请好小程序之后,如果你不是一个人开发、测试小程序,需要到身份管理菜单添加其他开发者和体验者,添加其他人需要管理员权限
- 再然后,需要对小程序的业务域名、request合法域名等进行设置,在设置菜单,开发设置可以找到相关选项,其中业务域名需要管理员权限才能设置,并且只有企业账号开放此选项。不论业务域名还是各种合法域名,都需要HTTPS访问,https证书可以在阿里云或腾讯云申请免费1年的版本,配置方法将另开新帖
- 同时,就可以到设置菜单的开发设置中获取Appid及Secret,首次获取AppSecret需要生成,生成后必须牢记,否则只能重置换一个新的Secret
- 获得Appid后,即可打开开发者工具,新建一个小程序项目,填入Appid,开始小程序编码部分了
- 除了小程序以外,刚才填写的对应服务器也应事先准备好,如果你需要使用小程序的高级功能,则需要你的服务器支持动态服务,比如PHP 等,本文默认你已经知道PHP服务器的部署方法,也只提供PHP-redis版本的示例代码,部署方法见[[ubuntu_nginx_php-fpm_mysql_redis|ubuntu+Nginx+php-fpm+Mysql+Redis]]
===== 小程序编码部分 =====
==== 基础部分 ====
- 新建小程序时,可以直接建立一个简单模板,在模板基础上编辑(不要模板也可以),本文默认你新建了简单模板
- 打开index.wxml,删除所有其他内容,并写下
- 点击编译,你会发现,好了……
- 接下来,编写转发需要的代码,找到index.js,底部有onShareAppMessage:function(){},改下如下 onShareAppMessage: function (res) {
return {
title: '分享标题',
desc: '分享描述',
imageUrl: '分享用图片', //长宽比5:4,可以拷贝到index目录下 比如'/pages/index/share.png'
path: '分享路径' //如果没有别的选项就是'/pages/index/index'
}
}
- 保存编译后你就会发现,在左边的页面上可以点三个点转发了
==== 高级部分 ====
=== 修改页面为全屏 ===
找到 app.json 在"window"下加上
"navigationStyle": "custom"
注意JSON格式,即可实现全屏,另外注意,调试基础库版本需高于1.9.4,此命令才有效
=== 微信登录 ===
微信登录需要后端支持
在默认模板的 app.js 中有示例代码
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
改成
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
if (res.code) {
var that = this
wx.request({
url: 'https://LOGIN_REQUEST_URL/',
data: {
code: res.code
},
success: function (result) {
let openId = result.data.openid;
wx.setStorageSync('openid', openId)
if (this.userOpenidCallback) {
this.userOpenidCallback(result)
}
}
})
} else {
console.log('ERR' + res.errMsg);
}
}
})
这样之后就可以在本地缓存中取出openid,对应后端代码如下:
=== 获取用户信息 ===
由于微信修改了策略,必须要点击按钮才允许获取用户信息,所以之前打算在打开页面时直接获取用户信息的计划就可以拜拜了,在默认模板项目 index.js 中,有如下代码 getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
改为
getUserInfo: function (e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
});
wx.request({
url: 'https://INFO_REQUEST_URL',
data: {
openid: wx.getStorageSync('openid'),
info: app.globalData.userInfo
}
})
}
执行这一步的目的,是为了将UserInfo传递到后端进行保存,便于在C2页面中用AJAX取得Userinfo,对应的后端需要用数据库(Redis或MySQL)保存上传的Userinfo,以openid为标识Key,存储数据,代码如下:
connect('REDIS_HOST', 'REDIS_PORT');
$redis->auth('REDIS_AUTH');
@$info = $_REQUEST["info"];
@$oid = $_REQUEST["openid"];
$redis->hset("userinfo", $oid, $info);
$redis->close();
exit();
之后在C2中用AJAX再取数据时,直接用openid从redis中取值即可,如
echo $redis->hget("userinfo",$oid);
=== 向C2页面传值 ===
===用按钮调起向指定用户转发 ===
===== C2对接部分 =====
==== 基础对接部分 ====
==== 获取用户信息 ====
==== 调用小程序跳转页面 ====