微信小程序内嵌H5页面开发,微信扫描带参数二维码浏览指定H5页面,实现OPENID和参数传递
微信小程序web-view传递OpenID及二维码携参调转
1. 通过启动页面结合启动参数的方式
a. 进入场景:扫描二维码
b. 启动页面:pages/markform/markform
c. 启动参数:bedcode=00001-00005
d. 提交表单页面增加启动参数处理,将参数传递到web-view中进行数据检验
e. 提交版本描述:添加表单提交对应对应页面,因程序开发尚未完成,无法提供测试账号和密码,附设计截图
2. 后端请求接口处理wx数据:
a. 微信小程序中可以获取到user.code(有效期5分钟)
b. 但是不能用user.code直接请求https://api.weixin.qq.com接口换取user.openid
c. 所以需要搭建后端请求服务
d. https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&js_code=' + res.code + '&grant_type=authorization_code
e. 直接用get方法请求地址就能得到数据,再将数据返回即可
3. 微信小程序公众平台设置:
a. 服务器域名-设置
b. 业务域名-设置
c. 扫普通连接二维码打开小程序-设置
i. 设置时需要在服务器进行文件验证,建议先将验证通过后再部署程序
ii. 协议类型http/https根据实际情况选择
iii. 二维码规则自动生成
iv. 小程序功能页面设置成web-view所在页
4. 微信小程序开发
a. IDE:微信开发者工具
b. 在app.js页onLaunch事件=>wx.login方法中用res.code请求后端接口换取openid
c. 生命周期:因为onLaunch事件的生命周期排在页面onLoad事件之后,所以需要用到回调进行处理,在请求后端的方法中加入:
this.globalData.employId = res.data;
//由于这里是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.employIdCallback) {
this.employIdCallback(res.employId);
}
d. 在页面的onLoad事件中加入代码:
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.employIdCallback = employId =>{
if (employId != ''){
//回调的程序写在这里
//数据处理
//对web-view地址赋值
}
}
e. 通过this.setData({"url":"跳转地址"})设置url地址
f. 前端web-view显示页面
5. 二维码生成
a. 通过在线生成工具(如:草料二维码 https://cli.im/weapp)
b. 填写小程序 APP ID 和 APP Secret
c. 填写页面路径 & 参数 (如:pages/iform/iform?bedcode=000000-0000000000)
d. 生成二维码后通过扫描二维码直接进入(信息填报页)
lo.c