微信小程序web-view传递OpenID及二维码携参调转的实现

微信小程序内嵌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

你可能感兴趣的:(微信小程序web-view传递OpenID及二维码携参调转的实现)