前期开发计划
本文首先假设开发者已经简单阅读过陌陌小程序的开发文档,所以注册小程序的流程就不介绍了。这里我们先看一下生成小程序代码的官方文档
1、首先我们确保开发者已经在app.json中注册了对应的页面。 当然,你的pages目录下也有对应的页面,而且一定是已经启动的小程序了。 否则生成代码后会提示找不到对应的页面。 ,这里我们以[pages/index/index]为例。
图片.png
2.之后,我们需要获取Access_token。 官方文档中也有关于获取Access_token的介绍。 进入小程序后台,点击右侧的“设置”,找到“开发设置”,我们可以找到AppSecret这项。 点击“获取”或“重置”,扫码后免费生成小程序码的网站,新的AppSecret将显示在网页上。
需要注意的是,如果你之前生成过新的AppSecret免费生成小程序码的网站,那么执行此操作旧的AppSecret就会失效。然后在官方测试网站上获取Access_token,到这里我们就完成了基本步骤
图片.png
3、然后我们继续看文档,官方提供了3个获取小程序代码的socket:
接口A:适用于需要少量代码的业务场景(生成小程序代码、接受长路径参数、限制生成代码数量)
接口B:适用于需要大量代码的业务场景(生成小程序代码,可接受的页面参数较短,生成代码数量不限)
接口C:适用于需要少量代码的业务场景(生成二维码,可接受的路径参数较长,生成代码的数量有限)
图片.png
我们需要使用AppId和AppSecret来获取AccessToken
在这一步中,我们请求的地址是:
(Applet Id)&secret=(小程序后台的AppSecret),我们需要使用GET方法来传递你的AppID和AppSecret。
grant_type 获取access_token 填写client_credential
appid是第三方用户唯一的账本
Secret 第三方用户唯一的账户密钥,即Appsecret
本例中我们使用postman来模拟请求方式,以便大家了解这个socket的用法和原理。
图片.png
从结果(emmmm,我没有获取到真正的AppId和Appsecret)可以知道,执行这个操作后,微信会返回给你一个JSON数据包。 通过解析这个数据包,我们可以得到AccessToken。
如果我们扫描生成的代码后需要打开特定页面:输入参数路径:pages/index/index
接口A:
图片.png
接口C:
图片.png
对于插座B:
这个插座是最重要的。 基本上所有的小程序代码都是通过这个socket获取的(因为没有数量限制)
与其他两种插座的区别在于:
a) 输入参数从path到page发生了变化,不能带参数(path可以带)
b) 需要的参数需要通过场景数组单独上传,然后需要在生成小程序代码的页面接收场景数组并分析进行页面逻辑处理。
图片.png
需要注意的是,后端获取Access_token并不安全,并且后端请求socket后收到的是二进制图像流文件,需要前端进行转换,所以建议生成一个小程序代码供前端操作。我们只需要传入要生成的路径和参数
let postData = { scene: `pid=${this.data.partJobId}&sid=${this.data.shareUserId}`, page: 'pages/partJob/partJob'}//这里的调用请求方法是封装过的,只做示例。this.postAjax(url, postData).then((res)) { if (res.success) { //后端返回的图片url地址 } else { toast(res.errMsg) } }
附上前端解析二进制流生成的图片地址
页面中解析:
这是业务代码的一部分,因为场景最多有32个可见字符,并且只支持数字、大小写中文和一些特殊字符,所以我们的业务ID已经超过了这个厚度。 因此,我们需要和前端约定sid为shareUserId,pid为partJobId,最后与获取到的Id进行映射,进行后续操作。
//页面初始化加载 onLoad(options) { if (!options.scene) { this.setData({ partJobId: options.partJobId, shareUserId: options.shareUserId || '', authorizedKey: options.authorizedKey || '' }) } else { var getQueryString = new Object() var strs = decodeURIComponent(options.scene).split('&') //以&分割 //取得全部并赋值 for (var i = 0; i < strs.length; i++) { getQueryString[strs[i].split('=')[0]] = unescape(strs[i].split('=')[1]) } this.setData({ partJobId: getQueryString['pid'] ? getQueryString['pid'] : '', shareUserId: getQueryString['sid'] ? getQueryString['sid'] : '' }) } }
图片.png
最后:生成代码后如何调试? ? ?
由于生成的二维码扫描码在生产环境中是作为小程序打开的,因此生成码的页面必须是网上已有的小程序页面。
您可以使用开发者工具的编译模式进行调试。 只要配置好参数,测试后如果没有问题,上线后也不会出现问题。
图片.png
生成小程序代码常见问答
1、前端生成的代码乱码?
图片.png
前面说了,前端生成的代码是二进制流文件,所以转换可以交给前端。贴一下前端将二进制流转换为图像的地址
2、生成的小程序代码偶尔为空。
确保路径是网上路径,偶尔生成的代码是这样的
图像
问题是您的 Access_token 已过期。 因为如果你在本地测试小程序代码,在本地接收到Access_token,那么线上的Access_token可能就失效了,然后你就跪下了,这取决于你的Access_token的缓存机制。
图片.png
如果您有其他详情,请联系minchangyong@qtshe.com或QQ8662054。
附上成品体验小程序【团委兼职实习】,只需在微信中搜索兼职,即可从直营服务区进入小程序。 团委紧急招募:
招聘职位:高级前端开发工程师P5及以上
坐标 杭州市余杭区文一西路1380号金之源大厦11楼
将您的简历发送至:hr@qtshe.com || haochen@qtshe.com
职位描述:
1、构建工具、细化组件、抽象框架,推动后端工程化和服务化,持续提升研发效率,保障线上产品质量
2、搭建H5/PC应用基础设施,主导各类后端发布/监控平台建设,指导解决方案实施
3、持续优化后端页面性能,维护后端代码规范,钻研各种前沿技术和创新交互,提升用户体验,拓展后端能力边界