c2接入到小程序
差别
这里会显示出您选择的修订版和当前版本之间的差别。
| 两侧同时换到之前的修订记录前一修订版后一修订版 | 前一修订版 | ||
| c2接入到小程序 [2018/05/11 21:14] – Aven | c2接入到小程序 [2024/01/22 11:09] (当前版本) – 外部编辑 127.0.0.1 | ||
|---|---|---|---|
| 行 2: | 行 2: | ||
| ===== 前期准备 ===== | ===== 前期准备 ===== | ||
| - 微信公众号（必须是企业认证） | - 微信公众号（必须是企业认证） | ||
| - | - 申请注册一个小程序，本文默认你已经知道小程序申请和注册流程，并且具备相应的资质和权限，< | + | - 申请注册一个小程序，本文默认你已经知道小程序申请和注册流程，并且具备相应的资质和权限，< |
| - 接下来，在申请好小程序之后，如果你不是一个人开发、测试小程序，需要到身份管理菜单添加其他开发者和体验者，添加其他人需要管理员权限 | - 接下来，在申请好小程序之后，如果你不是一个人开发、测试小程序，需要到身份管理菜单添加其他开发者和体验者，添加其他人需要管理员权限 | ||
| - 再然后，需要对小程序的业务域名、request合法域名等进行设置，在设置菜单，开发设置可以找到相关选项，其中业务域名需要管理员权限才能设置，并且只有企业账号开放此选项。不论业务域名还是各种合法域名，都需要HTTPS访问，< | - 再然后，需要对小程序的业务域名、request合法域名等进行设置，在设置菜单，开发设置可以找到相关选项，其中业务域名需要管理员权限才能设置，并且只有企业账号开放此选项。不论业务域名还是各种合法域名，都需要HTTPS访问，< | ||
| - 同时，就可以到设置菜单的开发设置中获取Appid及Secret，首次获取AppSecret需要生成，生成后必须牢记，否则只能重置换一个新的Secret | - 同时，就可以到设置菜单的开发设置中获取Appid及Secret，首次获取AppSecret需要生成，生成后必须牢记，否则只能重置换一个新的Secret | ||
| - 获得Appid后，即可打开开发者工具，新建一个小程序项目，填入Appid，开始小程序编码部分了 | - 获得Appid后，即可打开开发者工具，新建一个小程序项目，填入Appid，开始小程序编码部分了 | ||
| - | - 除了小程序以外，刚才填写的对应服务器也应事先准备好，本文默认你已经知道PHP服务器的部署方法，也只提供PHP-redis版本的示例代码，部署方法见[[ubuntu_nginx_php-fpm_mysql_redis|ubuntu+Nginx+php-fpm+Mysql+Redis]] | + | - 除了小程序以外，刚才填写的对应服务器也应事先准备好，如果你需要使用小程序的高级功能，则需要你的服务器支持动态服务，比如PHP 等，本文默认你已经知道PHP服务器的部署方法，也只提供PHP-redis版本的示例代码，部署方法见[[ubuntu_nginx_php-fpm_mysql_redis|ubuntu+Nginx+php-fpm+Mysql+Redis]] |
| ===== 小程序编码部分 ===== | ===== 小程序编码部分 ===== | ||
| ==== 基础部分 ==== | ==== 基础部分 ==== | ||
| - | 新建小程序时，可以直接建立一个简单模板，在模板基础上编辑（不要模板也可以） | + | - 新建小程序时，可以直接建立一个简单模板，在模板基础上编辑（不要模板也可以），本文默认你新建了简单模板 |
| - | ===== C2对接部分 ===== | + | - 打开index.wxml，删除所有其他内容，并写下< |
| + | - 点击编译，你会发现，好了…… | ||
| + | - 接下来，编写转发需要的代码，找到index.js，底部有onShareAppMessage: | ||
| + | return { | ||
| + | title: ' | ||
| + | desc: ' | ||
| + | imageUrl: ' | ||
| + | path: ' | ||
| + | } | ||
| + | }</ | ||
| + | - 保存编译后你就会发现，在左边的页面上可以点三个点转发了 | ||
| + | ==== 高级部分 ==== | ||
| + | === 修改页面为全屏 === | ||
| + | 找到 app.json 在" | ||
| + | < | ||
| + | 注意JSON格式，即可实现全屏，另外注意，调试基础库版本需高于1.9.4，此命令才有效 | ||
| + | === 微信登录 === | ||
| + | 微信登录需要后端支持 | ||
| + | 在默认模板的 app.js 中有示例代码 | ||
| + | < | ||
| + | success: res => { | ||
| + | // 发送 res.code 到后台换取 openId, sessionKey, unionId | ||
| + | } | ||
| + | }) | ||
| + | </ | ||
| + | 改成 | ||
| + | < | ||
| + | success: res => { | ||
| + | // 发送 res.code 到后台换取 openId, sessionKey, unionId | ||
| + | if (res.code) { | ||
| + | var that = this | ||
| + | wx.request({ | ||
| + | url: ' | ||
| + | data: { | ||
| + | code: res.code | ||
| + | }, | ||
| + | success: function (result) { | ||
| + | let openId = result.data.openid; | ||
| + | wx.setStorageSync(' | ||
| + | if (this.userOpenidCallback) { | ||
| + | this.userOpenidCallback(result) | ||
| + | } | ||
| + | } | ||
| + | }) | ||
| + | } else { | ||
| + | console.log(' | ||
| + | } | ||
| + | } | ||
| + | }) | ||
| + | </ | ||
| + | 这样之后就可以在本地缓存中取出openid，对应后端代码如下： | ||
| + | < | ||
| + | <?PHP | ||
| + | header(" | ||
| + | $appid = " | ||
| + | $secret | ||
| + | @$code = $_REQUEST[" | ||
| + | $url = " | ||
| + | $res = getcurl($url); | ||
| + | $arr = json_decode($res, | ||
| + | //$openid = $arr[" | ||
| + | print_r($res); | ||
| + | exit(); | ||
| + | </ | ||
| + | === 获取用户信息 === | ||
| + | 由于微信修改了策略，必须要点击按钮才允许获取用户信息，所以之前打算在打开页面时直接获取用户信息的计划就可以拜拜了，在默认模板项目 index.js 中，有如下代码< | ||
| + | console.log(e) | ||
| + | app.globalData.userInfo = e.detail.userInfo | ||
| + | this.setData({ | ||
| + | userInfo: e.detail.userInfo, | ||
| + | hasUserInfo: | ||
| + | }) | ||
| + | } | ||
| + | </ | ||
| + | 改为 | ||
| + | < | ||
| + | console.log(e) | ||
| + | app.globalData.userInfo = e.detail.userInfo | ||
| + | this.setData({ | ||
| + | userInfo: e.detail.userInfo, | ||
| + | hasUserInfo: | ||
| + | }); | ||
| + | wx.request({ | ||
| + | url: ' | ||
| + | data: { | ||
| + | openid: wx.getStorageSync(' | ||
| + | info: app.globalData.userInfo | ||
| + | } | ||
| + | }) | ||
| + | } | ||
| + | </ | ||
| + | 执行这一步的目的，是为了将UserInfo传递到后端进行保存，便于在C2页面中用AJAX取得Userinfo，对应的后端需要用数据库（Redis或MySQL）保存上传的Userinfo，以openid为标识Key，存储数据，代码如下： | ||
| + | < | ||
| + | <?PHP | ||
| + | $redis = new Redis(); | ||
| + | $redis-> | ||
| + | $redis-> | ||
| + | @$info = $_REQUEST[" | ||
| + | @$oid = $_REQUEST[" | ||
| + | |||
| + | $redis-> | ||
| + | $redis-> | ||
| + | exit(); | ||
| + | </ | ||
| + | 之后在C2中用AJAX再取数据时，直接用openid从redis中取值即可，如 | ||
| + | < | ||
| + | echo $redis-> | ||
| + | </ | ||
| + | === 向C2页面传值 === | ||
| + | |||
| + | ===用按钮调起向指定用户转发 === | ||
| + | |||
| + | |||
| + | ===== C2对接部分 ===== | ||
| + | ==== 基础对接部分 ==== | ||
| + | ==== 获取用户信息 ==== | ||
| + | ==== 调用小程序跳转页面 ==== | ||
c2接入到小程序.1526044495.txt.gz · 最后更改: (外部编辑)
除额外注明的地方外，本维基上的内容按下列许可协议发布： CC Attribution-Share Alike 4.0 International
