小程序之点击跳转页面——wx.navigateTo(Object object)

点击跳转页面

跳转前的页面article

通过点击事件 bindtap 调用函数 rowTapped 并向其中传递参数 id

wxml

<view class="row" wx:for="{{list}}" wx:key="id">
		<!-- 名称与语句 -->
		<view class="content">
			<view class="top">
				<view bindtap="rowTapped" data-id="{{item.id}}">
					<view class="loginname">{{item.author.loginname}}</view>
					<view class="nickname" >{{item.title}}</view>
				</view>
			</view>
		</view>
</view>

获取页面传递的参数 id 将其代入跳转页面的路由中去

js

rowTapped: function (event) {
    var id = event.currentTarget.dataset.id
    console.log(event)
    var to = {
      url: `../articleDetail/index?id=${id}`
    }
    wx.navigateTo(to)
  }

wx.navigateTo(Object object)

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

在小程序插件中使用时，只能在当前插件的页面中调用

跳转后的页面文件articleDetail

wxml

<view>
  <rich-text nodes="{{content}}">
  </rich-text>
</view>

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    aritcleId: 0,
    content:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
    var that = this
    this.setData(
    {
    	aritcleId:options.id
    })
    wx.request({
      url: `https://cnodejs.org/api/v1/topic/${options.id}`, // 获取对应 id 的地址
      success (res) {	// 响应成功返回
        var html =that.escape2Html(res.data.data.content) // 将返回数据经过转义方法转义
        // console.log(res)
        that.setData(
        {
          content:html	// 返回数据到页面上
        }) 
      }
    })
  },
  //转义方法
  escape2Html(str) {
    var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"', 'ldquo': '"' ,'rdquo':'"'};
    return str.replace(/&(lt|gt|nbsp|amp|quot|ldquo|rdquo|hellip);/ig, function (all, t) { return arrEntities[t]; }).replace('<section', '<div').replace('<img', '<img style="max-width:100%;height:auto" ');
  }-

获取改id下的内容，并将其转义出来