小程序开发:新页面打开链接

[复制链接]
查看: 2872|回复: 8
  • 萌哒
    2018-11-19 14:03
  • 发表于 2019-1-23 14:20:35 | 显示全部楼层 |阅读模式

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    导语

    开发的小程序中有个用户中心,需求是用户可以点击按钮从而跳转到新链接。实际上在做这个需求的时候,并没有很好的方法,以往的一些经验,也不适用于小程序,查了一些资料,也没有头绪。最终的实现方法就是使用 navigator 组件,如果哪位有更好的方法,或者我的实现方法有缺陷,请在下方指出。
    外链展示页面

    首先建立一个目录,这个目录用来展示外链中的内容。因为是外链,所以要用到 web-view(注意这个组件有一些特性,从下方链接中查看)。
    看一下目录结构,其中 navigator 就是展示外链的页面
    095026lw5l7ususv5xup7b.png
    在 navigator.wxml 中,只需要一行代码即可
    <span class="xml"></span class="hljs-name"style="color: rgb(51, 51, 51); font-weight: 700;"web-view/span>在 navigator.js 中,修改 url 中的值
    onLoad: function (options) { if (options.url) { this.setData({ // 设置当前链接 url: options.url }) } },用户中心

    在用户中心,只需要将链接跳转到 /navigator/navigator 中,并且带上参数即可,看下实例
    <span class="xml"></span class="hljs-name"style="color: rgb(51, 51, 51); font-weight: 700;"navigator/span>上面的方法可以实现,当然实际项目要复杂些的,根据实际需求进行修改。
    参考资料: 小程序 、 navigator 、 web-view 。
    发表于 2019-1-24 13:37:57 | 显示全部楼层
    珍惜生命,果断回帖。
    回复

    使用道具 举报

    发表于 2019-1-24 13:38:00 | 显示全部楼层
    这个帖一般般,还可以哦。
    回复

    使用道具 举报

    发表于 2019-1-24 15:11:59 | 显示全部楼层
    回的人少,我来小顶一下
    回复

    使用道具 举报

    发表于 2019-1-25 09:54:21 | 显示全部楼层
    正需要,支持楼主大人了!
    回复

    使用道具 举报

    发表于 2019-1-25 17:43:48 | 显示全部楼层
    么有分,谁能送我点积分啊::>_<::
    回复

    使用道具 举报

    发表于 2019-1-25 20:45:05 | 显示全部楼层
    确实是难得好帖啊,顶先
    回复

    使用道具 举报

    发表于 2019-1-27 09:39:05 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复

    使用道具 举报

    发表于 2019-2-1 11:16:32 | 显示全部楼层
    我只是路过打酱油的
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

     
     
    技术支持
    在线客服
    售后交流群瑞恩社区™售后</font><br><span>交流
    工作时间:
    8:00-18:00
    客服热线:
    15368564009
    微信扫一扫
    返回顶部 关注微信 下载APP 返回列表