微官网页面跳转

原创2018-11-19 17:05:32102
摘要:公共js部分 // common.js var requestUrl = "http://www.wx1.cn/index.php/"; function post(url, data, fun, that) {   if(url == '
公共js部分

// common.js
var requestUrl = "http://www.wx1.cn/index.php/";

function post(url, data, fun, that) {
  if(url == 'undefined'){
    return false;
  }
  var postUrl = requestUrl + url;
  wx.request({
    url: postUrl, //接口地址
    data: data,
    method:'POST',
    dataType:'json',
    header: {
      'content-type': 'application/json' // 默认值
    },
    success(res) {
      that[fun](res.data.result);  
      //console.log(res.data)
    },
    fail(res) {
      console.log('请求失败了,哈哈哈');
      return {};
    }
  })


}

module.exports.post = post

首页JS

//index.js
//获取应用实例
var com = require('../../utils/util.js');
const app = getApp()

Page({
  data: {
    img: [],
    list: []
  },
  onLoad: function(options){
    //console.log(options);
    com.post('Api/Home/index', {id: options.id}, "setContent", this);
  },
  setContent: function (res) {
    console.log(res);
    //return {};
    this.setData({
      img: res.img,
      list: res.new
    });
  },
  //以下是用函数实现跳转的方法
  goDetails: function (e) {
    //console.log(e.currentTarget.dataset.id);
    wx.navigateTo({
      url: "../news/details?id=" + e.currentTarget.dataset.id,
    })
  }
})

首页视图1  ----用标签实现跳转

<!--index.wxml-->
<view>

<swiper indicator-dots="true" autoplay="true" interval="3000" duration="500" indicator-color="#A33" indicator-active-color="#FFF" class="m-b-2">
    
      <block wx:for="{{img}}" wx:key="">
      <swiper-item>
        <image src="{{item}}" class="slide-image h10 w-100"></image>
      </swiper-item>
    </block>
    
  </swiper>


  <view class="hot">要闻</view>
  <!-- 要闻列表 -->
  <view class="hot-div" wx:for="{{list}}" wx:key="id">

    <navigator url="../news/details?id={{item.id}}">
      <image src='{{item.img}}' class="hot-img"></image>

      <view class="hot-right">
        <view class="size0-9rem hide_size">{{item.title}}</view>
        <view class="size0-7rem">{{item.add_time_s}}</view>
      </view>
      
    </navigator>

    <view class="clear-both"></view>

  </view>

</view>

首页视图2 ----用函数实现跳转

<view>

<swiper indicator-dots="true" autoplay="true" interval="3000" duration="500" indicator-color="#A33" indicator-active-color="#FFF" class="m-b-2">
    
      <block wx:for="{{img}}" wx:key="">
      <swiper-item>
        <image src="{{item}}" class="slide-image h10 w-100"></image>
      </swiper-item>
    </block>
    
  </swiper>


  <view class="hot">要闻</view>
  <!-- 要闻列表 -->
  <view class="hot-div" wx:for="{{list}}" wx:key="id" bindtap="goDetails" data-id="{{item.id}}">

   
      <image src='{{item.img}}' class="hot-img"></image>

      <view class="hot-right">
        <view class="size0-9rem hide_size">{{item.title}}</view>
        <view class="size0-7rem">{{item.add_time_s}}</view>
      </view>
      


    <view class="clear-both"></view>

  </view>

</view>

总结:方法1---闭合标签<navigator url="../news/details?id={{item.id}}"></navigator>,方法2---API跳转组件,wx.navigateTo({url: "../news/details?id=" + e.currentTarget.dataset.id})【应用时必须为API封装一个方法】,,,最后还是忍不住想问下,为啥几个接口直接就出来了,一点都没有讲啊,,还好看明白了源码!

批改老师:查无此人批改时间:2018-11-19 18:03:21
老师总结:代码写的不错。忍不住就直接问,别憋坏了。 接口有一堂课提过,而且接口是php写的,你应该会。还有,最近刚出了一个api接口的新课程。注意查看。

发布手记

热门词条