美高梅游戏官网娱乐_美高梅手机登录网站

美高梅游戏官网娱乐是公司推出的企业级即时在线娱乐平台,美高梅手机登录网站业界专业、信誉最好的博彩网站,美高梅游戏官网娱乐拥有最高优惠活动和返水,拥有丰富的管理经验和专业的技术队.。

来自 web前端 2019-10-31 20:02 的文章
当前位置: 美高梅游戏官网娱乐 > web前端 > 正文

那么直接跳转去登录页面(登录页面中可以实现

网页程序迁移至微信小程序web-view详细明白

2018/08/02 · JavaScript · 小程序

原稿出处: NeoPasser   

小程序以往特别流行,可是企业的众多项目都以用网页写的,小程序语法不协作原生网页,使得旧有档案的次序搬迁至小程序代价异常高。

小程序早前开放了webview作用,可以说是网页应用的一大福音了,可是微信的webview有黄金年代对坑,那篇文章正是列举一下本身在开拓进度中相见的部分主题材料以至本身找到的有些解决方案。

最近,微信官方修正了 getUserInfo、authorize等 接口,不能够直接弹出授权窗口,那让我们原先风流罗曼蒂克起初就获得客户消息完结报到的效应全部失效,新明确是第一回拿走顾客音信只可以通过 button 去接触,那么有什么建设方案吗?

遭遇的标题

  1. openid登入问题
  2. webview动态src
  3. 支付功用
  4. 享受作用
  5. 扫描普通二维码跳转特定页面
  6. 重返按键缺失难点

本身的思绪是后生可畏步向小程序的时候,立马去调用登陆接口(wx.login,从前的代码不用变)并在回调中去调用获取顾客新闻接口(wx.getUserInfo),那时就须求非常注意了,须求会wx.getUserInfo的得到战败钩子进行判别,若是退步,那么直接跳转去登陆页面(登陆页面中得以兑现按键登陆);要是成功,继续三番四遍逻辑代码。

openid登入难点

微信webview的行使方法很简短,只要如下设置src就足以彰显具体的网址了。

<!-- wxml --> <!-- 指向微信群众平台首页的web-view --> <web-view src=";

1
2
3
<!-- wxml -->
<!-- 指向微信公众平台首页的web-view -->
<web-view src="https://mp.weixin.qq.com/"></web-view>

微信景况里的多多网页都以用页面要完成网址的记名功效,只要把登录的新闻,譬如openid恐怕其余音讯拼接到src里就好了。

此间有个难点,大伙儿号的账号种类平时是以openid来决断唯生机勃勃性的,小程序是能够赢得openid的,不过小程序的openid和原众人号之类的openid是不均等的,要求将本来的openid账号体系进步为unionid账号种类。

以下是微信对unionid的牵线

得到顾客核心消息(UnionID机制)

在关心者与大伙儿号产生音讯交互后,大伙儿号可收获关心者的OpenID(加密后的微复信号,各样客户对各类民众号的OpenID是独步一时的。对于差异公众号,同后生可畏客户的openid分化)。公众号可通过本接口来遵照OpenID获取客商大旨信息,满含别称、头像、性别、所在城市、语言和关切时间。

请细心,假设开荒者有在八个大伙儿号,或在大伙儿号、移动使用之间联合顾客帐号的必要,供给前往微信开放平台(open.weixin.qq.com)绑定民众号后,才可使用UnionID机制来满足上述要求。

UnionID机制表明:

开辟者可透过OpenID来获得客商宗旨新闻。特别需求专心的是,要是开垦者具有三个移动使用、网址使用和大众帐号,可经过得到客户大旨音信中的unionid来分别顾客的唯生龙活虎性,因为只即使同多个微信开放平台帐号下的移动应用、网址使用和大伙儿帐号,顾客的unionid是天下无双的。换句话说,同意气风发客商,对同一个微信开放平台下的不如应用,unionid是平等的。

做完以上步骤,就足以调用小程序api wx.getUserInfo() 来赢得客户信息了,此步骤需求打开后台新闻解密进程,在那就不再赘述,结合小程序api文档操作就好。

赢拿到unioid之后,将unionid新闻拼接到src就能够展开网页登入操作了(前提是网页能够用跳转链接的秘籍登录,相仿民众号页面获得openid的情势)。

切切实实代码如下:

webview动态src

微信的webview有个坑的地点,不会动态的监听src的变迁,那就导致了叁个主题素材,要经过改动src达成页面跳转就无法了。
小编尝试了一些主意之后,找到了多个技术方案:

微信webview在页面load的时候会加载叁遍webview,大家就应用这特性子来促成动态src难题。

  1. 先是把要跳转的链接音讯设置成全局变量,要退换src的时候,先把要src以’?‘拆分为链接和参数两有个别,存入全局函数,再调用onLoad就足以兑现webview刷新了。
  2. 页面跳转时,大家也亟需src的动态刷新,所以要把链接音信存入全局函数;页面跳转时,onShow函数会被调用,当时再调用三回onLoad就可以了。

data: { url: '', loaded: false } // 小程序js里的onLoad函数能够写成这样 onLoad: function () { this.setData({ url: getApp().globalData.urlToken + '?' + getApp().globalData.urlData }) }, changUrl: function () { getApp().globalData.urlToken = '' getApp().globalData.urlToken = 'a=1&b=2' // 直接调用onLoad,就能实现src的刷新 this.onLoad() }, onShow: function () { if (!this.data.loaded) { // 第1回不运维 this.setData({ loaded: true }) return } // 直接调用onLoad,就能完毕src的基础代谢 this.onLoad() } // wxml能够写成这么 <web-view src="{{url}}"></web-view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
data: {
    url: '',
    loaded: false
}
// 小程序js里的onLoad函数可以写成这样
onLoad: function () {
    this.setData({
      url: getApp().globalData.urlToken + '?' +  getApp().globalData.urlData
    })
},
changUrl: function () {
    getApp().globalData.urlToken = 'https://www.example.com'
    getApp().globalData.urlToken = 'a=1&b=2'
    // 直接调用onLoad,就会实现src的刷新
    this.onLoad()
},
onShow: function () {
    if (!this.data.loaded) {
      // 第一次不运行
      this.setData({
        loaded: true
      })
      return
    }
    // 直接调用onLoad,就会实现src的刷新
    this.onLoad()
  }
 
// wxml可以写成这样
<web-view src="{{url}}"></web-view>

const Request = require("/utils/request"); //引进封装的http拦截器

App({

onLaunch: function {

this.authorize(options.query); // 直接授权登陆(options.query 参数与享受配置有关,后续小说介绍)

},

authorize: function {

let self = this;

share = share || {};

wx.login({

success: function {

wx.getUserInfo({

success: function {

Request.post("/api/xcxWxLogin", {

code: res.code,

encryptedData: resp.encryptedData,

iv: resp.iv

}).then(({

data: response

}) => {

if (response.code !== 0) {

wx.showToast({

title: response.msg,

icon: "none"

});

} else {

// 保存sessionid ,每一遍央浼都会在拦截器中活动增添到header中

wx.setStorageSync("UserSessionId", response.data.sessionId);

self.globalData.sessionid = response.data.sessionId;

//todo 后续逻辑代码

}

});

},

fail: function {

//爱护,若是得到失利直接跳转

let timer = setInterval => {

let pages = getCurrentPages();

if (pages.length > 0) {

clearInterval;

let currentPage = pages[pages.length - 1];

if (currentPage.route === "pages/user/userbind/userbind") {

return true;

}

try {

wx.setStorageSync("SYS_PREVIOUSPAGE", currentPage);

setTimeout => {

wx.redirectTo({

url: "/pages/login/login"

});

}, 300);

} catch {

wx.redirectTo({

url: "/pages/login/login"

});

}

}

}, 200);

}

});

}

});

}

})

支出成效

webview里面能够通过jssdk来兑现部分小程序成效,但不可能直接调用小程序的费用作用,这时大家就需求转移一下政策了:

  1. 在网页里引进微信jssdk
  2. 在网页要求倡导支付的地点,调用跳转页面包车型客车接口,调节小程序跳转到小程序的开拓页面(这几个要在小程序里独自写的),跳转的时候,必要把订单的一些信息都凑合到链接里,订单新闻由后台重回,必要经过微信支付种类的统一下单接口,具体参看支付文书档案。
  3. 跳转到小程序开辟页面后,由小程序页面发起支付,支付到位后跳转回webview页面,通过事先设置的动态src,调控webview跳转到特定的页面。

JavaScript

// 网页引进jssdk // 网页发起支付 wx.miniProgram.navigateTo({ // payData由后台重返,首倘使索要联合下单平台的prepay_id url: '../pay/index?data=' + encodeU索罗德IComponent(JSON.stringify(payData)) }) // 微信支付页面 onLoad: function (option) { let page = this try { let data = JSON.parse(option.data) if (!data || !data.prepay_id) { console.error('支付参数错误,请稍后重试', data) } wx.requestPayment({ timeStamp: '' + data.timestamp, nonceStr: data.nonceStr, package: 'prepay_id=' + data.prepay_id, paySign: data.paySign, signType: data.signType, success: function (res) { getApp().globalData.urlToken = `paySuccess.html` // 支付成功 getApp().globalData.urlData = 'data=paySuccessData' wx.navigateTo({ url: '/page/home/index', }) }, fail: function (res) { getApp().globalData.urlToken = `payError.html` // 支付退步 getApp().globalData.urlData = 'data=payErrorData' wx.navigateTo({ url: '/page/home/index', }) }, complete: function (res) { } }) } catch (e) { console.error('支付错误', e) } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 网页引入jssdk
 
// 网页发起支付
wx.miniProgram.navigateTo({
    // payData由后台返回,主要是需要统一下单平台的prepay_id
    url: '../pay/index?data=' + encodeURIComponent(JSON.stringify(payData))
})
// 微信支付页面
onLoad: function (option) {
    let page = this
    try {
      let data = JSON.parse(option.data)
      if (!data || !data.prepay_id) {
        console.error('支付参数错误,请稍后重试', data)
      }
      wx.requestPayment({
        timeStamp: '' + data.timestamp,
        nonceStr: data.nonceStr,
        package: 'prepay_id=' + data.prepay_id,
        paySign: data.paySign,
        signType: data.signType,
        success: function (res) {
          getApp().globalData.urlToken = `paySuccess.html`
          // 支付成功
          getApp().globalData.urlData = 'data=paySuccessData'
          wx.navigateTo({
            url: '/page/home/index',
          })
        },
        fail: function (res) {
          getApp().globalData.urlToken = `payError.html`
          // 支付失败
          getApp().globalData.urlData = 'data=payErrorData'
          wx.navigateTo({
            url: '/page/home/index',
          })
        },
        complete: function (res) {
        }
      })
    } catch (e) {
      console.error('支付错误', e)
    }
  }

收获顾客新闻成功的回调具体得看业务,获取败北的回调首要是加反应计时器去推断页面是还是不是加载成功,加载成功后再保存当前页面路线(用于登入成功后跳转),最终跳转到贰个包括登陆开关的页面(不在app.js中做到报到,而是在login.js中达成报到,首回展开就静默授权了)

享用功用

小程序直接分享的webview所在的页面,假设要求增添页面参数,那大家就必要管理一下了。

  1. webview内是无法直接发起分享的,须求先用wx.miniProgram.postMessage接口,把要求分享的音讯,推送给小程序;推送给小程序的音信不是实时管理的,而是客商点击了享受按键之后,小程序才回来读取的,那将必要种种须要分享的页面再进入的时候就提倡wx.miniProgram.postMessage推送分享消息给小程序。
  2. 小程序页面通过bindmessage绑定的函数读取post新闻,分享的新闻会是一个列表,大家取最终三个分享就好,把分享音信管理好,存到data里面以便下一步onShareAppMessage调用。
  3. 客户点击分享时,会触发onShareAppMessage函数,在其间安装好相应的分享新闻就好了。
  4. onload函数有贰个option参数的,能够读取页面加载时url里带的参数,此时要对原先的onload函数进行校正,达成从option里读取链接新闻。

JavaScript

// 网页wx.miniProgram.postMessage wx.miniProgram.postMessage({ data: { link: shareInfo.link, title: shareInfo.title, imgUrl: shareInfo.imgUrl, desc: shareInfo.desc } }) // 小程序index wxml设置 <web-view src="{{url}}" bindmessage="bindGetMsg"></web-view> // 小程序index js bindGetMsg: function (e) { if (!e.detail) { return } let list = e.detail.data if (!list || list.length === 0) { return } let info = list[list.length - 1] if (!info.link) { console.error('分享音信错误', list) return } let tokens = info.link.split('?') this.setData({ shareInfo: { title: info.title, imageUrl: info.imgUrl, path: `/page/index/index?urlData=${encodeURIComponent(tokens[1])}&urlToken=${tokens[0]}` } }) }, onShareAppMessage: function (res) { if (res.from === 'button') { // 来自页面内转载开关 console.log(res.target) } let that = this return { title: that.data.shareInfo.title, path: that.data.shareInfo.path, imageUrl: that.data.shareInfo.imageUrl, success: function (res) { // 转载成功 }, fail: function (res) { // 转载战败 } } }, onLoad: function (option) { if (option.urlToken) { getApp().globalData.urlToken = option.urlToken } if (option.urlData) { getApp().globalData.urlData = option.urlData } this.setData({ url: getApp().globalData.urlToken + '?'

  • getApp().globalData.urlData }) },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// 网页wx.miniProgram.postMessage
wx.miniProgram.postMessage({
  data: {
    link: shareInfo.link,
    title: shareInfo.title,
    imgUrl: shareInfo.imgUrl,
    desc: shareInfo.desc
  }
})
// 小程序index wxml设置
<web-view src="{{url}}" bindmessage="bindGetMsg"></web-view>
// 小程序index js
bindGetMsg: function (e) {
    if (!e.detail) {
      return
    }
    let list = e.detail.data
    if (!list || list.length === 0) {
      return
    }
    let info = list[list.length - 1]
    if (!info.link) {
      console.error('分享信息错误', list)
      return
    }
    let tokens = info.link.split('?')
    this.setData({
      shareInfo: {
        title: info.title,
        imageUrl: info.imgUrl,
        path: `/page/index/index?urlData=${encodeURIComponent(tokens[1])}&urlToken=${tokens[0]}`
      }
    })
},
onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    let that = this
    return {
      title: that.data.shareInfo.title,
      path: that.data.shareInfo.path,
      imageUrl: that.data.shareInfo.imageUrl,
      success: function (res) {
        // 转发成功
      },
      fail: function (res) {
        // 转发失败
      }
    }
},
onLoad: function (option) {
    if (option.urlToken) {
      getApp().globalData.urlToken = option.urlToken
    }
    if (option.urlData) {
      getApp().globalData.urlData = option.urlData
    }
    this.setData({
      url: getApp().globalData.urlToken + '?' +  getApp().globalData.urlData
    })
},

图片 1login页面,点击按键完结报到

环视普通二维码跳转特定页面

除此而外分享功效之外,小程序还是能够通过安顿,实现扫描普通二维码跳转特定页面包车型地铁功能。

以下是微信对此作用的牵线

为了便利小程序开拓者更简便易行地加大小程序,宽容线下原来就有的二维码,微信大伙儿平台开放扫描普通链接二维码跳转小程序技巧。

效果与利益介绍

普通链接二维码,是指开辟者使用工具对网页链接举行编码后生成的二维码。

线下商家可不需改动线下二维码,在小程序后台完毕布局后,就可以在客户扫描普通链接二维码时张开小程序,使用小程序的功能。
对于普通链接二维码,方今援助选用微信“扫一扫”或微信内长按识别二维码跳转小程序.

二维码准则

基于二维码跳转准则,开荒者要求填写须要跳转小程序的二维码法则。须要如下:

  1. 二维码法规的域名须经过ICP备案的认证。
  2. 支撑http、https、ftp初阶的链接(如:、)。
  3. 一个小程序帐号可配置不多于十三个二维码前缀准绳。

前缀占用准绳

开采者可选拔是不是占用相符二维码相配准则的全数子准绳。如选取占用,则其余帐号不可申请选拔满意该前缀相称准绳的其他子法规。

如:若开荒者A配置二维码法规:,并选择“占用全数子准则“,其他开辟者将不得以布置满足前缀相配的刘雯则如。

自身推荐的措施

webview完毕格局

  1. 安装跳转成效小程序后台就足以设置,链接是分为四局地,路https://www.example.com/wxmin…。

    https://www.example.com 域名
    /wxmini/ 小程序前置规则,需要在服务器上建一个文件夹,并且把验证文件放在文件夹线
    home.html 需要跳转的网页页面
    a=1 跳转页面的参数
  2. 对onload函数再实行拍卖,达成经常二维码跳转。

JavaScript

// 对index onLoad在进展拍卖 onLoad: function (option) { this.resetOption(option) if (option.urlToken) { getApp().globalData.urlToken = option.urlToken } if (option.urlData) { getApp().globalData.urlData = option.urlData } this.setData({ url: getApp().globalData.urlToken + '?' + getApp().globalData.urlData }) }, resetOption: function (option) { if (!option) { return } if (option.q) { option.q = decodeURIComponent(option.q) if (option.q.indexOf('') == -1) { return } let tmp = option.q.replace('/wxmini', '') let tmps = tmp.split('?') option.urlToken = tmps[0] option.urlData = tmps[1] } else { option.urlData = decodeURIComponent(option.urlData) } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 对index onLoad在进行处理
onLoad: function (option) {
    this.resetOption(option)
    if (option.urlToken) {
      getApp().globalData.urlToken = option.urlToken
    }
    if (option.urlData) {
      getApp().globalData.urlData = option.urlData
    }
    this.setData({
      url: getApp().globalData.urlToken + '?' +  getApp().globalData.urlData
    })
},
resetOption: function (option) {
    if (!option) {
      return
    }
    if (option.q) {
      option.q = decodeURIComponent(option.q)
      if (option.q.indexOf('https://www.example.com/wxmini/') == -1) {
        return
      }
      let tmp = option.q.replace('/wxmini', '')
      let tmps = tmp.split('?')
      option.urlToken = tmps[0]
      option.urlData = tmps[1]
    } else {
      option.urlData = decodeURIComponent(option.urlData)
    }
}

上边介绍登入页面包车型客车逻辑代码:

归来开关缺点和失误难点

要是web页面是在首先个页面包车型大巴话,这个时候会有叁个标题,小程序的回来开关就一直不了,webview不能够使用微信的回到开关了,这时只要在webview页前边多加叁个跳转页面就好了(第二个页面也得以设置成获取顾客权限的页面,然而作者倍感那样感受不佳,亦非具有页面都要客户得到了权力才得以应用)

终极的页面层级

JavaScript

"pages": [ "page/index/index", // 首页,管理onload里的option内容,为了重回按键设置的 "page/home/index", // webview所在的页面 "page/auth/index", // 获取顾客权限的页面 "page/pay/index", // 支付页面 "page/error/index" // 错误音信页面 ],

1
2
3
4
5
6
7
"pages": [
    "page/index/index", // 首页,处理onload里的option内容,为了返回按钮设置的
    "page/home/index", // webview所在的页面
    "page/auth/index", // 获取用户权限的页面
    "page/pay/index", // 支付页面
    "page/error/index" // 错误信息页面
  ],

const Request = require("../../utils/request");

Page({

/**

* 页面包车型地铁开首数据

*/

data: {

route: "/pages/home/home"

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function {

let self = this;

wx.getStorage({

key: "SYS_PREVIOUSPAGE",

success: function {

if (res.errMsg === "getStorage:ok") {

self.setData({

route: "/" + res.data.route,

share: res.data.options

});

}

wx.removeStorage({

key: "SYS_PREVIOUSPAGE"

});

}

});

},

bindgetuserinfo: function {

if (e.detail.errMsg.indexOf > -1) {

wx.showModal({

title: '温馨提示',

content: '您未同意授权,系统不能检查评定你的地位,请允许授权',

});

} else {

getApp().authorize(this.data.share);

setTimeout => {

if (["/pages/home/home", "/pages/course/courselist/courselist", "/pages/course/publiclist/publiclist", "/pages/consult/consultlist/consultlist", "/pages/usercenter/usercenter"].indexOf(this.data.route) > -1) {

wx.switchTab({

url: this.data.route

});

} else {

wx.redirectTo({

url: this.data.route

});

}

}, 800);

}

}

})

参照链接

  1. webview文档
  2. 小程序unionid介绍
  3. unionid获得情势

    2 赞 2 收藏 评论

图片 2

login思路:黄金时代跻身该页面,从缓存中把上多个页面拿出来(读取后须要破除该缓存),然后把登陆开关设置成获取客商音信种类,如

图片 3设置签到按键

点击登陆开关后触发bindgetuserinfo回调,在回调中判定是还是不是授权,未有一点击鲜明授权就提醒要授权,有授权就一向调用app.js的授权方法,最终重定向到上三个页面(是重定向不是回到,何况需求注意是或不是导航页面

图片 4报到回调

到那边,需求点击按键才具触发登入已消除。

PS:供给思量的标题是,在别的页面,怎么可以力精通是还是不是业已成功报到了啊?

本文由美高梅游戏官网娱乐发布于web前端,转载请注明出处:那么直接跳转去登录页面(登录页面中可以实现

关键词: