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

栏目: IOS · Android · 发布时间: 7年前

内容简介:开发的小程序中有个用户中心,需求是用户可以点击按钮从而跳转到新链接。实际上在做这个需求的时候,并没有很好的方法,以往的一些经验,也不适用于小程序,查了一些资料,也没有头绪。最终的实现方法就是使用首先建立一个目录,这个目录用来展示外链中的内容。因为是外链,所以要用到看一下目录结构,其中

导语

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

外链展示页面

首先建立一个目录,这个目录用来展示外链中的内容。因为是外链,所以要用到 web-view (注意这个组件有一些特性,从下方链接中查看)。

看一下目录结构,其中 navigator 就是展示外链的页面

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

navigator.wxml 中,只需要一行代码即可

<web-view src="{{url}}"></web-view>

navigator.js 中,修改 url 中的值

onLoad: function (options) {
    if (options.url) {
      this.setData({
        // 设置当前链接
        url: options.url
      })
    } 
  },

用户中心

在用户中心,只需要将链接跳转到 /navigator/navigator 中,并且带上参数即可,看下实例

<!-- {{url}}中是外链地址 -->
<navigator url="/navigator/navigator?url={{url}}"></navigator>

上面的方法可以实现,当然实际项目要复杂些的,根据实际需求进行修改。

参考资料: 小程序navigatorweb-view


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

UML参考手册

UML参考手册

兰博 / UML China / 机械工业出版社 / 2005-8 / 75.00元

《UML参考手册》在第1版的基础上进行了重大更新和扩展。UML的创建者James Rumbaugh、Ivar Jacobson和Grady Booch,清晰完整地讲述了UML的所有概念,包括对序列图、活动模型、状态机、组件、类和组件的内部结构以及特性描述的主要修订。手册式结构不仅有助于读者对UML的概念进行规范化的学习与理解,更为广大程序开发人员、系统用户和工程技术人员提供了方便快捷的查询方式。无......一起来看看 《UML参考手册》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码