美高梅网投网站-美高梅手机网投-美高梅官方网站
做最好的网站

您的位置:美高梅网投网址 > Web前端 > 跳转到应用内的某个页面,但是公司的很多项目

跳转到应用内的某个页面,但是公司的很多项目

发布时间:2019-09-26 21:10编辑:Web前端浏览(199)

    网页程序迁移至微信小程序web-view详解

    2018/08/02 · JavaScript · 小程序

    原稿出处: NeoPasser   

    小程序以后越来越流行,可是公司的多多项目都以用网页写的,小程序语法不合营原生网页,使得旧有档案的次序搬迁至小程序代价非常高。

    小程序从前开放了webview作用,能够说是网页应用的第一次全国代表大会福音了,可是微信的webview有部分坑,那篇小说正是列举一下自己在付出进度中遇到的部分难点以及自己找到的部分建设方案。

    js引入:

    遇见的主题素材

    1. openid登入难题
    2. webview动态src
    3. 开采成效
    4. 享用功能
    5. 围观普通二维码跳转特定页面
    6. 回到按键缺点和失误难点

    const util =require('../../utils/util.js')

    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) { // 第贰回不运转 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 app = getApp()

    开垦功能

    webview里面能够透过jssdk来兑现部分小程序功用,但不能够一向调用小程序的支付功效,那时候大家就需求退换一下战术了:

    1. 在网页里引进微信jssdk
    2. 在网页要求倡导支付的地方,调用跳转页面包车型地铁接口,调节小程序跳转到小程序的费用页面(这么些要在小程序里独自写的),跳转的时候,要求把订单的一对音讯都凑合到链接里,订单音讯由后台再次来到,要求经过微信支付系统的合併下单接口,具体参看支付文书档案。
    3. 跳转到小程序支付页面后,由小程序页面发起支付,支付成功后跳转回webview页面,通过以前设置的动态src,控制webview跳转到特定的页面。

    JavaScript

    // 网页引进jssdk // 网页发起支付 wx.miniProgram.navigateTo({ // payData由后台再次来到,主要是索要统一下单平台的prepay_id url: '../pay/index?data=' + encodeUPRADOIComponent(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)
        }
      }

    事件:

    享受成效

    小程序间接分享的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
        })
    },

    1、key 以bind或catch初阶,然后跟上事件的花色,如bindtap、catchtouchstart。

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

    除了那一个之外享受效用之外,小程序还足以经过配备,实现扫描普通二维码跳转特定页面的法力。

    以下是微信对此成效的牵线

    为了便利小程序开拓者更轻巧地加大小程序,包容线下已有些二维码,微教徒人平台开放扫描普通链接二维码跳转小程序技巧。

    效果与利益介绍

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

    线下商家可不需更改线下二维码,在小程序后台完毕布局后,就可以在顾客扫描普通链接二维码时张开小程序,使用小程序的职能。
    对此普通链接二维码,如今帮忙使用微信“扫一扫”或微信内长按识别二维码跳转小程序.

    二维码法则

    依赖二维码跳转法则,开辟者需求填写必要跳转小程序的二维码准绳。供给如下:

    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" // 错误信息页面
      ],

    页面和tabBar之间跳转:

    参谋链接

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

      2 赞 2 收藏 评论

    美高梅网投网站 1

    wx.switchTab({

    url:'../index/index'

    });

    页面之间跳转方法:

    1、保留当前页面,跳转到应用内的某些页面,使用wx.navigateBack能够回到到原页面。

    wx.navigateTo({   新页面会有重临开关

    url:'../logs/logs?key=value&key2=value2' //传参

    ,

    success: function(res){

    // success

    },

    fail: function() {

    // fail

    美高梅网投网站,},

    美高梅官方网站,complete: function() {

    // complete

    }

    })

    2、wx.redirectTo(OBJECT)

    关门当前页面,跳转到应用内的某部页面。

    wx.redirectTo({   新页面不会有再次回到开关

    url:'../index/index',

    ,

    success: function(res){

    // success

    },

    fail: function() {

    // fail

    },

    complete: function() {

    // complete

    }

    })

    3、x.navigateBack(OBJECT)

    闭馆当前页面,重临上一页面或种类页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需求回到几层。假使 delta 大于现成页面数,则赶回到首页。

    varpages = getCurrentPages()varnum = pages.length

    navigateBack:function(){wx.navigateBack({

    delta: num

    })

    }

    页面跳转也可平昔用 url:

    <navigator url="../login/login?title=1111" >跳转到新页面</navigator>

    <navigator url="../login/login?title=111" redirect>在当前页张开新页面</navigator>

    若是要传 数组, 字典等繁杂类型, 要先用 JSON.stringify() 转成字符串然后传递,接收到事后要用JSON.parse()转变。.

    取参:

    Page({

    onLoad:function(options) {

    this.setData({       //用于给data中的变量赋值

    title: options.key

    })

    }

    })

    数量绑定:

    多少绑定使用 Mustache 语法(双大括号)将变量包起来。

    内容:<view>{{message}}</view>

    调控属性:<view wx:if="{{condition}}"></view>

    关键字:<checkbox checked="{{false}}"></checkbox>

    ...

    http:(微信民众号和小程序上线的话都不能够不是https诉求,小程序接口分歧意ip和端口号)

    wx.request({ 

     url:'test.php',//仅为示范,并非真正的接口地址

    data: { x:'', y:''},

     header: {'content-type':'application/json、默认值、或者、、'application/x-www-form-urlencoded'// }, 

    method:'GET/POST',

     success:function(res){console.log(res.data) }

    })

    APP.JSON(tabBar)

    {

    "pages":[

    "pages/index/index",

    "pages/tucao/tucao",

    "pages/center/center"

    ],

    "window":{

    "backgroundTextStyle":"",

    "navigationBarBackgroundColor":"red",

    "navigationBarTitleText":"三个标题而已",

    "navigationBarTextStyle":"white"

    },

    "tabBar": {

    "list": [{

    "pagePath":"pages/index/index",

    "text":"首页",

    "iconPath":"public/menu-cd.png",

    "selectedIconPath":"public/menu.png"

    },{

    "pagePath":"pages/tucao/tucao",

    "text":"吐槽",

    "iconPath":"public/hot-cd.png",

    "selectedIconPath":"public/hot.png"

    },{

    "pagePath":"pages/center/center",

    "text":"我的",

    "iconPath":"public/center-cd.png",

    "selectedIconPath":"public/center.png"

    }],

    "borderStyle":"white"

    }

    }

    本文由美高梅网投网址发布于Web前端,转载请注明出处:跳转到应用内的某个页面,但是公司的很多项目

    关键词: