E企盈营销工具技术服务商 热线:4006-838-530

利用webview组件将已有h5网站移植到微信小程序,且可以用微信身份直接登录

E企盈直播平台营销卖货系统

目标解决三件事。小程序嵌入h5.获取用户信息。将用户信息以及一个唯一ID传入web-view环境里。一、小程序里嵌入H5网页这个很简单。申请注册微信小程序(必须是国内企业版)。登录管理后台,设置–开发设置–配置业务域名。给你的网站配置ssl证书,开启https,开发阶段可以用natapp之类的内网穿透工具做。下载安装微信开发者工具,使用小程序模式,新建小程序,在index页面或者其他页面(跳转一下)写:<web-view src=”你的URL”></web-view>,保存编译运行即可。二、获取用户信息在微信调试工具里打开app.js,可以看到有个方法叫wx.login,已经有写好的基本逻辑。用户信息可以console.log查看一下res这个变量。 wx.login({      success: res => {        if (res.code) {          console.log(res)          }// 发送 res.code 到后台换取 openId, sessionKey, unionId      }    })可以看到,res里包含的只是一些基本用户信息,并不包含一个唯一的ID让我们确定这个用户。所以需要利用获取openid的机制,利用ajax与自建服务器交互。其逻辑图在小程序开发文档–登录机制里写的很清楚。在这里我直接贴出来我的代码(C#,ashx一般处理程序),里面包含了服务器端获取openid的方式(将信息传到后台的时候,我用的是明文,实际上为了安全,可以自己加密一下再传到后台。)小程序端: wx.login({      success: res => {        if (res.code) {          //console.log(res)          //发起网络请求           wx.request({             url: ‘https://我的URL路径/处理文件.ashx’,             header: {                      “Content-Type”: “applciation/json”                      },             method: ‘POST’,              data: {               code: res.code                    },             success: function (res) {               wx.setStorageSync(‘openid’, res.data);              // console.log(res.data)这里是成功后回调函数,已经拿到了服务器端获取到的openid              //利用小程序的缓存能力,将获取到的openid存进缓存里,在小程序的生命周期里,都可以随意全局调用。                            }            })                   }// 发送 res.code 到后台换取 openId, sessionKey, unionId      }    })服务器端:<%@ WebHandler Language=”C#” Class=”wx” %>using System.Web;using System.Net;using System.Text;using System.IO;using System.Collections.Generic;public class wx : IHttpHandler {    public void ProcessRequest (HttpContext context) {        context.Response.ContentType = “text/plain”;        HttpRequest request = context.Request;         Stream stream = request.InputStream;        string json = string.Empty;        string responseJson = string.Empty;        if (stream.Length != 0)        {            StreamReader streamReader = new StreamReader(stream);            json = streamReader.ReadToEnd();        }        Dictionary<string, object> ob =JSONSerializer.Deserialize<Dictionary<string, object>>(json);        string js_code=ob[“code”].ToString();        //这里就是与微信服务器交互,获取openid        string data = HttpGet(“https://api.weixin.qq.com/sns/jscode2session?appid=你的appid&secret=你的secret&js_code=”+js_code+”&grant_type=authorization_code”);        Dictionary<string, object> suggestions =JSONSerializer.Deserialize<Dictionary<string, object>>(data);        string openid = suggestions[“openid”].ToString();    //将openid返回        context.Response.Write(openid);    }  public static string HttpGet(string Url)    {        HttpWebRequest request = (HttpWebRequest)WebRequest.Create(Url);        request.Method = “GET”;        request.ContentType = “text/html;charset=UTF-8”;        HttpWebResponse response = (HttpWebResponse)request.GetResponse();        Stream myResponseStream = response.GetResponseStream();        StreamReader myStreamReader = new StreamReader(myResponseStream, Encoding.GetEncoding(“utf-8”));        string retString = myStreamReader.ReadToEnd();        myStreamReader.Close();        myResponseStream.Close();        return retString;    }    public bool IsReusable {        get {            return false;        }    }}到此为止,就获取到了有效用户信息。三、将用户信息传进web-view首先我们发现,小程序里不可以像html那样随意append组件,web-view目前也仅有一个src可以和小程序环境有交互,所以,就想到可以用get方式传值,比如url配置url?openid=1234就可以把信息传进入。以免出现没有用户信息的情况,我没有在index页面直接写web-view,我用它当前置页面,页面加载时,会判定有没有用户信息,如果有的话,会自动跳到web页面,web页面就是我方web-view的地方。如果没有用户信息的话,会强制获取用户信息,然后再跳转,其代码大概是这样的:onLoad: function () {        if (app.globalData.userInfo) {      this.setData({        userInfo: app.globalData.userInfo,        hasUserInfo: true      })      wx.setStorageSync(‘url’, encodeURI(“你的url?nickname=” + app.globalData.userInfo.nickName + “&city=” + app.globalData.userInfo.city + “&country=” + app.globalData.userInfo.country + “&gender=” + app.globalData.userInfo.gender + “&province=” + app.globalData.userInfo.province + “&avatarUrl=” + app.globalData.userInfo.avatarUrl + “&openid=” + wx.getStorageSync(‘openid’)))      //这里的globalData变量是存的用户基本信息,我为了方便把它们都传进去了,其实就传一个openid就够了      wx.navigateTo({        url: ‘../web/web’      })    } else if (this.data.canIUse){      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回      // 所以此处加入 callback 以防止这种情况      app.userInfoReadyCallback = res => {        this.setData({          userInfo: res.userInfo,          hasUserInfo: true        })        wx.setStorageSync(‘url’, encodeURI(“你的URL?nickname=” + app.globalData.userInfo.nickName + “&city=” + app.globalData.userInfo.city + “&country=” + app.globalData.userInfo.country + “&gender=” + app.globalData.userInfo.gender + “&province=” + app.globalData.userInfo.province + “&avatarUrl=” + app.globalData.userInfo.avatarUrl + “&openid=” + wx.getStorageSync(‘openid’)))        wx.navigateTo({          url: ‘../web/web’        })      }    } else {      // 在没有 open-type=getUserInfo 版本的兼容处理      wx.getUserInfo({        success: res => {          //console.log(res)          app.globalData.userInfo = res.userInfo          this.setData({            userInfo: res.userInfo,            hasUserInfo: true          })          wx.setStorageSync(‘url’, encodeURI(“你的URL?nickname=” + app.globalData.userInfo.nickName + “&city=” + app.globalData.userInfo.city + “&country=” + app.globalData.userInfo.country + “&gender=” + app.globalData.userInfo.gender + “&province=” + app.globalData.userInfo.province + “&avatarUrl=” + app.globalData.userInfo.avatarUrl + “&openid=” + wx.getStorageSync(‘openid’)))          wx.navigateTo({            url: ‘../web/web’          })        }      })    }  },然后是web页面。web.wxml:<web-view src=”{{url}}”></web-view>web.js:  onLoad: function (options) {    var dataurl = wx.getStorageSync(‘url’);//获取缓存里的url信息    console.log(dataurl.length)    this.setData({      url: dataurl    });  },上面有个重要的坑需要特别说明一下,这种传值方式在微信调试工具和安卓手机上完全没问题,但是在IOS上,你会发现传值传不进去,其原因就是在ios下,web-view的src不能出现中文或者一些特殊字符,当用户名比较特殊时,就传不进去值,所以,我在index.js里写了urlencode。当然,在这里也可以把内容加密一下再传至后台。比如最简单的无需秘钥的base64,我写一下用法:  onLoad: function (options) {     function base64_encode(str) { // 编码,配合encodeURIComponent使用      var c1, c2, c3;      var base64EncodeChars = “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=”;      var i = 0, len = str.length, strin = ”;      while (i < len) {        c1 = str.charCodeAt(i++) & 0xff;        if (i == len) {          strin += base64EncodeChars.charAt(c1 >> 2);          strin += base64EncodeChars.charAt((c1 & 0x3) << 4);          strin += “==”;          break;        }        c2 = str.charCodeAt(i++);<

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 利用webview组件将已有h5网站移植到微信小程序,且可以用微信身份直接登录
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏